Jquery Lightbox [Support thread]

14 Jan 2009, 20:56

#1

yellow1912

Totally Zenned

Join Date:: Oct 2006
Posts:: 5,422
Plugin Contributions:: 0

Jquery Lightbox [Support thread]

Fully compatible with image handler and jquery zoom.

An ideal lightbox solution for you, since the next version of zencart will also use jquery by default!

Super easy to enable lightbox on your custom product type, no need to copy any file!

Demo:
http://demo.rubikintegration.com/jqzoom/index.php?main_page=product_info&cPath=21&products_id=47

Link download in my sig, will be posted to download section soon.

02 Mar 2009, 19:41

#2

s58smith

New Zenner

Join Date:: Sep 2008
Posts:: 22
Plugin Contributions:: 0

Re: Jquery Lightbox [Support thread]

yellow1912:
Fully compatible with image handler and jquery zoom.

An ideal lightbox solution for you, since the next version of zencart will also use jquery by default!

Link download in my sig, will be posted to download section soon.

Overall very nice addition. I was actually looking for something simpler for an image light box than either lightbox of hoverbox. Best thing I liked about yours was it didn't interfere at all with IH2. I found installing either of the other choices would break the js for image mouse over on thumbnail images. I wanted a image light box effect, but only on the main image, and with minimal install impact. Keeps all my images properties from Zencart/IH2. This addition was perfect for just that.

Few notes on bugs/trouble I had when installing. Maybe just me not knowing enough or really are things needing fixed.

I'm running on Windows 2K3 w/ IIS6.
In tpl_modules_main_product_image.php had to change the following line. Couldn't get it to work as it should with <?= so made it use php echo calls.

document.write('<?php echo '<a href="' . $products_image_large . '" id="jqzoomMain"';?><?php if (JQLIGHTBOX_STATUS == 'true') echo ' class="jqlightbox"';?><?php echo '>' . zen_image($products_image_medium, addslashes($products_name), MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT) . '</a>';?>');

In the sql install text changed the '' to NULL.

INSERT INTO configuration_group VALUES (NULL, 'JQLightbox', 'Set JQLightbox Options', '1', '1');

Hope that helps. Good job overall. You can see my first example at.
http://www.pot-gardens.com/catalog/index.php?main_page=product_info&cPath=1_11&products_id=3

02 Mar 2009, 21:14

#3

yellow1912

Totally Zenned

Join Date:: Oct 2006
Posts:: 5,422
Plugin Contributions:: 0

Re: Jquery Lightbox [Support thread]

Thank you for your input, I will update those in my next version

Regards

Raine

04 Mar 2009, 03:09

#4

gsdcypher

Totally Zenned

Join Date:: Feb 2007
Posts:: 816
Plugin Contributions:: 0

Re: Jquery Lightbox [Support thread]

hi,

i have been trying to find something like this that will work with ajax image swapper. i don't like how my additional images are displayed low on the page where most visitors don't see them.

with ajax image swapper the additional images are displayed right under the main image (and swap out with the main image when clicked).

however... there are some bugs with the fual slimbox (the image viewer that comes with ajax image swapper).

can jquery lightbox work with ajax image swapper and override fual slibox???

thanks!

04 Mar 2009, 03:10

#5

yellow1912

Totally Zenned

Join Date:: Oct 2006
Posts:: 5,422
Plugin Contributions:: 0

Re: Jquery Lightbox [Support thread]

I dont know exactly how the swapper works, but if you use lightbox along with jqzoom, there is a built in swapper.

04 Mar 2009, 05:07

#6

gsdcypher

Totally Zenned

Join Date:: Feb 2007
Posts:: 816
Plugin Contributions:: 0

Re: Jquery Lightbox [Support thread]

well, one problem i have is the location of the additional images in my zen cart - which ajax image swapper solves by locating the additional images under the main image in a scrolling box. i don't think jqzoom addresses that... but that aside... is there a way to make jqzoom swap images on mouse click rather than mouse over?

thanks!

04 Mar 2009, 05:10

#7

yellow1912

Totally Zenned

Join Date:: Oct 2006
Posts:: 5,422
Plugin Contributions:: 0

Re: Jquery Lightbox [Support thread]

Yes, but you will have to make a minor change in the code to get that. It is not configurable as of now

07 Mar 2009, 03:27

#8

gsdcypher

Totally Zenned

Join Date:: Feb 2007
Posts:: 816
Plugin Contributions:: 0

Re: Jquery Lightbox [Support thread]

i installed the jqlightbox and it seems to be working fine, except it is duplicating the images.

when you open a larger image (and there are no additional images) it says 1 of 2 and when you click next it goes to image 2 (which is the sames as 1)...

any ideas?

thanks.

07 Mar 2009, 05:33

#9

yellow1912

Totally Zenned

Join Date:: Oct 2006
Posts:: 5,422
Plugin Contributions:: 0

Re: Jquery Lightbox [Support thread]

gsdcypher:
i installed the jqlightbox and it seems to be working fine, except it is duplicating the images.

when you open a larger image (and there are no additional images) it says 1 of 2 and when you click next it goes to image 2 (which is the sames as 1)...

any ideas?

thanks.

More than likely something is wrong with the additional image code, but I cant say until I actually see the site itself.

Regards

Raine

07 Mar 2009, 16:13

#10

gsdcypher

Totally Zenned

Join Date:: Feb 2007
Posts:: 816
Plugin Contributions:: 0

Re: Jquery Lightbox [Support thread]

you can see jquery lightbox in action here:
[U]http://tiny.cc/VMMxN[/U]

thanks.

07 Mar 2009, 16:38

#11

yellow1912

Totally Zenned

Join Date:: Oct 2006
Posts:: 5,422
Plugin Contributions:: 0

Re: Jquery Lightbox [Support thread]

gsdcypher:
you can see jquery lightbox in action here:
[U]http://tiny.cc/VMMxN[/U]

thanks.

Okie, here goes: you can view your page html source code: the first lightbox image is the main image

document.write('<a href="images/bitetug_suit_dfl5.jpg" id="jqzoomMain" class="jqlightbox"><img src="bmz_cache/a/aff35fee3d4330cbbd98c7330c7e7f44.image.220x96.jpg" alt="Two Bite Suit Tugs (4\" x 8\") 1 Handle" title=" Two Bite Suit Tugs (4\" x 8\") 1 Handle " width="220" height="96" /></a>');

The second one is here:

<div id="productReviewsDefaultProductImage" style="display:none;" class="centeredContent back"> 
<div id="productMainImageReview" style="display:none;" class="centeredContent back">
<script language="javascript" type="text/javascript"><!--
document.write('<a href="images/bitetug_suit_dfl5.jpg" id="jqzoomMain" class="jqlightbox"><img src="bmz_cache/a/aff35fee3d4330cbbd98c7330c7e7f44.image.220x96.jpg" alt="Two Bite Suit Tugs (4\" x 8\") 1 Handle [DFL5]" title=" Two Bite Suit Tugs (4\" x 8\") 1 Handle [DFL5] " width="220" height="96" /></a>');
//--></script>
<noscript>
<a href="http://www.allk-9.com/index.php?main_page=popup_image&pID=608" target="_blank"><img src="bmz_cache/a/aff35fee3d4330cbbd98c7330c7e7f44.image.220x96.jpg" alt="Two Bite Suit Tugs (4" x 8") 1 Handle [DFL5]" title=" Two Bite Suit Tugs (4" x 8") 1 Handle [DFL5] " width="220" height="96" /><br /><span class="imgLink">larger image</span></a></noscript>


</div></div>

I guess this is created by the products tab module.

I will look into this, but more than likely we will have to somehow turn off the display of an additional main image code here.

08 Mar 2009, 03:29

#12

gsdcypher

Totally Zenned

Join Date:: Feb 2007
Posts:: 816
Plugin Contributions:: 0

Re: Jquery Lightbox [Support thread]

yes i would like to remove the duplicate image display...

also, i tried adding

. '</div><br class="clearBoth" /><span class="imgLink">' . TEXT_CLICK_TO_ENLARGE . '</span></a>'; ?>');

to the end of

document.write('<a href="<?= $products_image_large;?>" id="jqzoomMain"<?php if (JQLIGHTBOX_STATUS == 'true') echo ' class="jqlightbox"';?>><?= zen_image($products_image_medium, addslashes($products_name), MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT);?></a>');

to get the text click for larger image to display under the main image. but no joy...

thanks.

14 Mar 2009, 17:22

#13

gsdcypher

Totally Zenned

Join Date:: Feb 2007
Posts:: 816
Plugin Contributions:: 0

Re: Jquery Lightbox [Support thread]

hey yellow1912,

do you know how to add click for larger image under the main image?

also how to make it so the images in the lightbox are not downloadable/saveable?

thanks.

14 Mar 2009, 20:48

#14

countrycharm

Totally Zenned

Join Date:: Jul 2007
Posts:: 2,179
Plugin Contributions:: 1

Re: Jquery Lightbox [Support thread]

Yellow1912 thank you for another great Module, or modules may I say.
gsdcypher is on to something. You know how people are in this todays world, you have to spell out every little detail or they want know were to click on the image. Thank you again my friend.

14 Mar 2009, 21:12

#15

yellow1912

Totally Zenned

Join Date:: Oct 2006
Posts:: 5,422
Plugin Contributions:: 0

Re: Jquery Lightbox [Support thread]

It is rather easy to do so, you can edit includes/templates/your_template/tpl_modules_main_product_image.php

Around line 15 you will find

[PHP]document.write('<a href="<?= $products_image_large;?>" id="jqzoomMain"<?php if (JQLIGHTBOX_STATUS == 'true') echo ' class="jqlightbox"';?>><?= zen_image($products_image_medium, addslashes($products_name), MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT);?></a>');[/PHP]

Replace by

[PHP]document.write('<a href="<?php echo $products_image_large;?>" id="jqzoomMain"<?php if (JQLIGHTBOX_STATUS == 'true') echo ' class="jqlightbox"';?>><?php echo zen_image($products_image_medium, addslashes($products_name), MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT);?><br /><span class="imgLink"><?php echo TEXT_CLICK_TO_ENLARGE;?></span></a>');[/PHP]

As for the request to prevent downloading image, it is technically impossible. So your best option is to watermark your images.

14 Mar 2009, 21:44

#16

gsdcypher

Totally Zenned

Join Date:: Feb 2007
Posts:: 816
Plugin Contributions:: 0

Re: Jquery Lightbox [Support thread]

hi yellow1912,

i changed the code, but the text click to enlarge still doesn't show...

did you get it to work countrycharm?

i have ih2 installed and it used to watermark my images until i installed jquery lightbox. is there a way to make them work together?

thanks.

14 Mar 2009, 21:52

#17

yellow1912

Totally Zenned

Join Date:: Oct 2006
Posts:: 5,422
Plugin Contributions:: 0

Re: Jquery Lightbox [Support thread]

Yes, you can make them work together, I believe. The problem with IH2 is that it has a bug which prevents zen_image function from accepting parameters. I believe I fixed that bug but I will recheck.

As for the text to click, make sure you did not change the definition of TEXT_CLICK_TO_ENLARGE in your language file to empty. A Link to your site will help.

14 Mar 2009, 22:19

#18

gsdcypher

Totally Zenned

Join Date:: Feb 2007
Posts:: 816
Plugin Contributions:: 0

Re: Jquery Lightbox [Support thread]

yes if you can recheck that would be great. it would be nice if they worked together.

here is a link: http://www.allk-9.com/

:cheers:

14 Mar 2009, 22:29

#19

yellow1912

Totally Zenned

Join Date:: Oct 2006
Posts:: 5,422
Plugin Contributions:: 0

Re: Jquery Lightbox [Support thread]

gsdcypher:
yes if you can recheck that would be great. it would be nice if they worked together.

here is a link: http://www.allk-9.com/

:cheers:

For the text click .... you probably have not replaced the file, or replaced the wrong one. In your case, the file must be in
includes/templates/allk9/templates

14 Mar 2009, 22:32

#20

countrycharm

Totally Zenned

Join Date:: Jul 2007
Posts:: 2,179
Plugin Contributions:: 1

Re: Jquery Lightbox [Support thread]

No I did not get it to work as of yet. It will show when you go to the page but it disappears soon after.