WebsiteBaker Community Forum
WebsiteBaker Support (2.8.x) => Droplets & Snippets => Topic started by: svsanchez 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!
-
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.
-
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
<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
-
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!
-
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
<?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
<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
-
- Right click your image, go to Image Properties
- Under the "Link" tab, make sure Relationtyp is set to FancyBox
- Click Ok and save.
-
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!!!!