Prev/Next in Slider Not Working

Posted on 2014-02-11
Last Modified: 2014-02-13

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:

Any help is appreciated!
Question by:Nana00
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
  • 2
LVL 58

Expert Comment

ID: 39852198
Apart from being ridiculously large (in size, what makes you think they are small) they are all loading fine for me and in order.
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39852206
Can't get to the site...
LVL 58

Expert Comment

ID: 39852209
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 {}
.photos img {}
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

ID: 39852255
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?
LVL 58

Expert Comment

ID: 39852274
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.

Author Comment

ID: 39852287
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.
LVL 58

Accepted Solution

Gary earned 500 total points
ID: 39852317
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.

Author Comment

ID: 39852326
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!
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39856252
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. or or  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.

Featured Post

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

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

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

690 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