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?

Newbie

Posts

Joined
Sat May 16, 2009 4:35 am

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
Global Moderator

Posts

Joined
Wed May 20, 2009 5:16 am
Location - Sydney

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.

Newbie

Posts

Joined
Sat May 16, 2009 4:35 am

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?

New member

Posts

Joined
Fri Jul 31, 2009 8:10 pm

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.

New member

Posts

Joined
Fri Jul 31, 2009 8:10 pm

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

Joined
Fri Aug 14, 2009 6:01 am
Location - The Vast Deserts of California
Who is online

Users browsing this forum: No registered users and 64 guests