Prevent PrettyPhoto JQuery From Duplicating First Image

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/
puppyknucklesAsked:
Who is Participating?
 
SRigneyConnect With a Mentor Commented:
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
 
SRigneyCommented:
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
 
puppyknucklesAuthor Commented:
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
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
SRigneyCommented:
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
 
puppyknucklesAuthor Commented:
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
 
puppyknucklesAuthor Commented:
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
 
puppyknucklesAuthor Commented:
Exactly what I was hoping for, but would never have been able to figure that out.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.