|
  |
 How To: Upgrade Your Product Image Gallery, Using the prettyPhoto lightbox script |
|
|
|
|
 Aug 19 2009, 06:48 PM
|
Group: Verified NS Member
Posts: 2
Joined: 26-March 09
Member No.: 4,069
|
very useful, thanks so much
Anyone know how to put frame on little images?
Thanks
|
|
|
|
|
|
|
|
Sep 30 2009, 12:22 PM
|
Group: Verified NS Member
Posts: 225
Joined: 14-August 08
Member No.: 1,942
|
Nice! been thinking about doing this for a while but have been way too busy and to fully implement is going to be very time intensive (need to create larger images than what we already have). but needs to be done. I loaded the library, set up a cloned layout I am experimenting with, and all is going well. I did notice the following in the pasted code CODE <!--[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]--> I left it as is and on one of my old computers (ie6 1024x768 screen) the page loaded, but with errors on page - but still worked. works great in current firefox and ie 7 & 8. Should I do anything about the ie6? Thoughts?
|
|
|
|
|
|
|
|
Oct 1 2009, 02:27 PM
|
Group: Verified NS Member
Posts: 1
Joined: 2-July 09
Member No.: 4,702
|
Hello Andy, I tried the below and when i click on the image or thumbnail, the large image pops up instantly with no overlay or image animating into place. Any suggestions, I added all the folders into the root and also into my custom root folder, thanks, Mike
|
|
|
|
|
|
|
|
Nov 2 2009, 11:04 PM
|
Group: Verified NS Member
Posts: 4
Joined: 2-November 09
Member No.: 6,070
|
what did you do wrong? I am having the same problem QUOTE (mdsource @ Mar 20 2009, 02:34 PM)  I have been using this script for a few days now and it seems to work fine in Firefox, IE7 and Chrome. However...The lightbox that holds the images doesn't show any image or text to let people know how to click to get to the next image, previous image or close the image box.
As far as I can tell there are areas in the box that contain these controls but either they are transparent or there is no image associated with the controls.
I would like to have some user friendly controls in the prettyphoto lightbox to enable the user to enlarge the image, click to the previous or next images, and then close the image.
Any help would be appreciated, or if you could lead me in the best direction.
Thanks
3/29 update: I figured out what I did wrong and everything works perfectly now!
|
|
|
|
|
|
|
|
Nov 3 2009, 07:41 AM
|
Group: Verified NS Member
Posts: 294
Joined: 1-October 07
From: New Jersey
Member No.: 102
|
You have to check all of your code to make sure it matches what is supposed to be there. In my case I had the link with the arrows, enlargement and close images directed to the wrong folder in my root folder. When I extracted the PrettyPhoto scripts they didn't go directly into my root folder but another folder within the prettyphoto folder. I just made sure the link pointed correctly and it worked fine.
You should look at the original script provided by Andy of NS and compare it to the script on your site. It should be the same. There are different variations that give different results, rounded corners, square corners etc. You can also check some of the sites posted here for the PrettyPhoto Image Gallery and see how they did it by looking at the code on their sites.
|
|
|
|
|
|
|
|
Nov 3 2009, 09:00 AM
|
Group: Verified NS Member
Posts: 4
Joined: 2-November 09
Member No.: 6,070
|
thanks...I figured it out. looks awesome now QUOTE (mdsource @ Nov 3 2009, 07:49 AM) You have to check all of your code to make sure it matches what is supposed to be there. In my case I had the link with the arrows, enlargement and close images directed to the wrong folder in my root folder. When I extracted the PrettyPhoto scripts they didn't go directly into my root folder but another folder within the prettyphoto folder. I just made sure the link pointed correctly and it worked fine.
You should look at the original script provided by Andy of NS and compare it to the script on your site. It should be the same. There are different variations that give different results, rounded corners, square corners etc. You can also check some of the sites posted here for the PrettyPhoto Image Gallery and see how they did it by looking at the code on their sites.
|
|
|
|
|
|
|
|
Nov 5 2009, 12:31 PM
|
Group: Verified NS Member
Posts: 1
Joined: 29-June 09
Member No.: 4,683
|
Great add-on. I'm having an issue where there are several variations and only one image per variation (but more than one default gallery image for the product). After selecting a product using the dropdowns the Lightbox hangs when you click on the image. Honda/2009/CBR1000RR/GP/Black is a good example. If you just click on the default image of the product when it comes up (before selecting dropdowns), it works fine. A 2nd issue is that the default product image comes up when you click on the variation image. If you select Yamaha/R1/2009/Undertail/Carbon, then click on the image (which is correct) the default image for the product pops up. Thanks, James
|
|
|
|
|
|
|
|
Nov 12 2009, 02:39 AM
|
Group: Verified NS Member
Posts: 96
Joined: 5-December 08
From: Los Angeles
Member No.: 3,248
|
Hello,
Is it possible to have the background not shaded grey?
When I click the zoom, I wish to have the background not shaded opacity darker... and just have it normal.
Is is possible to tweek it so there will be no greyed out background after clicking zoom?
|
|
|
|
|
|
|
|
Nov 12 2009, 07:58 AM
|
Group: Verified NS Member
Posts: 294
Joined: 1-October 07
From: New Jersey
Member No.: 102
|
QUOTE Hello,
Is it possible to have the background not shaded grey?
When I click the zoom, I wish to have the background not shaded opacity darker... and just have it normal.
Is is possible to tweek it so there will be no greyed out background after clicking zoom? CODE hs.graphicsDir = '/highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'rounded-white';
hs.fadeInOut = true;
//hs.dimmingOpacity = 0.75; Check the setting for your opacity within the script on your pages. Experiment with the values to get the amount of shading you want. (you are using highslide from what I can see) In prettyphoto we are able to use parameters from 0 - 1
|
|
|
|
|
|
|
|
Nov 12 2009, 01:36 PM
|
Group: Verified NS Member
Posts: 96
Joined: 5-December 08
From: Los Angeles
Member No.: 3,248
|
QUOTE (mdsource @ Nov 12 2009, 08:06 AM) CODE hs.graphicsDir = '/highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'rounded-white';
hs.fadeInOut = true;
//hs.dimmingOpacity = 0.75; Check the setting for your opacity within the script on your pages. Experiment with the values to get the amount of shading you want. (you are using highslide from what I can see) In prettyphoto we are able to use parameters from 0 - 1 Thanks, I'm actually not using Highslide anymore... I'm using the 'prettyphoto' script. Does anyone know how to get the background Not shaded? Also, Is it possible to have a shrinked thumbnail of the main item picture as well below the main picture? Thanks
|
|
|
|
|
|
|
|
Nov 17 2009, 03:58 AM
|
Group: Verified NS Member
Posts: 96
Joined: 5-December 08
From: Los Angeles
Member No.: 3,248
|
Is it possible to have a shrinked thumbnail of the main item picture as well below the main picture?
I would appreciate any sort of response.
Thank you.
|
|
|
|
|
|
|
|
Nov 17 2009, 02:32 PM
|
Group: Verified NS Member
Posts: 96
Joined: 5-December 08
From: Los Angeles
Member No.: 3,248
|
I would also like to add the "click to view larger" text above the thumbnails... between the main picture and the thumbnails.
Is this possible?
|
|
|
|
|
|
|
|
Nov 17 2009, 06:28 PM
|
Group: Verified NS Member
Posts: 294
Joined: 1-October 07
From: New Jersey
Member No.: 102
|
QUOTE Does anyone know how to get the background Not shaded? To customize prettyPhoto, you can pass the following parameters <script type="text/javascript" charset="utf-8"> $(document).ready(function(){ $("a[rel^='prettyPhoto']").prettyPhoto({ animationSpeed: 'normal', /* fast/slow/normal */ padding: 40, /* padding for each side of the picture */ opacity: 0.35, /* Value betwee 0 and 1 */ showTitle: true, /* true/false */ allowresize: true, /* true/false */ counter_separator_label: '/', /* The separator for the gallery counter 1 "of" 2 */ theme: 'light_rounded', /* light_rounded / dark_rounded / light_square / dark_square */ hideflash: false, /* Hides all the flash object on a page, set to TRUE if flash appears over prettyPhoto */ modal: false, /* If set to true, only the close button will close the window */ changepicturecallback: function(){}, /* Called everytime an item is shown/changed */ callback: function(){} /* Called when prettyPhoto is closed */ }); }); </script> To learn more about PrettyPhoto go here: PrettyPhoto Image help
|
|
|
|
|
|
|
|
Nov 17 2009, 06:48 PM
|
Group: Verified NS Member
Posts: 96
Joined: 5-December 08
From: Los Angeles
Member No.: 3,248
|
QUOTE (mdsource @ Nov 17 2009, 07:36 PM) To customize prettyPhoto, you can pass the following parameters <script type="text/javascript" charset="utf-8"> $(document).ready(function(){ $("a[rel^='prettyPhoto']").prettyPhoto({ animationSpeed: 'normal', /* fast/slow/normal */ padding: 40, /* padding for each side of the picture */ opacity: 0.35, /* Value betwee 0 and 1 */ showTitle: true, /* true/false */ allowresize: true, /* true/false */ counter_separator_label: '/', /* The separator for the gallery counter 1 "of" 2 */ theme: 'light_rounded', /* light_rounded / dark_rounded / light_square / dark_square */ hideflash: false, /* Hides all the flash object on a page, set to TRUE if flash appears over prettyPhoto */ modal: false, /* If set to true, only the close button will close the window */ changepicturecallback: function(){}, /* Called everytime an item is shown/changed */ callback: function(){} /* Called when prettyPhoto is closed */ }); }); </script> To learn more about PrettyPhoto go here: PrettyPhoto Image help Thank you MDsource! I appreciate your help very much. Would it be possible to add text or an image below the main item picture. Between the Thumbnails and the Main Item picture? It seems to be one big script, so I can not get anything in between. I would really love to have a 1px border around the thumbnails as well. Would it be possible to do this?
|
|
|
|
|
|
|
|
Nov 17 2009, 07:56 PM
|
Group: Verified NS Member
Posts: 294
Joined: 1-October 07
From: New Jersey
Member No.: 102
|
QUOTE (daniel09 @ Nov 17 2009, 06:56 PM) Thank you MDsource!
I appreciate your help very much.
Would it be possible to add text or an image below the main item picture. Between the Thumbnails and the Main Item picture?
It seems to be one big script, so I can not get anything in between.
I would really love to have a 1px border around the thumbnails as well. Would it be possible to do this? I have not experimented too much with this script. Most of the information I have found was from doing searches. I am sure you can modify the script in many more ways than shown here but I don't know how to do that myself.
|
|
|
|
|
|
|
|
Nov 19 2009, 05:55 PM
|
Group: Verified NS Member
Posts: 74
Joined: 8-October 08
Member No.: 2,718
|
This does look awsome...still unsure how it works and how to impliment it. Can this support video on the network solutions sites?
|
|
|
|
|
|
|
|
Nov 19 2009, 06:04 PM
|
Group: Verified NS Member
Posts: 294
Joined: 1-October 07
From: New Jersey
Member No.: 102
|
QUOTE (Furlongs @ Nov 19 2009, 06:03 PM) This does look awsome...still unsure how it works and how to impliment it. Can this support video on the network solutions sites? You can open Quicktime videos with it.
To do so, simply:
1. Create a link (<a href="#">).
2. Add the rel attribute "prettyPhoto" to it (rel="prettyPhoto").
3. Change the href of your link so it points to the .mov file.
4. Then add the width and height as parameters in your HREF (?width=100&height=100) prettyPhoto is also a multimedia lightbox, to open flash content with it simply:
1. Create a link (<a href="#">).
2. Add the rel attribute "prettyPhoto" to it (rel="prettyPhoto").
3. Change the href of your link so it points to the SWF file.
4. Then add the width and height as parameters in your HREF (?width=100&height=100).
5. In the case your flash needs specifics variables, add &flashvars and add the required parameters This script is licensed under Creative Commons Attribution 2.5. So you can use it in all you projects even commercial ones. Donations are always welcome. PrettyPhoto Page Link
|
|
|
|
|
|
|
|
Dec 10 2009, 11:46 AM
|
Group: Verified NS Member
Posts: 13
Joined: 22-July 09
Member No.: 4,813
|
[quote name='AndyT - MC' date='Mar 18 2009, 05:04 PM' post='16470'] Andy I do not have the below code in my product layout section. It was design some time ago by someone there but I do have the following code related to product detail. Would I need to remove it and add the new. Below is what I have in my layout nothing else. <tr> <td align="center"><img src="<%Product.DetailedImageUrl%>" /><br /> <a href="<%Product.DetailedImageGalleryUrl%>"target=_blank">View Gallery</a></td> </tr> I really like the looks of this and want to switch over. 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>
|
|
|
|
|
|
|
|
Dec 10 2009, 04:35 PM
|
Group: Verified NS Member
Posts: 13
Joined: 22-July 09
Member No.: 4,813
|
Well got it to work but its very slow loading the product image on the detail page, Sometime it takes 10-30 seconds before an image shows up on the products detail before I can click the image. Any ideas?
|
|
|
|
|
|
|
|
Dec 20 2009, 07:31 PM
|
Group: Verified NS Member
Posts: 96
Joined: 5-December 08
From: Los Angeles
Member No.: 3,248
|
Is it possible to have the main item picture below as the thumbnail too?
I would love to have this.
|
|
|
|
|
|
|
|
Dec 20 2009, 08:22 PM
|
Group: Verified NS Member
Posts: 294
Joined: 1-October 07
From: New Jersey
Member No.: 102
|
QUOTE (daniel09 @ Dec 20 2009, 07:39 PM) Is it possible to have the main item picture below as the thumbnail too?
I would love to have this. From a previous post: QUOTE There isn't a need for the variant images now. Now you can just add all of the images in the gallery and it will generate mini thumbs of each choice. Allowing the customer to zoom whichever color they want.
--------------------
If at first you don't succeed... Ctrl + Alt + Del
Agkits.com - Tractor Engine Parts | TruckEngineParts.com - Truck Engine Parts | Check Out Our Blog Just go to the gallery tab under your product editing window and upload all of the images you need. If you also want to include a thumbnail of the main image, upload it twice.
|
|
|
|
|
|
|
|
Dec 21 2009, 07:00 PM
|
Group: Verified NS Member
Posts: 96
Joined: 5-December 08
From: Los Angeles
Member No.: 3,248
|
QUOTE (mdsource @ Dec 20 2009, 09:30 PM) From a previous post:
Just go to the gallery tab under your product editing window and upload all of the images you need. If you also want to include a thumbnail of the main image, upload it twice. Thank you, I appreciate the reply. Yes, the reason I asked was because I did not want to upload an image twice. It is time consuming and also doubles the image in the gallery. I do appreciate your assistance. I just hoped for a way to have the main pic thumbnail automatically below as well.
|
|
|
|
|
|
|
|
Dec 21 2009, 08:59 PM
|
Group: Verified NS Member
Posts: 294
Joined: 1-October 07
From: New Jersey
Member No.: 102
|
QUOTE (daniel09 @ Dec 21 2009, 07:08 PM) Thank you, I appreciate the reply.
Yes, the reason I asked was because I did not want to upload an image twice. It is time consuming and also doubles the image in the gallery.
I do appreciate your assistance. I just hoped for a way to have the main pic thumbnail automatically below as well. This just in!! From the prettyPhoto site: New from Pretty PhotoJust in time for the holidays, prettyPhoto 2.5.5!
December 21st 2009
It’s here, new prettyPhoto! Added new features, modified the settings, optimized the code a bit.
New features
Inline content support. You now just have to link to the ID of the element you want to open in prettyPhoto and prettyPhoto will do the rest.
I also added support for Vimeo, just link the the video page and prettyPhoto will do the rest.
New theme! I’ve bundled a new theme inspired by the facebook modal box.
Settings changes
Added wmode as a setting. You can now specify if your flash movie needs to be opaque or transparent.
Added autoplay as a setting. You can now specify if you want the movies to start playing as soon as they are opened in prettyPhoto…or not!
prettyPhoto markup, flash markup, quicktime markup and inline content markup are now in settings. So if you ever need to modify flash params, add bits of HTML you can change these settings and you’re set.
How to upgrade?
As usual, just replace the javascript and css file with the new one. Add the facebook theme images in case you want to use that theme and you’re set!
PrettyPhoto Upgrade Link *** PrettyPhoto support link ***Pretty Photo donations link
I have not yet tried this new upgrade. I happened upon it today and it seems to have been uploaded today. Let's see what it can do.
|
|
|
|
|
|
|
|
Jan 3 2010, 11:18 AM
|
Group: Verified NS Member
Posts: 3
Joined: 14-October 09
Member No.: 5,691
|
I've been searching the forums for an image gallery that is similar to the PrettyPhoto implementation you have here but uses an image swap function to view the thumbnails in the same image location rather than opening up a new window. I know that PrettyPhoto is set up to open a new window but is there a way I can modify the code to get an image swap rather than a new window?
If not can you point me in the direction of a possible solution?
|
|
|
|
|
|
|
|
Jan 4 2010, 10:45 AM
|
Group: Verified NS Member
Posts: 185
Joined: 1-October 08
From: Montana
Member No.: 2,617
|
I've followed the steps up until saving the modified script but I keep getting an error so it won't save (unexpected code stuff). I've started over twice but nothing works. From what I can tell this is where it should go. If not, someone please let me know. CODE <ns:choose> <ns:when condition="Product.ImageCount >= 1 && Product.DisplayImageUrl != ''"> <a href="<%Product.DetailedImageUrl%>" target="_blank" onclick="Window.open('<%Product.DetailedImageGalleryUrl%>','img-view',100,100,1,0);return false;"> <img src="<%Product.DisplayImageUrl%>" title="<%Product.ImageCaption%>" alt="<%Product.ImageAlternateText%>" border="0" /> </a><br /> <font size="1" color="#325EA7"><i>Actual item may vary from photo</i></font><br /> <ns:if condition="Product.HasFreeShippingPromo"> <img src="<%Product.FreeShippingPromoImageUrl%>" alt="free shipping" /> </ns:if> <ns:if condition="Product.DetailedImageUrl!= ''"> <div style="text-align:center"> <a href="<%Product.DetailedImageUrl%>" target="_blank" onclick="Window.open('<%Product.DetailedImageGalleryUrl%>','img-view',100,100,1,0);return false;"> <ns:choose> <ns:when condition="Product.ImageCount > 1">View More Images</ns:when> <ns:otherwise>Larger View</ns:otherwise> </ns:choose> </a> The other issue is that I need to keep some of that code: [code] <font size="1" color="#325EA7"><i>Actual item may vary from photo</i></font><br /> <ns:if condition="Product.HasFreeShippingPromo"> <img src="<%Product.FreeShippingPromoImageUrl%>" alt="free shipping" /> </ns:if> {/code} I haven't done any product modifications yet because I can't get this script to save.
|
|
|
|
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Network Solutions Forums > nsCommerceSpace™ Forums > nsCommerceSpace™ > How Do I? > nsCommerceSpace™ Premium
