Slimbox image grouping - HTML Forums

DismantleDesign · 11-10-2009, 11:35 PM

I am trying to get this Slimbox javascript to work a certain way. I know how to call it in my code such as

Code:

	<script type="text/javascript" src="js/mootools.js"></script>
    <script type="text/javascript" src="js/slimbox.js"></script>
	<link rel="stylesheet" href="css/slimbox.css" type="text/css" media="screen" />

and I know how to make one image bring up another such as

Code:

<a href="image.jpg" rel="lightbox" title="image"><img src="imagethumb.jpg" border="0" alt=""/></a>

but I want one image to bring up the slimbox and say image 1 of 10 or whatever so i can click the next button and go through the images. I want to use slimbox and i have the next button gif that came with the free files from the slimbox site, but I cant seem to find a way to get it to do that. I have seen it on somebody elses website using slimbox, i know, because its not easy to mistake slimbox. i just forgot what site it was.

One page I found said to do that by doing something like

Code:

<a href="image.jpg" rel="lightbox-group1" title="image"><img src="imagethumb.jpg" border="0" alt=""/></a>

and adding to the REL command. That didn't help AT ALL. because i want one image to call many. Does this make sense?

The slimbox site doesn't help me any. According to the way they have grouping set up, you have to set up a link for every single image. I just want to associate one image as a link per 10 images in a slimbox. Thanks in advance.

coothead · 11-11-2009, 03:51 AM

Hi there DismantleDesign,

I have worked on lightbox for another member here.
I would presume that it's workings are similar to that of slimbox.

To have one link work many images in a group requires that you code a link for each image, as normal....

Code:


<a href="images/image-3.jpg" rel="lightbox[plants]" title="Roll over and click right side of image to move forward.">
<img src="images/thumb-3.jpg" alt="Plants: image 1 0f 4 thumb" >
</a>
<a class="hide" href="images/image-4.jpg" rel="lightbox[plants]"  title="Alternatively you can press the right arrow key.">
<img src="images/thumb-4.jpg" alt="Plants: image 2 0f 4 thumb">
</a>
<a class="hide" href="images/image-5.jpg" rel="lightbox[plants]"  title="The script preloads the next image in the set as you're viewing.">
<img src="images/thumb-5.jpg" alt="Plants: image 3 0f 4 thumb">
</a>
<a class="hide" href="images/image-6.jpg" rel="lightbox[plants]"  title="Press Esc to close">
<img src="images/thumb-6.jpg" alt="Plants: image 4 0f 4 thumb">
</a>

...and then set all but the first link to display:none in your stylesheet....

Code:


.hide {
    display:none;
 }

DismantleDesign · 11-11-2009, 12:02 PM

You presume correct. Slimbox is a lite version of lightbox. It uses the rel="lightbox" command still.

I see what you did there with the hide code. Nice work. You guys never fail to amaze me with your quick and awesome repsonses. Thank you again, Coothead. I will have to test that out when I get home from work.

coothead · 11-11-2009, 12:18 PM

No problem, you're very welcome.