nsForum logo

Welcome Guest ( Log In )

> How To: Upgrade Your Product Image Gallery, Using the prettyPhoto lightbox script
Rating 4 V
AndyT - MC
post Mar 18 2009, 05:04 PM
Post #1





Group: Verified NS Member
Posts: 979
Joined: 22-October 07
From: St. Louis, MO
Member No.: 170
This is a step-by-step tutorial on how to integrate the prettyPhoto "lightbox" image gallery on the product details page of your E-Commerce Pro storefront.

Note: This script uses the jQuery JavaScript library. If you already use jQuery on your storefront, or if you use a different javascript library like MooTools or Prototype/Scrpt.aculo.us you may have to adjust the script to run in no-conflict mode.

1. Download the attached file, "prettyPhoto.zip". Use the file manager to upload this file to your website root.

2. Once uploaded, right-click the zip file and choose "Extract to folder...", change the path to "Website Root\", and continue.

3. Go to Design >> Product Layout and make a clone of your active product layout.

4. Edit the cloned layout and replace the images section of the code with the contents of the attached text

The default image nsScript code looks like this (abbreviated):
CODE
<ns:choose>
  <ns:when condition="Product.ImageCount >= 1 && Product.DisplayImageUrl != ''">          
    ...
  </ns:when>
  <ns:otherwise>
     ...
  </ns:otherwise>
</ns:choose>

Replace with this:
CODE
<ns:choose>
  <ns:when condition="Product.ImageCount > 0">
    <link rel="stylesheet" type="text/css" href="/prettyPhoto/css/prettyPhoto.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="/prettyPhoto/js/jquery.prettyPhoto.js"></script>

    <!--[if IE 6]>
      <script type="text/javascript" src="/prettyPhoto/js/DD_belatedPNG_0.0.7a-min.js"></script>
      <script type="text/javascript">
        DD_belatedPNG.fix('.pp_left,.pp_right,a.pp_close,a.pp_arrow_next,a.pp_arrow_previous,.pp_conten
t,.pp_middle');    
      </script>
    <![endif]-->

    <script type="text/javascript">
      $(document).ready(function() {
        var data = <%Product.ImageObject%>;
        var rel = (data.gallery.length > 1) ? 'prettyPhoto[products]' : 'prettyPhoto';
        var displayHolder = $("#gallery-main");
        var galleryHolder = $("#gallery-other");

        writeImage(displayHolder, data.active, data.active.display, rel);

        for (i = 1; i < data.gallery.length; i++) {
          writeImage(galleryHolder, data.gallery[i], data.gallery[i].thumbnail, rel, 50);
        }

        $("a[rel^='prettyPhoto']").prettyPhoto();
      });

      function writeImage(galleryHolder, image, displayImage, rel, resize) {
        var html = '';
        style = (resize) ? "width:" + resize + "px" : "";

        html += '<a href="' + image.detailed + '" rel="' + rel + '" title="' + image.title + '" style="margin:2px">';
        html += '<img src="' + displayImage + '" alt="' + image.alt + '" title="Click to enlarge" style="' + style + '" />'
        html += '</a>';

        galleryHolder.append(html);
      }
    </script>

    <div id="gallery-main" style="margin-bottom:5px"></div>
    <div id="gallery-other" style="text-align:center"></div>
  </ns:when>
  <ns:otherwise>
    <img src="<%Product.UnavailableImageUrl%>" alt="unavailable" border="0" />
  </ns:otherwise>
</ns:choose>

5. To test, go to Inventory >> Products, edit a product with gallery images, choose the Advanced tab. Select the Product Layout that was just created and save.

6. Preview the product details page of the product from step 5 on the storefront. After ensuring the gallery is working properly, activate the new layout for all products on your store.
Attached File(s)
Attached File  prettyPhoto.zip ( 63.38K ) Number of downloads: 222
 
Go to the top of the page
 
+Quote Post
5 Pages V  < 1 2 3 4 > »   
 Start new topic
Replies (25 - 49)
martiniguy
post Apr 18 2009, 06:13 PM
Post #26





Group: Verified NS Member
Posts: 589
Joined: 10-March 08
From: South Eastern Martini-land
Member No.: 775
QUOTE (ashlar @ Apr 18 2009, 05:35 PM) *
I was just thinking the same thing. We actually added "click images to enlarge" within the products description area as a temporary fix.

Hey Ashlar...I know that there is a way to do this with an NS script conditional. I am hoping someone chimes in with a quick fix.
Go to the top of the page
 
+Quote Post
agkits
post Apr 18 2009, 06:22 PM
Post #27





Group: Verified NS Member
Posts: 666
Joined: 26-October 07
From: Syracuse NY
Member No.: 193
under....
CODE
<div id="gallery-main" style="margin-bottom:5px"></div>
<div id="gallery-other" style="text-align:center"></div>


use...
CODE
<div style="text-align:center">click smaller images to enlarge</div>



The complete code would be ...
CODE
<ns:choose>
  <ns:when condition="Product.ImageCount > 0">
    <link rel="stylesheet" type="text/css" href="/prettyPhoto/css/prettyPhoto.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="/prettyPhoto/js/jquery.prettyPhoto.js"></script>

    <!--[if IE 6]>
      <script type="text/javascript" src="/prettyPhoto/js/DD_belatedPNG_0.0.7a-min.js"></script>
      <script type="text/javascript">
        DD_belatedPNG.fix('.pp_left,.pp_right,a.pp_close,a.pp_arrow_next,a.pp_arrow_previous,.pp_conten
t,.pp_middle');    
      </script>
    <![endif]-->

    <script type="text/javascript">
      $(document).ready(function() {
        var data = <%Product.ImageObject%>;
        var rel = (data.gallery.length > 1) ? 'prettyPhoto[products]' : 'prettyPhoto';
        var displayHolder = $("#gallery-main");
        var galleryHolder = $("#gallery-other");

        writeImage(displayHolder, data.active, data.active.display, rel);

        for (i = 1; i < data.gallery.length; i++) {
          writeImage(galleryHolder, data.gallery[i], data.gallery[i].thumbnail, rel, 50);
        }

        $("a[rel^='prettyPhoto']").prettyPhoto();
      });

      function writeImage(galleryHolder, image, displayImage, rel, resize) {
        var html = '';
        style = (resize) ? "width:" + resize + "px" : "";

        html += '<a href="' + image.detailed + '" rel="' + rel + '" title="' + image.title + '" style="margin:2px">';
        html += '<img src="' + displayImage + '" alt="' + image.alt + '" title="Click to enlarge" style="' + style + '" />'
        html += '</a>';

        galleryHolder.append(html);
      }
    </script>

    <div id="gallery-main" style="margin-bottom:5px"></div>
    <div id="gallery-other" style="text-align:center"></div>
    <div style="text-align:center">click smaller images to enlarge</div>
  </ns:when>
  <ns:otherwise>
    <img src="<%Product.UnavailableImageUrl%>" alt="unavailable" border="0" />
  </ns:otherwise>
</ns:choose>

(IMG:http://forums.networksolutions.com/style_emoticons/default/thumbsup.gif)
Go to the top of the page
 
+Quote Post
ashlar
post Apr 18 2009, 06:52 PM
Post #28





Group: Verified NS Member
Posts: 20
Joined: 9-September 08
Member No.: 2,350
Awesome! I thought I saw that somewhere =)

Thanks!

Oh boy...im seeing huge latency issues on my storefront and backend...anyone else?
Go to the top of the page
 
+Quote Post
ddavisNS
post Apr 18 2009, 07:45 PM
Post #29


QA


Group: Administrators
Posts: 1,751
Joined: 10-August 07
Member No.: 6
QUOTE (ashlar @ Apr 18 2009, 07:02 PM) *
Oh boy...im seeing huge latency issues on my storefront and backend...anyone else?



Please keep this thread on topic. If you would like to report latency please do it here: http://forums.networksolutions.com/e-comme...-mcp-t4042.html
Go to the top of the page
 
+Quote Post
martiniguy
post Apr 19 2009, 07:23 AM
Post #30





Group: Verified NS Member
Posts: 589
Joined: 10-March 08
From: South Eastern Martini-land
Member No.: 775
Justyn - you rock. Stop by for a martini please!
(IMG:http://forums.networksolutions.com/style_emoticons/default/martiniemoticon.gif)

Justyn, is there any way to get the text to show up only if there is more than 1 image?
Reason for edit: trimmed quoted code for space
Go to the top of the page
 
+Quote Post
AndyT - MC
post Apr 20 2009, 08:41 AM
Post #31





Group: Verified NS Member
Posts: 979
Joined: 22-October 07
From: St. Louis, MO
Member No.: 170
QUOTE (martiniguy @ Apr 19 2009, 07:33 AM) *
...is there any way to get the text to show up only if there is more than 1 image?

Sure, using his example, change:
CODE
<div style="text-align:center">click smaller images to enlarge</div>

To:
CODE
<ns:if condition="Product.ImageCount > 1">
  <div style="text-align:center">click smaller images to enlarge</div>
</ns:if>
Go to the top of the page
 
+Quote Post
martiniguy
post Apr 20 2009, 11:56 AM
Post #32





Group: Verified NS Member
Posts: 589
Joined: 10-March 08
From: South Eastern Martini-land
Member No.: 775
QUOTE (AndyT - MC @ Apr 20 2009, 07:51 AM) *
Sure, using his example, change:
CODE
<div style="text-align:center">click smaller images to enlarge</div>

To:
CODE
<ns:if condition="Product.ImageCount > 1">
  <div style="text-align:center">click smaller images to enlarge</div>
</ns:if>

Awesome...thanks!
Go to the top of the page
 
+Quote Post
phatman96
post Apr 27 2009, 02:38 PM
Post #33





Group: Verified NS Member
Posts: 31
Joined: 3-December 08
Member No.: 3,235
Awesome guys much thanks!!

Alex
http://www.LilianaInternational.com
Go to the top of the page
 
+Quote Post
Thor
post May 1 2009, 12:32 AM
Post #34





Group: Verified NS Member
Posts: 54
Joined: 18-August 08
Member No.: 2,013
Amazing. The only problem I have is that we don't make thumbs for images other then the main, so the script is displaying all additional images under the main image. While that is awesome it's causing a lot of slow load times because our images are 700x700 and it needs to load and shrink them down before showing up.

Anyway to just have the main image and remove the smaller images?

Would just removing

CODE
<div id="gallery-other" style="text-align:center"></div>


Work or is the underlying code still processing those images? Thanks.
Go to the top of the page
 
+Quote Post
AndyT - MC
post May 1 2009, 12:37 AM
Post #35





Group: Verified NS Member
Posts: 979
Joined: 22-October 07
From: St. Louis, MO
Member No.: 170
Just remove the part where it populates the thumbnails:

CODE
for (i = 1; i < data.gallery.length; i++) {
  writeImage(galleryHolder, data.gallery[i], data.gallery[i].thumbnail, rel, 50);
}
Go to the top of the page
 
+Quote Post
Thor
post May 1 2009, 01:17 PM
Post #36





Group: Verified NS Member
Posts: 54
Joined: 18-August 08
Member No.: 2,013
QUOTE (AndyT - MC @ May 1 2009, 01:47 AM) *
Just remove the part where it populates the thumbnails:

CODE
for (i = 1; i < data.gallery.length; i++) {
  writeImage(galleryHolder, data.gallery[i], data.gallery[i].thumbnail, rel, 50);
}


I tried that. It removes the little thumbs. But when you click on the main image it doesn't let you click through to the other images, just the one main image.

Any suggestions? Thanks.
Go to the top of the page
 
+Quote Post
AndyT - MC
post May 1 2009, 01:36 PM
Post #37





Group: Verified NS Member
Posts: 979
Joined: 22-October 07
From: St. Louis, MO
Member No.: 170
I misunderstood, I thought you only had 1 image. Replace the script section with this:

CODE
<script type="text/javascript">
  $(document).ready(function() {

    var data = <%Product.ImageObject%>;
    var rel = (data.gallery.length > 1) ? 'prettyPhoto[products]' : 'prettyPhoto';
    var displayHolder = $("#gallery-main");
    var galleryHolder = $("#gallery-other");

    writeImage(displayHolder, data.active, data.active.display, rel);

    for (i = 0; i < data.gallery.length; i++) {
      writeImage(galleryHolder, data.gallery[i], data.gallery[i].thumbnail, rel, 50, true);
    }

    $("a[rel^='prettyPhoto']").prettyPhoto();
  });

  function writeImage(galleryHolder, image, displayImage, rel, resize, hide) {
    var html = '';
    style = (resize) ? "width:" + resize + "px" : "";
      
    html += '<a href="' + image.detailed + '" rel="' + rel + '" title="' + image.title + '" style="margin:2px">';
    
    if (! hide) {
      html += '<img src="' + displayImage + '" alt="' + image.alt + '" title="Click to enlarge" style="' + style + '" />'
    }

    html += '</a>';

    galleryHolder.append(html);
  }
</script>
Go to the top of the page
 
+Quote Post
Thor
post May 1 2009, 01:39 PM
Post #38





Group: Verified NS Member
Posts: 54
Joined: 18-August 08
Member No.: 2,013
Perfect!

I just gotta say. The admins that troll the forums rule. You guys are super quick and resolve almost every issue within a few minutes. Hats off to you folks.
Go to the top of the page
 
+Quote Post
Thor
post May 1 2009, 09:42 PM
Post #39





Group: Verified NS Member
Posts: 54
Joined: 18-August 08
Member No.: 2,013
I also wanted to add "View More Images (<%Product.ImageCount%>)" Under the main image. But not sure how to get that text to link to the same gallery as the main image.

Also with that newer script it reports the number of images incorrectly. When you click the main image it starts you on 2 of X instead of 1 of X

Any help on that would be great. Thanks.

I adjusted the script, although I have really no java knowledge hehe.

From
CODE
        for (i = 1; i < data.gallery.length; i++) {
          writeImage(galleryHolder, data.gallery[i], data.gallery[i].gallery, rel, 50);
        }


To
CODE
        for (i = 1; i < data.gallery.length; i++) {
          writeImage(galleryHolder, data.gallery[i], data.gallery[i], rel, 50);
        }


And then hid the thumb div of links. Just wondering if thats somehow processing the gallery twice or could cause any other slow down?
Go to the top of the page
 
+Quote Post
den2009
post May 5 2009, 12:56 AM
Post #40





Group: Verified NS Member
Posts: 10
Joined: 2-April 09
Member No.: 4,107
QUOTE (agkits @ Apr 18 2009, 06:32 PM) *
under....
CODE
<div id="gallery-main" style="margin-bottom:5px"></div>
<div id="gallery-other" style="text-align:center"></div>


use...
CODE
<div style="text-align:center">click smaller images to enlarge</div>



The complete code would be ...
CODE
<ns:choose>
  <ns:when condition="Product.ImageCount > 0">
    <link rel="stylesheet" type="text/css" href="/prettyPhoto/css/prettyPhoto.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="/prettyPhoto/js/jquery.prettyPhoto.js"></script>

    <!--[if IE 6]>
      <script type="text/javascript" src="/prettyPhoto/js/DD_belatedPNG_0.0.7a-min.js"></script>
      <script type="text/javascript">
        DD_belatedPNG.fix('.pp_left,.pp_right,a.pp_close,a.pp_arrow_next,a.pp_arrow_previous,.pp_conten
t,.pp_middle');    
      </script>
    <![endif]-->

    <script type="text/javascript">
      $(document).ready(function() {
        var data = <%Product.ImageObject%>;
        var rel = (data.gallery.length > 1) ? 'prettyPhoto[products]' : 'prettyPhoto';
        var displayHolder = $("#gallery-main");
        var galleryHolder = $("#gallery-other");

        writeImage(displayHolder, data.active, data.active.display, rel);

        for (i = 1; i < data.gallery.length; i++) {
          writeImage(galleryHolder, data.gallery[i], data.gallery[i].thumbnail, rel, 50);
        }

        $("a[rel^='prettyPhoto']").prettyPhoto();
      });

      function writeImage(galleryHolder, image, displayImage, rel, resize) {
        var html = '';
        style = (resize) ? "width:" + resize + "px" : "";

        html += '<a href="' + image.detailed + '" rel="' + rel + '" title="' + image.title + '" style="margin:2px">';
        html += '<img src="' + displayImage + '" alt="' + image.alt + '" title="Click to enlarge" style="' + style + '" />'
        html += '</a>';

        galleryHolder.append(html);
      }
    </script>

    <div id="gallery-main" style="margin-bottom:5px"></div>
    <div id="gallery-other" style="text-align:center"></div>
    <div style="text-align:center">click smaller images to enlarge</div>
  </ns:when>
  <ns:otherwise>
    <img src="<%Product.UnavailableImageUrl%>" alt="unavailable" border="0" />
  </ns:otherwise>
</ns:choose>

(IMG:http://forums.networksolutions.com/style_emoticons/default/thumbsup.gif)


Hi:

I just tried adding in the code 3 times into my active product detail design html but everytime it is saved, I can't see it on the site (and viewing the source shows it is not there..even though it is right there just like the above when I open the code under product layout design (the active one). example page: http://chaiseandlounge.com/brightonfoldingsidechair.aspx But on another note -- which makes this somewhat moot I hope, is that I would love to have my image gallery look and function like this one: http://www.thosbaker.com/classic-folding-a...p;category=7036 (love the rollover to swap onto main image, and also the placement (vertical middle table) and clarity of the tiny images). If anyone could show me how to do this, it would be fantastic. If not, how do we make our resized tiny images a bigger size at least -- they are so tiny and unclear at 50px that it doesn't look good on my site. Thanks!!!
Go to the top of the page
 
+Quote Post
martiniguy
post May 5 2009, 06:11 AM
Post #41





Group: Verified NS Member
Posts: 589
Joined: 10-March 08
From: South Eastern Martini-land
Member No.: 775
QUOTE (den2009 @ May 5 2009, 01:06 AM) *
Hi:

I just tried adding in the code 3 times into my active product detail design html but everytime it is saved, I can't see it on the site (and viewing the source shows it is not there..even though it is right there just like the above when I open the code under product layout design (the active one). example page: http://chaiseandlounge.com/brightonfoldingsidechair.aspx But on another note -- which makes this somewhat moot I hope, is that I would love to have my image gallery look and function like this one: http://www.thosbaker.com/classic-folding-a...p;category=7036 (love the rollover to swap onto main image, and also the placement (vertical middle table) and clarity of the tiny images). If anyone could show me how to do this, it would be fantastic. If not, how do we make our resized tiny images a bigger size at least -- they are so tiny and unclear at 50px that it doesn't look good on my site. Thanks!!!

Did you first upload and unzip the configuration files to your root (see beginning of thread)?

Hope that helps.
Go to the top of the page
 
+Quote Post
den2009
post May 6 2009, 02:12 AM
Post #42





Group: Verified NS Member
Posts: 10
Joined: 2-April 09
Member No.: 4,107
QUOTE (martiniguy @ May 5 2009, 06:21 AM) *
Did you first upload and unzip the configuration files to your root (see beginning of thread)?

Hope that helps.


thanks for the advice -- but yes, I did. I have had the gallery for a while. but thanks.
Go to the top of the page
 
+Quote Post
martiniguy
post May 6 2009, 08:46 PM
Post #43





Group: Verified NS Member
Posts: 589
Joined: 10-March 08
From: South Eastern Martini-land
Member No.: 775
QUOTE (den2009 @ May 6 2009, 02:22 AM) *
thanks for the advice -- but yes, I did. I have had the gallery for a while. but thanks.

Good to go.
Go to the top of the page
 
+Quote Post
CK118
post May 7 2009, 08:38 AM
Post #44





Group: Verified NS Member
Posts: 19
Joined: 25-April 09
Member No.: 4,256
QUOTE (agkits @ Mar 19 2009, 10:36 AM) *
Andy,

I am having an issue with my flash banner in my column and the zoom. I have already added the wmode=transparent parameter. Unfortunately that didn't do the trick. I assume z-index is my next option. Would I add the z-index in the prettyPhoto.css?



I'm also having this same issue, where my "lightboxed" photo seems to hide behind the flash element at the top. Where am I supposed to add this z-index in the css?
Go to the top of the page
 
+Quote Post
agkits
post May 7 2009, 09:11 AM
Post #45





Group: Verified NS Member
Posts: 666
Joined: 26-October 07
From: Syracuse NY
Member No.: 193
You will have to change the z-index of your flash element. However, "Z-index only works on elements that have been positioned (eg position:absolute;)" You'll have to give it a lower z-index value.. I think they have the z-index of the prettyphoto overlay set to something high like 9000 or something.
Go to the top of the page
 
+Quote Post
CK118
post May 7 2009, 09:34 AM
Post #46





Group: Verified NS Member
Posts: 19
Joined: 25-April 09
Member No.: 4,256
so it HAS to be absolute? because i just tried it with relative, and didn't get anywhere. I even put the z-index as one
Go to the top of the page
 
+Quote Post
CK118
post May 7 2009, 09:40 AM
Post #47





Group: Verified NS Member
Posts: 19
Joined: 25-April 09
Member No.: 4,256
and when i make the positition absolute, everything is messed up. I have noticed this only being a problem in IE as well.
Go to the top of the page
 
+Quote Post
agkits
post May 7 2009, 12:10 PM
Post #48





Group: Verified NS Member
Posts: 666
Joined: 26-October 07
From: Syracuse NY
Member No.: 193
Technically you can use z-index for any position. (relative, fixed, absolute) Also try to set the wmode of your flash content to opaque or transparent.

CODE
....src="../yourflashcontent.swf" wmode="opaque" />
Go to the top of the page
 
+Quote Post
americangamingsu...
post May 8 2009, 06:23 PM
Post #49





Group: Verified NS Member
Posts: 128
Joined: 2-June 08
Member No.: 1,218
I add the code and followed the instructions and it doesn't work
http://02da97b.netsolstores.com/taskseating.aspx
Go to the top of the page
 
+Quote Post
marciafcfc
post May 14 2009, 10:13 AM
Post #50





Group: Verified NS Member
Posts: 87
Joined: 18-September 08
Member No.: 2,448
I've added everything, checked for the file placement in website root and it still doesn't work. I get the thumbnails under the main pix but when clicked, it just opens the pic in a new window but in the same tab. It also takes forever to load.

Marcia
Go to the top of the page
 
+Quote Post
 

5 Pages V  < 1 2 3 4 > » 
Reply to this topicStart new topic
Tags

1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

RSS Lo-Fi Version    Network Solutions © 2009 Time is now: 21st November 2009 - 08:41 PM
Powered By IP.Board © 2009  IPS, Inc.
Domain Names | Web Hosting | Web Design | Shopping Cart Software | Online Marketing | SSL Certificates