0

I'm following this simple demo tutorial here: http://jquerytools.org/demos/scrollable/index.html

Well basically, I'm following the tutorial above. The problem with that demo is that it loads all the images at one time affecting performance greatly. I want it so that it only loads a set of images every time you click the arrows. So basically, once you go to the page, it loads the first set of images first. Then, once you click one of the arrows, it loads the next set of images. This is so that the page has a much shorter load time. Is there anyway to do that with ajax or maybe jQuery load? I want it to be something like the link below but using the jquery tools scrollable plugin:

http://sorgalla.com/projects/jcarousel/examples/dynamic_ajax_php.html

Mico Abrina
  • 507
  • 1
  • 7
  • 25
  • did you managed to get this to work? I am looking for the same solution as you. – Giles Jan 01 '13 at 16:05
  • [In one of my questions a very helpful member Wolf has posted some code which should work for you.][1] [1]: http://stackoverflow.com/a/14110946/667367 – Giles Jan 01 '13 at 17:39

1 Answers1

0

It'd be helpful if you provided some of your code. However, from the documentation shown, your image sets should be in separate divs to achieve what you want

//one set
<div>
      <img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg" />
      <img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg" />
      <img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg" />
      <img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg" />
    </div>

///Next set, revealed on click
<div>
      <img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg" />
      <img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg" />
      <img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg" />
      <img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg" />
    </div>
kakoma
  • 1,179
  • 13
  • 17
  • My code is located in this example. I just copied the code exactly the way it is. : http://jquerytools.org/demos/scrollable/index.html – Mico Abrina Jun 03 '12 at 05:24
  • Mico, where is your code located? A link...I can't be of help without looking at your code; the code you copied from works, yours doesn't. – kakoma Jun 03 '12 at 05:37
  • Mine works exactly the same way actually. Its just that I want it revised a bit. I want it to load 4 images once you load the page. Then, load the other sets of images once you click the arrows. That way, it doesn't affect performance. The tutorial or the documentation doesn't state how to do that. – Mico Abrina Jun 03 '12 at 05:47
  • No it doesn't. If you observe closely, you would notice that once you load the page, all the images are loaded at once. I don't want that. I only want it to load 4 images at first. Then load the other set of 4 once you click one of the arrows. – Mico Abrina Jun 04 '12 at 05:54