Solved

Prev/Next in Slider Not Working

Posted on 2014-02-11
9
356 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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
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…
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…

773 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