Page 1 of 1
Thickbox and next previous link image
Posted: Fri Jul 24, 2009 7:03 pm
by mondzo
Hi,
I have a question of there is a possibility to add Next, previous link when I open the product images. I know that OC uses the jquery and thickbox, I added the rel attribute to each image (according to the examples on the thickbox product website) but it is not working. Am I doing something wrong?
Re: Thickbox and next previous link image
Posted: Sat Jul 25, 2009 4:28 am
by readyman
Please paste the code here or a link to your site... I can't comment on code I can't see.
Re: Thickbox and next previous link image
Posted: Sat Jul 25, 2009 6:01 pm
by mondzo
Code: Select all
<h2>Product Images</h2>
<div style="width: 100%; padding: 8px;">
<span style="display: inline-block; float: left; text-align: center; margin-right: 5px; margin-bottom: 5px;"><a href="http://trasy/image/cache/martinske_hole_01-800x600.jpg" title="Martinské hole" class="thickbox"><img src="http://trasy/image/cache/martinske_hole_01-130x130.jpg" title="Martinské hole" alt="Martinské hole" style="border: 1px solid #DDDDDD;" /></a></span>
<span style="display: inline-block; float: left; text-align: center; margin-right: 5px; margin-bottom: 5px;"><a href="http://trasy/image/cache/martinske_hole_02-800x600.jpg" title="Martinské hole" class="thickbox"><img src="http://trasy/image/cache/martinske_hole_02-130x130.jpg" title="Martinské hole" alt="Martinské hole" style="border: 1px solid #DDDDDD;" /></a></span>
<span style="display: inline-block; float: left; text-align: center; margin-right: 5px; margin-bottom: 5px;"><a href="http://trasy/image/cache/martinske_hole_03-800x600.jpg" title="Martinské hole" class="thickbox"><img src="http://trasy/image/cache/martinske_hole_03-130x130.jpg" title="Martinské hole" alt="Martinské hole" style="border: 1px solid #DDDDDD;" /></a></span>
<span style="display: inline-block; float: left; text-align: center; margin-right: 5px; margin-bottom: 5px;"><a href="http://trasy/image/cache/martinske_hole_04-800x600.jpg" title="Martinské hole" class="thickbox"><img src="http://trasy/image/cache/martinske_hole_04-130x130.jpg" title="Martinské hole" alt="Martinské hole" style="border: 1px solid #DDDDDD;" /></a></span>
<span style="display: inline-block; float: left; text-align: center; margin-right: 5px; margin-bottom: 5px;"><a href="http://trasy/image/cache/martinske_hole_05-800x600.jpg" title="Martinské hole" class="thickbox"><img src="http://trasy/image/cache/martinske_hole_05-130x130.jpg" title="Martinské hole" alt="Martinské hole" style="border: 1px solid #DDDDDD;" /></a></span>
<span style="display: inline-block; float: left; text-align: center; margin-right: 5px; margin-bottom: 5px;"><a href="http://trasy/image/cache/martinske_hole_06-800x600.jpg" title="Martinské hole" class="thickbox"><img src="http://trasy/image/cache/martinske_hole_06-130x130.jpg" title="Martinské hole" alt="Martinské hole" style="border: 1px solid #DDDDDD;" /></a></span>
<span style="display: inline-block; float: left; text-align: center; margin-right: 5px; margin-bottom: 5px;"><a href="http://trasy/image/cache/martinske_hole_07-800x600.jpg" title="Martinské hole" class="thickbox"><img src="http://trasy/image/cache/martinske_hole_07-130x130.jpg" title="Martinské hole" alt="Martinské hole" style="border: 1px solid #DDDDDD;" /></a></span>
<span style="display: inline-block; float: left; text-align: center; margin-right: 5px; margin-bottom: 5px;"><a href="http://trasy/image/cache/martinske_hole_08-800x600.jpg" title="Martinské hole" class="thickbox"><img src="http://trasy/image/cache/martinske_hole_08-130x130.jpg" title="Martinské hole" alt="Martinské hole" style="border: 1px solid #DDDDDD;" /></a></span>
<span style="display: inline-block; float: left; text-align: center; margin-right: 5px; margin-bottom: 5px;"><a href="http://trasy/image/cache/martinske_hole_09-800x600.jpg" title="Martinské hole" class="thickbox"><img src="http://trasy/image/cache/martinske_hole_09-130x130.jpg" title="Martinské hole" alt="Martinské hole" style="border: 1px solid #DDDDDD;" /></a></span>
<span style="display: inline-block; float: left; text-align: center; margin-right: 5px; margin-bottom: 5px;"><a href="http://trasy/image/cache/martinske_hole_10-800x600.jpg" title="Martinské hole" class="thickbox"><img src="http://trasy/image/cache/martinske_hole_10-130x130.jpg" title="Martinské hole" alt="Martinské hole" style="border: 1px solid #DDDDDD;" /></a></span>
<span style="display: inline-block; float: left; text-align: center; margin-right: 5px; margin-bottom: 5px;"><a href="http://trasy/image/cache/martinske_hole_11-800x600.jpg" title="Martinské hole" class="thickbox"><img src="http://trasy/image/cache/martinske_hole_11-130x130.jpg" title="Martinské hole" alt="Martinské hole" style="border: 1px solid #DDDDDD;" /></a></span>
<span style="display: inline-block; float: left; text-align: center; margin-right: 5px; margin-bottom: 5px;"><a href="http://trasy/image/cache/martinske_hole_12-800x600.jpg" title="Martinské hole" class="thickbox"><img src="http://trasy/image/cache/martinske_hole_12-130x130.jpg" title="Martinské hole" alt="Martinské hole" style="border: 1px solid #DDDDDD;" /></a></span>
<span style="display: inline-block; float: left; text-align: center; margin-right: 5px; margin-bottom: 5px;"><a href="http://trasy/image/cache/martinske_hole_13-800x600.jpg" title="Martinské hole" class="thickbox"><img src="http://trasy/image/cache/martinske_hole_13-130x130.jpg" title="Martinské hole" alt="Martinské hole" style="border: 1px solid #DDDDDD;" /></a></span>
</div>
<div class="clear"></div>
When I add for example:
after
And open image with js thickbox this is not working. it is only loading loading and nothing happen.
Re: Thickbox and next previous link image
Posted: Fri Jul 31, 2009 8:11 pm
by dashik
I'm trying to achieve the same exact thing and I'm running into the same problem. I've added the rel attribute to lightbox before outside of OC with no issues.
Anyone know what the conflict might be?
Re: Thickbox and next previous link image
Posted: Fri Jul 31, 2009 8:26 pm
by dashik
I figured it out!
This blog post outlines the exact line of code in the thickbox .js that you need to alter:
http://www.stuffbysarah.net/2009/02/16/ ... query-131/
Now, if like me you have the thickbox-compressed.js file in catalog/view/javascript/jquery/thickbox/ -- you can pick up the un-compressed version of thickbox here:
http://jquery.com/demo/thickbox/
Underneath the big gray features box, click on the "code" tab.
Replace all of the code in thickbox-compressed.js with this code. Now replace the line of code outlined in the blog post above. Save, upload the file and that's it! Your rel attributes should work perfectly now.
Re: Thickbox and next previous link image
Posted: Tue Sep 29, 2009 4:04 am
by cowpoke McStink
Great Job Dashik.. from the comments section of the same article it says...
If you're using the minified version, as I am, search for:
and remove the @ to get
This way you can keep it compressed.