Grouping images with Slimbox

[TJS]

Hi,

I'm trying to produce a slideshow with thumbnails and a lightbox. So
far got the slideshow and the thumbnails working OK and the lightbox
effect to appear, but it only every shows two images at a time.

I've tried all sorts of variations to the HTML, but it's not getting
me anywhere (apart from backwards occasionally!). This is the present
format:

<a rel="lightbox-tube" href="images/2.jpg" title="Warren Street
escalators."><img src="images/2.jpg" img alt="Warren Street." img
id="slide-1" /></a>

The frameworks I'm using are Mootools 1.2 and Slimbox 1.71. I
downloaded Mootools with Slimbox, so it contains all the correct
modules, so that shouldn't be the problem.

It always seems to work on all the demo and real pages I've looked at,
so what am I doing wrong?

Thanks very much for your time,

Tom

[Aeron Glemann]

Because of the way slideshow works with the dom - if you wanted to
have multiple images you'd have to use it differently than the demo on
the slideshow website.

Slimbox has a function to manually open the light box that works with
multiple images:

http://code.google.com/p/slimbox/wiki/MooToolsAPI#Multiple_images

So it would be some combination of loading the slideshow with your
image data, than adding the event handler to pause the slideshow and
open slimbox using the function at the link above. The 2nd parameter
you'd have to set dynamically as it would depend on which slide was
currently showing when the slideshow was clicked.

Let me know if you have trouble implementing this and I will try to
work up an example.

> --
> You received this message because you are subscribed to the Google Groups "Mootools Slideshow" group.
> To post to this group, send email to mootools-...@googlegroups.com.
> To unsubscribe from this group, send email to mootools-slides...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/mootools-slideshow?hl=en.
>
>

[TJS]

Hi,

Thank you so much for your quick reply.

I've had a look at the link and think I've integrated my images
correctly, but not the function itself.

This is the how I've expressed what I want to happen inside the head:

<script type="text/javascript" src="js/slimbox.js"></script>
<script type="text/javascript">
//<![CDATA[
Slimbox.open([["2.jpg", "Warren Street"], ["8.jpg",
"Westminster"], ["18.jpg", "Chalk Farm"], ["20.jpg", "Great Portland
Street"]], 0, {loop: true});
//]]>
</script>

But the browser isn't picking it up, I guess because I haven't set it
dynamically because I don't fully understand what that means! Sorry,
I'm still very new to this.

It would be really helpful if you could provide an example so I can
connect everything up.

Thanks again,

Tom

On Mar 21, 1:53 pm, Aeron Glemann <aeron.glem...@gmail.com> wrote:
> Because of the way slideshow works with the dom - if you wanted to
> have multiple images you'd have to use it differently than the demo on
> the slideshow website.
>
> Slimbox has a function to manually open the light box that works with
> multiple images:
>
> http://code.google.com/p/slimbox/wiki/MooToolsAPI#Multiple_images
>
> So it would be some combination of loading the slideshow with your
> image data, than adding the event handler to pause the slideshow and
> open slimbox using the function at the link above. The 2nd parameter
> you'd have to set dynamically as it would depend on which slide was
> currently showing when the slideshow was clicked.
>
> Let me know if you have trouble implementing this and I will try to
> work up an example.
>

[Aeron Glemann]

hi! sorry for the delay - I mocked something together showing what I
mean... let me know if it works for you!

http://www.electricprism.com/aeron/file_download/33/Slideshow+2%21.zip

y'r pal -Aeron

[TJS]

Hi,

Thanks for this. Took a while to spot the comma I missed out, but
once I had it all worked fine.

Definitely a few steps above my current level, so time to stick my
head back in the books once I've sorted all the CSS around the
slideshow. Will pass on the link once it's done.

Thanks very much for your help,

Tom

On Mar 29, 4:23 pm, Aeron Glemann <aeron.glem...@gmail.com> wrote:
> hi! sorry for the delay - I mocked something together showing what I
> mean... let me know if it works for you!
>
> http://www.electricprism.com/aeron/file_download/33/Slideshow+2%21.zip
>
> y'r pal -Aeron
>

[TJS]

Hm, one final question I'm battling with having got the lightbox code
to work:

The site is going to be a place for me to display photographs, so some
images are landscape and some portrait. My original intention was to
create classes to deal with each format respectively and apply that to
the references in the body having got the lightbox to work.

Now only one reference appears in the body, is there any way to get
the slideshow (not the lightbox) and thumbnails to adapt to show both
landscape and portrait images correctly?

Thanks again,

Tom

[TJS]

Hi,

Have you had a chance to look at this? Sorry to be a pain, but I've
tried everything I can think of and not got anywhere.

Even if the answer is it's not possible, at least I can start to think
of an alternative solution.

Thanks,

Tom

[Aeron Glemann]

There is an example here of working with portrait and landscape images:

http://www.electricprism.com/aeron/slideshow/example3.html

Getting portrait / landscape thumbnails to work would be a CSS
thing... there are lots of tricks on doing this around the net:

http://www.google.com/search?q=css+vertical+center

[Tom Storr]

Ah.  Definitely a wood/ trees moment there!

Thank you for your patience...  CSS is much safer ground, so should be OK from here.

Cheers,

Tom