Jquery Lightbox [Support thread]

countrycharm:

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.
I have just tried the code I posted here:
http://demo.rubikintegration.com/jqzoom/index.php?main_page=product_info&cPath=21&products_id=47

If I switch off jqzoom it will show but it is not straight.

countrycharm:

If I switch off jqzoom it will show but it is not straight.Huhm, so you are saying on your site, if you switch of jqzoom the click .... text will appear, otherwise it wont? Huhm, weird, since on the demo site I have both on.
Let me install IH2 on the demo site later, and see if it does affect anything

got it. but it messes with the drop shadow effect on the main image. it makes the shadow drop below the text... to bad.

thanks.

gsdcypher:

got it. but it messes with the drop shadow effect on the main image. it makes the shadow drop below the text... to bad.

thanks.
Well, you can just add another <br/> there, or you can use css to add padding above the text. It is purely css/html.

I already had IH2 installed before I installed both these modules today. I also had hoverbox 3 installed which use the additional_images. I deleted everything that was using hoverbox and uploaded yours modules, so it should work. I don't know. Thank yellow for your help as always my friend.

yo! tried the <br> thing... no luck. :no:

I dont know how and where you put it, but you should also notice that the text is put inside a span with the class imgLink, you can use css to pad this one easily enough, for example

#productImageWrapper .imgLink{
padding-top:15px
}

hmmm... :frusty:

You can see here: **http://tinyurl.com/b48rh7

**
thanks.

gsdcypher:

hmmm... :frusty:

You can see here: **http://tinyurl.com/b48rh7

**
thanks.
In your very specific case, what you have to do is, you have to add the background image around the image, not around the div that wraps around both the img and the text. I will give an example, but you may have to tweak it to work in your specific case

document.write('<div id="mainImage"><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);?></a></div><div class="imgLink"><a href="<?php echo $products_image_large;?>"<?php if (JQLIGHTBOX_STATUS == 'true') echo ' class="jqlightbox"';?>><?php echo TEXT_CLICK_TO_ENLARGE;?></a></div>');

You will notice that I separated the image into its own div, now you will have to put the shadow background to this new div instead of the productMainImage. Hope Im making sense here.

Anyway let me know what you find out about this. Like I said You can see with jqzoom off and then it is out of line with the drop shadow. I have tried doing what you suggested to gsdcypher which didn't help get it centered below the image. Thank you again. You should have my ftp and admin information since I sent it back to you for the xcart install.

hey yellow1912,

yeah.... i follow you. this is what i did. don't know if it is the right way to do it, but it seems to work...

?>
<?php require(DIR_WS_MODULES . zen_get_module_directory(FILENAME_MAIN_PRODUCT_IMAGE)); ?> 
<div id="productMainImage" class="centeredContent back">
<script language="javascript" type="text/javascript"><!--
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>');
//--></script>
<noscript>
<?php
  echo '<a href="' . zen_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $_GET['products_id']) . '" target="_blank">' . zen_image($products_image_medium, $products_name, MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT) . '<br /><span class="imgLink">' . TEXT_CLICK_TO_ENLARGE . '</span></a>';
?>
</noscript>
</div>
<div class="imgLink"><a href="<?php echo $products_image_large;?>"<?php if (JQLIGHTBOX_STATUS == 'true') echo ' class="jqlightbox"';?>><?php echo TEXT_CLICK_TO_ENLARGE;?></a></div>

You can see here: **http://tinyurl.com/b48rh7

thanks!
:bigups:
**

That will work too, but if you turn off javascript, you will see you have 2 "larger image" links. You can remove the one from the noscript section.

done. better?

ya know if i disable javascript i lose my main product image...

is there a way around that?

hey yellow1912, while were talking css... i have the tell a friend and the write a review buttons stacked on top of each other. i would like to "compress the page." i've tried a couple of things, but haven't been able to get those to buttons aligned properly side by side. any ideas?

thanks.

Yes, the part between the no scrip tag is responsible for displaying the image and the text when no js is available. What you should have done, is to remove only the code responsible for displaying the text, not everything. for your other question, try #productTellFriendLink, #productReviewLink{float:left} Or you can float 1 left, and the other to the right.

ok fixed the script off image thingy. :blush:

but the buttons just won't line up correctly. maybe tomorrow...

thanks for all of the help!
:cheers:

side note... i had fixed it where the lightbox did not show duplicate images, but moving the code in red out of the div caused the double main image to come back... any other way to do that???

?>

<?php require(DIR_WS_MODULES . zen_get_module_directory(FILENAME_MAIN_PRODUCT_IMAGE)); ?> <div id="productMainImage" class="centeredContent back"> <script language="javascript" type="text/javascript"><!-- 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>'); //--></script> <noscript> <?php echo '<a href="' . zen_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $_GET['products_id']) . '" target="_blank">' . zen_image($products_image_medium, $products_name, MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT); ?> </noscript> </div> <div class="imgLink"><a href="<?php echo $products_image_large;?>"<?php if (JQLIGHTBOX_STATUS == 'true') echo ' class="jqlightbox"';?>><?php echo TEXT_CLICK_TO_ENLARGE;?></a></div>

Yellow I have the text looking the way I want it, but still when I leave jqzoom on the text goes up around the right top and bottom. This stumps me. It does not happen when it is off and I just use the jqlightbox. Now if I switch jqlightbox off and just use the jqzoom I still get the same thing with the text. Don't know. For right now I will just use the jqlightbox until we or I can find out why. Thanks again.

I get what you mean by the double main image now, so let me explain why it happens first:
The script look for any image wrapped by a link which has a class "jqlightbox"

So if you separate the "larger image" text and the main image, you will have 2 jqlightbox links instead of 1. What you can do in this case is:
remove the link wrapping around the main image, leaving only the link around the text