Solved

Prev/Next in Slider Not Working

Posted on 2014-02-11
9
354 Views
Last Modified: 2014-02-13
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!
0
Comment
Question by:Nana00
  • 4
  • 3
  • 2
9 Comments
 
LVL 58

Expert Comment

by:Gary
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.
0
 
LVL 52

Expert Comment

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

Expert Comment

by:Gary
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 {}
to
.photos img {}
0
 

Author Comment

by:Nana00
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?
0
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 58

Expert Comment

by:Gary
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.
0
 

Author Comment

by:Nana00
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.
0
 
LVL 58

Accepted Solution

by:
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.
0
 

Author Comment

by:Nana00
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!
0
 
LVL 52

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

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
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.
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

744 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now