Solved

Prevent PrettyPhoto JQuery From Duplicating First Image

Posted on 2011-09-25
7
2,912 Views
Last Modified: 2012-06-27
I am trying to implement a gallery function on my ecommerce site using the JQuery prettyphoto script.  I've got it working, however, there is one little annoying behavior that I would love to solve.  Clicking the main image triggers the gallery, and clicking any thumbnail triggers the gallery.  Because the main image's path gets written twice to the code, once for itself and then again when all the images for that product are written for the thumbnails, it appears twice in the gallery as the first two pictures.  Our old light box script would duplicate the lead image also but would stick the duplicate on the end, which was dumb but less obvious.  The ecom software is called PDG.

How can I prevent the gallery from having the first image duplicated?

Here's the code I am using:

 
<a href="!---IMAGE---" rel="prettyPhoto[pp_gal]" title="!---ALT_TEXT---"><img src="!---IMAGE---" alt="!---DESC---" title="!---DESC---"/></a>
        
<!---BEGIN_IMAGES_ROW--->
	<!---NUM_IMAGES_PER_ROW 1--->
        <!---BEGIN_IMAGES--->
<a href="!---IMAGE_URL---" rel="prettyPhoto[pp_gal]" title="!---ALT_TEXT---"><img src="/thumbs!---IMAGE_URL---" alt="!---DESC---" title="!---DESC---" /></a>
   	<!---END_IMAGES--->
    <!---END_IMAGES_ROW--->

Open in new window


And here is a link to see the current behavior:

http://www.themusiczoo.com/product/8505/Pic-Test/
0
Comment
Question by:puppyknuckles
  • 4
  • 3
7 Comments
 
LVL 15

Expert Comment

by:SRigney
ID: 36600844
when I view the source I see the attached html.  

The first 2 items are the same image 1 with a title and 1 without.  

The problem is not the jQuery that is generating the PrettyPhoto, it's only building with what it is given to work with.

I'm not sure what language the code you attached in the question is, but it's possible that the loop is starting at the same place as the one that you have hard coded outside the loop.  That would duplicate the first item.
<div id="ProdPicture" >   
    
    
 		<a href="/images/2-23-11/Gibson_Custom_Shop_Jimmy_Page_Number_2_Page_2_013_1.jpg" rel="prettyPhoto[pp_gal]" title=""><img src="/images/2-23-11/Gibson_Custom_Shop_Jimmy_Page_Number_2_Page_2_013_1.jpg" alt="2010 Gibson Custom Shop Jimmy Page &quot;Number Two&quot; Les Paul - Used" title="2010 Gibson Custom Shop Jimmy Page &quot;Number Two&quot; Les Paul - Used"/></a>
        

	
        
<a href="/images/2-23-11/Gibson_Custom_Shop_Jimmy_Page_Number_2_Page_2_013_1.jpg" rel="prettyPhoto[pp_gal]" title="2010 Gibson Custom Shop Jimmy Page &quot;Number Two&quot; Les Paul - Used"><img src="/thumbs/images/2-23-11/Gibson_Custom_Shop_Jimmy_Page_Number_2_Page_2_013_1.jpg" alt="" title="" /></a>

Open in new window

0
 

Author Comment

by:puppyknuckles
ID: 36601434
Thanks for the reply.  Yeah I realize that the JQuery script is behaving the way it should, it really has to do with the fact that the ecommerce software provides for the "main picture" and then the "extra pictures".  But the "extra pictures" includes the main picture so this gallery is picking it up twice.  I am hoping to get some help to figure out how to omit that.  Perhaps telling the Jquery to ignore the first picture somehow.
0
 
LVL 15

Expert Comment

by:SRigney
ID: 36709981
If you remove rel="prettyPhoto[pp_gal]" from the main one, then it will not be included in the Pretty Photo list of images.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:puppyknuckles
ID: 36710955
Yes, but then clicking the main image, which is instinctual, also won't launch the gallery.  That breaks the functionality in my mind.  I need to either click the main image and launch the gallery, or click on the thumbnails to launch the gallery and not have the main image repeated.  
0
 
LVL 15

Accepted Solution

by:
SRigney earned 500 total points
ID: 36711902
You may be able to fool it, since the big picture is the same as the first thumbnail.

You could remove the  rel="prettyPhoto[pp_gal]" and add id="startPrettyPhoto"

And add this to the document ready where you set up prettyPhoto

$("#startPrettyPhoto").click(function() {
  $("a[rel^='prettyPhoto']:first").click()
});

This will capture the click on the big image and make the first actual item in the pretty photo list act like it was clicked on.
0
 

Author Comment

by:puppyknuckles
ID: 36711982
You are the man.  That works!  I had to also remove the image link URL in the main image and replace it with "#" so the click wouldn't actually go anywhere but just wait for the prettyPhoto to kick in.  Thank you!
0
 

Author Closing Comment

by:puppyknuckles
ID: 36711987
Exactly what I was hoping for, but would never have been able to figure that out.
0

Featured Post

Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

685 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question