You unzipped the files incorrectly, instead of "root >> prettyPhoto >> (files)" you have "root >> prettyPhoto >> prettyPhoto >> (files)".


You seem to have the same issue. Also, your active product layout does not have the prettyPhoto gallery modification, so you are likely seeing the default image gallery popup window. You will need to either assign the layout with prettyPhoto to a specific product and view it, or activate the prettyPhoto layout for all products.

The following errors have occurred:
- Element 'ProductAttributes' is required but was not specified. (ex: <ns:ProductAttributes />)


This happens after entering all that code into the product layout design. I save it, but when I go back to edit, it reverts to default code.

You need to add the attributes NsScript. Select it from the nsscript dropdown above and right of the wysiwyg area, or just put <ns:ProductAttributes /> in your design html.

Andy:
Where do I find the images section of the "CODE" ? Or better yet where do I find the code for the images?

I uploaded the file to the file manager, but it loaded with errors and I couldn't find the Cloned design in the file manager. Also is there a sample of what the new layout would look like before I go to all that trouble?
Thanks

that did it. but the effect doesnt work yet...it will just open the pic in the same browser window.

I do not have the following as mentioned;
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.

How do I do the above^ ??

Disregard that section, if you were already using jQuery you would know it.

On your site, you have "Product Layout 1-2-2" with the script, have you asssigned it to any products? You could also just activate it for your entire site, but you have to enable the cloned layout in one of these 2 ways.

There is a lot going on here, I'm not sure I understand your issues. Several people have posted examples in this thread, and I have a link in my post to the creator's website with an example.

In trying to extract the zip on your site, it seems the error was that there were blocked file extensions in the zip. I doubt it is an issue, just continue the steps in the original post to clone the active product details layout, add the code, and activate the edited layout.

Well, I got it to work and it looks great! The only question I have is that when I extracted the files, it showed this error...Some files have disabled extensions. They were not extracted. Will this effect anything?

Marcia

"On your site, you have "Product Layout 1-2-2" with the script, have you asssigned it to any products?" Yes, and it opens the picture in the same browser window.

I did activate PL 1-2-2 for the entire store, but it has the same results, it opens the pic. in the same browser window. And if a product has more than 1 image, the images are stacked on top of eachother.

Then when i wanted to go back to default, somehow there was an error in the script, great.

"You could also just activate it for your entire site, but you have to enable the cloned layout in one of these 2 ways." How's that?

If it is opening the pic in the same browser window then there is no way the layout/script is active. I just checked your site. Currently there is not pretty photo code, did you disable the layout with the prettyphoto script?

Could you give me a link to that product?

This is the product i was testing on, and the layout is now currently 1-2-2.

http://www.ordering-hitechsales.com/sony-p...system-usa.aspx

I am using IE7.

There is an error in the script of the page: $("a[rel^='prettyPhoto']").prettyPhoto The Firefox error report says that this is not a function

I do not see the following script:



the prettyPhoto script should be in there, I'm not 100% sure...someone might want to verify that.

okay....now what?

Same issue as above, I fixed it for you.

friggin sweet! now help with the feed, lol.

I think I have everything squared away except that I'm getting an error galleryHolder is null in Firefox?

You need 2 elements in your product details HTML with specific IDs:

<div id="gallery-main" style="margin-bottom:5px"></div>
<div id="gallery-other" style="text-align:center"></div>

Hi Andy - Those two element IDs are present. I copied and pasted the code from the opening post into my product layout. It's currently active with this sample product: http://www.j-hung.com/customdigitalfull-colorbanner-2.aspx

It seems like other people have the same code and it just works. I'm baffled why mine won't. Do I need to have my gallery photos added a certain way?

Your link to jQuery on GoogleCode points to

https://jqueryjs.googlecode.com/files/jquery-1.3.2.mini.js

Which returns a 404. The one I use, and the one from the example, is:

http://ajax.googleapis.com/ajax/libs/jquer...1/jquery.min.js

If you are looking to implement jQuery 1.3.2, you can just change the URL to:

http://ajax.googleapis.com/ajax/libs/jquer...2/jquery.min.js

Problem solved. For future reference, if anyone already has "getElementById" assigned to a function named $(x), then you'll want to either rename your function to something else, or delete it and place the jQuery script source in your header.

This script is awesome. Thanks for pulling it all together Andy.

Wow I've been wanting this feature for a long time. Thank you so much and it's just what I wanted.

Mike
hbgshop.com

I have everything working, however I am looking to add the product name/title to the popup/enlarged image viewer. I would like to add the product name on the bottom left of the popup window.

I'm seeing double images on my product details page. http://www.shopfrommychair.com/dextima.aspx
I've gone through the code, but don't see what is causing this. Here is what I have: (Thanks in advance)

<h1><%Product.Name%></h1>

<ns:if condition="Product.DisplayNextAndPrevious">
<table border="0" class="prod-detail-next-prev">
<tr>
<td class="prod-detail-prev"><a href="<%Product.PreviousProductUrl%>"><< Previous in <%Product.CategoryName%></a></td>
<td class="prod-detail-next"><a href="<%Product.NextProductUrl%>">Next in <%Product.CategoryName%> >></a></td>
</tr>
</table>
</ns:if>

<table class="prod-detail" cellpadding="0" cellspacing="0">
<tr>
<td class="prod-detail-lt">
<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>
<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 > 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:if condition="Product.ImageCount > 1">
<div style="text-align:center">click smaller images to enlarge</div>
</ns:if>
</ns:when>
<ns:otherwise>
<img src="<%Product.UnavailableImageUrl%>" alt="unavailable" border="0" />
</ns:otherwise>
</ns:choose>
</td>
<td class="prod-detail-rt">
<ns:if condition="product.HasRatings">
<div class="prod-detail-rating">
<ns:ProductRating />
</div>
</ns:if>
<div class="prod-detail-price">
<ns:if condition="Product.HasMsrpPrice">
<div class="prod-detail-msrp"><span class="prod-detail-msrp-label"><%Product.MsrpPriceLabel%>:</span> <span class="prod-detail-msrp-value"><%Product.MsrpPrice%></span></div>
</ns:if>
<ns:if condition="Product.HasCustomerPrice">
<div class="prod-detail-cost"><span class="prod-detail-cost-label"><%Product.CustomerPriceLabel%>:</span> <span class="prod-detail-cost-value"><%Product.CustomerPriceText%></span></div>
</ns:if>
<ns:if condition="Product.HasSalePrice">
<div class="prod-detail-sale"><span class="prod-detail-sale-label"><%Product.SalePriceLabel%>:</span> <span class="prod-detail-sale-value"><%Product.SalePriceText%></span></div>
</ns:if>
<ns:if condition="Product.HasSavings">
<div class="prod-detail-save"><span class="prod-detail-save-label"><%Product.SavingsLabel%>:</span> <span class="prod-detail-save-value"><%Product.SavingsText%></span></div>
</ns:if>
</div>
<ns:if condition="Product.StockMessage != ''">
<div class="prod-detail-stock"><%Product.StockMessage%></div>
</ns:if>
<ns:if condition="Product.DisplayPartNumber">
<div class="prod-detail-part"><span class="prod-detail-part-label"><%Product.PartNumberLabel%>:</span> <span class="prod-detail-part-value"><%Product.PartNumber%></span></div>
</ns:if>
<ns:if condition="Product.DisplayConfigurationCode">
<div class="prod-detail-config"><span class="prod-detail-config-label"><%Product.ConfigurationCodeLabel%>:</span> <span class="prod-detail-config-value"><%Product.ConfigurationCode%></span></div>
</ns:if>
<ns:if condition="Product.DisplayManufacturer">
<div class="prod-detail-man">
<ns:if condition="Product.ManufacturerName != ''">
<div class="prod-detail-man-name"><span class="prod-detail-man-name-label"><%Product.ManufacturerNameLabel%>:</span> <span class="prod-detail-man-name-value"><%Product.ManufacturerName%></span></div>
</ns:if>
<ns:if condition="Product.ManufacturerPartNumber != ''">
<div class="prod-detail-man-part"><span class="prod-detail-man-part-label"><%Product.ManufacturerPartNumberLabel%>:</span> <span class="prod-detail-man-part-value"><%Product.ManufacturerPartNumber%></span></div>
</ns:if>
</div>
</ns:if>
<ns:if condition="Product.HasAttributes">
<ns:ProductAttributes layout="div" />
</ns:if>
<ns:if condition="Product.ShippingMessage != ''">
<div class="prod-detail-ship-message"><%Product.ShippingMessage%></div>
</ns:if>
<ns:if condition="Product.HasVariations">
<div style="margin-top:20px">
<h3><%Product.VariationsLabel%></h3>
<ns:ProductVariations />
</div>
</ns:if>
<ns:if condition="Product.HasPersonalization">
<div style="margin-top:20px">
<h3><%Product.PersonalizationLabel%></h3>
<ns:ProductPersonalization />
</div>
</ns:if>
<ns:ProductAddToCart />
<ns:ProductAddToShoppingList />
<ns:if condition="Product.DisplayEmailAFriend">
<div class="prod-detail-email-friend">
<a onclick="Window.open('<%Product.EmailAFriendUrl%>','email-a-friend',550,400,1,0);return false;" href="<%Product.EmailAFriendUrl%>" target="_blank">Email this page to a friend</a>
</div>
</ns:if>
<ns:if condition="Product.HasFreeShippingPromo || Product.HasOnSalePromo || Product.HasTaxFreePromo">
<div class="prod-detail-promo">
<ns:if condition="Product.HasFreeShippingPromo">
<img src="<%Product.FreeShippingPromoImageUrl%>" alt="free shipping" />
</ns:if>
<ns:if condition="Product.HasOnSalePromo ">
<img src="<%Product.OnSalePromoImageUrl%>" alt="on sale" />
</ns:if>
<ns:if condition="Product.HasTaxFreePromo">
<img src="<%Product.TaxFreePromoImageUrl%>" alt="tax free"/>
</ns:if>
</div>
</ns:if>
<ns:if condition="Product.HasQuantityDiscounts">
<div style="margin-top:20px">
<h3><%Product.QuantityDiscountsLabel%></h3>
<ns:ProductQuantityDiscounts />
</div>
</ns:if>
</td>
</tr>
<ns:if condition="Product.LongDescription != ''">
<tr>
<td colspan="2" class="prod-detail-bt">
<div class="prod-detail-desc"><%Product.LongDescription%></div>
</td>
</tr>
</ns:if>
</table>
<ns:ProductRelatedProducts />
<ns:ProductReviews />

The above will display your product and when clicked will open a separate window.



This is your Pretty Photo script, you should have one or the other, not both.

I hope that helps.