Thickbox and next previous link image

Quote

Post by mondzo » Fri Jul 24, 2009 7:03 pm

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?
mondzo
Newbie
Posts
13
Joined
Sat May 16, 2009 4:35 am
Top

Re: Thickbox and next previous link image

Quote

Post by readyman » Sat Jul 25, 2009 4:28 am

Please paste the code here or a link to your site... I can't comment on code I can't see.

http://www.alreadymade.com
Follow me on twitter.com/alreadymade

User avatar
readyman
Global Moderator
Posts
728
Joined
Wed May 20, 2009 5:16 am
Location - Sydney
Top

Re: Thickbox and next previous link image

Quote

Post by mondzo » Sat Jul 25, 2009 6:01 pm

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:

Code: Select all

rel="gallery-product"
after

Code: Select all

class="thickbox"
And open image with js thickbox this is not working. it is only loading loading and nothing happen.
mondzo
Newbie
Posts
13
Joined
Sat May 16, 2009 4:35 am
Top

Re: Thickbox and next previous link image

Quote

Post by dashik » Fri Jul 31, 2009 8:11 pm

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?
dashik
New member
Posts
32
Joined
Fri Jul 31, 2009 8:10 pm
Top

Re: Thickbox and next previous link image

Quote

Post by dashik » Fri Jul 31, 2009 8:26 pm

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.
dashik
New member
Posts
32
Joined
Fri Jul 31, 2009 8:10 pm
Top

Re: Thickbox and next previous link image

Quote

Post by cowpoke McStink » Tue Sep 29, 2009 4:04 am

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:

Code: Select all

E=$("a[@1N="+g+"]")
and remove the @ to get

Code: Select all

E=$("a[1N="+g+"]")
This way you can keep it compressed.
User avatar
Posts
14
Joined
Fri Aug 14, 2009 6:01 am
Location - The Vast Deserts of California
Top
Post Reply
Return to “General Support”
Who is online

Users browsing this forum: No registered users and 154 guests