Link to home
Start Free TrialLog in
Avatar of Nana00
Nana00

asked on

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!
Avatar of Gary
Gary
Flag of Ireland image

Apart from being ridiculously large (in size, what makes you think they are small) they are all loading fine for me and in order.
Can't get to the site...
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 {}
Avatar of Nana00
Nana00

ASKER

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?
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.
Avatar of Nana00

ASKER

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.
ASKER CERTIFIED SOLUTION
Avatar of Gary
Gary
Flag of Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Nana00

ASKER

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!
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.