Janet,
The buttons are background images. The previous and next elements
themselves are an anchor with a clear GIF inside. You can use whatever
dimensions you want.
Imagebox requires the following CSS:
#ImageBoxNextImage {
background-image: url(spacer.gif);
background-color: transparent;
}
#ImageBoxPrevImage {
background-image: url(spacer.gif);
background-color: transparent;
}
#ImageBoxNextImage:hover {
background-image: url(next_image.jpg);
background-repeat: no-repeat;
background-position: right top;
}
#ImageBoxPrevImage:hover {
background-image: url(prev_image.jpg);
background-repeat: no-repeat;
background-position: left bottom;
}
Change "next_image.jpg" and "prev_image.jpg" to whatever your custom
buttons are, and you're good to go.
For the custom Close button, in the imagebox initiailization script,
change "closeHTML: '<img src="close.jpg" />'" to point to your custom
close button… that's it.
By the way, you can also position the buttons wherever you want like this:
"background-image: left 50%" (that would put the button all the way on
the left, vertically centered on the image).
See another customization of mine at
http://maritimecompliance.com/hazcheck/view.php?p=5#tour
Have fun
--
Tim is MrGossett
On 1/25/07, Janet Weber <[EMAIL PROTECTED]> wrote:
> Hi
> I want to design my own buttons for the imagebox but I don't know the
> demenios to use (30px x 30px).
>
> Janet
> ----- Original Message -----
> From: "Tim Gossett" <[EMAIL PROTECTED]>
> To: "jQuery Discussion." <[email protected]>
> Sent: Thursday, January 25, 2007 4:32 PM
> Subject: Re: [jQuery] Interface 1.1.1 - imagebox
>
>
> The short answer is that the dimensions of the next and previous
> elements are calculated: half the width of the current image, 100% the
> height.
>
> If you have the (uncompressed) source, take a look at imagebox.js
> around line 515:
>
> prevImageEl.css({
> left : jQuery.ImageBox.options.border + 'px',
> top : jQuery.ImageBox.options.border + 'px',
> width : containerW/2 - jQuery.ImageBox.options.border * 3 + 'px',
> height : containerH - jQuery.ImageBox.options.border * 2 + 'px'
> })…
>
> and similar for nextImageEl. You can style the close button with
> #ImageBoxClose (line 240).
>
> The only way to change this is the edit imagebox.js yourself. You may
> want to copy it first, then edit the copy, and include that copy right
> after you include interface.
>
> Take a look at a modification I did at http://mrgossett.com/jQuery/imagebox/
>
> --
> Tim is MrGossett
>
> On 1/25/07, Janet Weber <[EMAIL PROTECTED]> wrote:
> >
> >
> >
> > Hi
> > Dose anyone know what are the demnsions of the next, previous,close images
> > for imagebox are?
> >
> > Janet
> > _______________________________________________
> > jQuery mailing list
> > [email protected]
> > http://jquery.com/discuss/
> >
> >
> >
>
> _______________________________________________
> jQuery mailing list
> [email protected]
> http://jquery.com/discuss/
>
>
> _______________________________________________
> jQuery mailing list
> [email protected]
> http://jquery.com/discuss/
>
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
