Author Topic: Single image lightbox  (Read 5258 times)

Offline svsanchez

  • Posts: 486
Single image lightbox
« on: October 23, 2013, 08:44:55 PM »
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!

Offline sky writer

  • Posts: 926
Re: Single image lightbox
« Reply #1 on: October 23, 2013, 10:45:20 PM »
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

  • Guest
Re: Single image lightbox
« Reply #2 on: October 23, 2013, 11:12:07 PM »
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

Offline svsanchez

  • Posts: 486
Re: Single image lightbox
« Reply #3 on: October 24, 2013, 12:37:32 AM »
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

  • Guest
Re: Single image lightbox
« Reply #4 on: October 24, 2013, 12:48:42 AM »
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




Offline sky writer

  • Posts: 926
Re: Single image lightbox
« Reply #5 on: October 24, 2013, 03:30:25 AM »
- Right click your image, go to Image Properties
- Under the "Link" tab, make sure Relationtyp is set to FancyBox
- Click Ok and save.

Offline svsanchez

  • Posts: 486
Re: Single image lightbox
« Reply #6 on: October 24, 2013, 07:45:17 AM »
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!!!!