Prev/Next in Slider Not Working

Hello,

I created a site for my portfolio using a few jqueries. On the first page, it has a slideshow using jquery-1.7.1.js. In the portfolio section, I have a gallery that uses the touch tough jquery. You can click on the images to make them pop out, but the prev/next buttons don't work. If you click prev/next, sometimes the images don't load, but they load if you click on them individually. They are small files so it shouldn't take long to load. Also, the order isn't correct. It skips to random images when it should be in order.

My site is: http://lucychen.me/

Any help is appreciated!
Nana00Asked:
Who is Participating?
 
GaryConnect With a Mentor Commented:
This slider will not work with multiple slideshows
Only choice you have is to remove
$('.photos a').touchTouch();

And just wrap the two slideshows in the thumbs div.
0
 
GaryCommented:
Apart from being ridiculously large (in size, what makes you think they are small) they are all loading fine for me and in order.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Can't get to the site...
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
GaryCommented:
Ok, I see, it's on the second slideshow.
You have your photos div wrapped in a thumbs div, probably screwing up the js as you assign the slide show to .thumbs and .photos, but seeing as there are two .thumbs divs its firing multiple times.
So just remove the .thumbs div around the .photos div

And change your css
.thumbs .photos img {}
to
.photos img {}
0
 
Nana00Author Commented:
I made the changes you suggested in index.html and css, but it's still not working. The order is random. Keep hitting prev/next a few times and you'll see it. Also, I can't remove thumbs since that controls the gallery. When I click prev/next, the loader just spins forever, it doesn't load the image at all?
0
 
GaryCommented:
Don't know what you have done but you have moved .thumbs so it is still containing every thing.
You cannot assign the slideshow to the thumbs class div and assign it again to another div inside that div.
Change your code so that the first slideshow is contained by the thumbs div.  So the second slideshow already has its own class that is being initiated.
And make the css change above.
0
 
Nana00Author Commented:
The site has the latest changes. Like I mentioned earlier, I made the changes and it still doesn't work. I moved thumbs because it has everything and is no longer called twice.
0
 
Nana00Author Commented:
Yeah, I was thinking of removing the calling of photos a in touchtouch.js. I'm not sure why I had that to begin with and it caused me a lot of headache. Now that's gone, I think the problem is solved.

Thank you for your help!
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Hi Nana00, I did not want to post in your newer thread since you have closed that out.  I am able to get to your site now.  Glad it works.

You should check out some inexpensive services that make creating your site super simple.  http://www.squarespace.com/ or http://www.wix.com/ or http://www.weebly.com/.  They are all about $7 bucks a month.  They all have ready made templates and you don't have to worry about coding.  All easier than managing wordpress too.

Good luck on your site.
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.