Single image lightbox

[svsanchez]

Hello community

I would like to make a Restaurant Menu where each food option has a small thumbnail to the left of its name, description and price When clicked, the thumbnail should be shown in it's larger version with the lightbox effect. I have searched for a droplet or module but only found image galleries, not a way to enlarge an image inserted with the WYSIWYG.

Example of what I am trying to do:

[THUMBNAIL]  SWISS HAMBURGER
                     Delicious hamburguer with swiss cheese, 1/4 meat etc................ ........ $4.99

[THUMBNAIL]  GUATEMALAN HAMBURGER
                     Hamburguer filled with fresh guacamole, 1/4 meat etc................ ......... $4.99

So when I click on the little thumbnail I get the big version of the picture with the lightbox effect.

Is there a simple way of doing this with WB?

Thank you!

[sky writer]

This is quite easy, once you have the module(s) installed.

There are a few different ways to achieve a "lightbox" effect.  I use "FancyBox", and prefer the Library Admin module method by WebBird.  Download and installation instruction can be found here:
http://www.websitebakers.com/pages/libs/libraryadmin.php

If you have more questions about getting it working, just ask.

[jacobi22]

another way: use colorboxv1.5 from here -> http://bundesverband-wintergarten.de/pages/WebsiteBaker.php

very simple to use

see the rel-Tag here in the big-picture-link, thats all

Code: [Select]

<a href="http://www.mydomain.de/media/Foto1.jpg" rel="cslide" title="Foto 1">
    <img alt="" height="200" src="http://www.mydomain.de/media/Foto1_th.jpg" width="149" /></a>
search for more threads about colorbox here for more tips

[svsanchez]

Hello and thank you to both of you, unfortunatelly I couldn't make it work with either of your solutions:

SkyWriter, I installed the Library Admin from WebBird and chose the fancybox, then added the [[LibLoader]] code to the wysiwig section as the instructions said, but when I click on my image I get the full size image on another page.

Jacobi22, I also tried what you suggested, installed the colorboxc1.5 from the URL you gave me which unfortunatelly is only in German and it was impossible to translate as Google reported a "server error" while trying to translate. But after I installed the module I added the Rel tag as you mentioned, and all I got when I clicked on the image was the big size image on another page, just as had happened with the Library Admin above.

Here's the code I used:

<a href="http://tacocamperogrill.com/media/contenido/socat.jpg" rel="cslide" title="Tacos"><img src="http://tacocamperogrill.com/media/contenido/socat.jpg" width="450" height="286" vspace="5" hspace="5" border="0" align="middle" alt="" /></a>

Can you tell me what step I'm missing or what I am doing wrong?

Thank you!

[jacobi22]

i'm doesnt use library admin, wblib etc., so i'm not sure, whats the right way for that

in my templates i use jquery with the register_modfile-methode like that

Code: [Select]

<?php
   if(function_exists('register_frontend_modfiles')) {
   register_frontend_modfiles('css');
   register_frontend_modfiles('jquery');
   register_frontend_modfiles('js');
   }
and also include the jquery.colorbox-min.js like

Code: [Select]

<script type="text/javascript" src="<?php echo WB_URL; ?>/modules/colorbox/js/jquery.colorbox-min.js"></script>
maybe it's not the best way, but it's work for me

[sky writer]

- Right click your image, go to Image Properties
- Under the "Link" tab, make sure Relationtyp is set to FancyBox
- Click Ok and save.

[svsanchez]

Hello Jacobi22, thank you again for your help, I tried again with the modifications that you mention but couldn't make it work that way

Sky Writer: your solution worked, thank you so much!!!!