1

My boss has seen this on a website: http://event.photoswarm.com/

Notice how the images change as you go across the albums. The downside of this is that all the thumbnail images have to be downloaded at the start and then I guess it all then works.

Is there a way I could get something similar to work while loading the images a little better?

The problem I guess is:

  1. Make the images load a little cleaner
  2. Make them load better as some of the albums could have 200+ photos
  3. Use a jquery plugin - this one seems to have been made by photo swarm and I guess they wouldn't be too chuffed if I stole it!

So if there is a way to make something or anyone knows of a free plugin I can download that would be great.

sth
  • 222,467
  • 53
  • 283
  • 367
Richard Housham
  • 864
  • 2
  • 15
  • 34

4 Answers4

0

I think it might be best if I answered this one as I'm the original author of the code in question :)

Firstly, we're ok with you taking the code (though this question is a year old so you probably already have), we're in the middle of a big rewrite at the moment and this code is depreciated as part of that.

The file that Fabián linked to does contain the code that you need, but it also contains a lot of other code for the rest of the site that you don't. The bit that you want is actually quite simple but there are a couple of different things going on. Deep in that file you'll see the PS.CoverLoader class.

Firstly that takes all the thumbs for the page and starts loading them in the background. Let's just assume they've already been loaded.

The flicking is very simple - I'll just use pseudocode as you already have the js there (and you'd probably use jquery these days).

create array of all images for album
attach to album mousemove
on move find x position of the mouse
translate that to a position in your array
    segment_size = album_width / img_count
    segment = Math.floor(offset/segment_size)
switch album displayed image to be array[segment]

In terms of other questions regarding loading lots of images. It is a problem. This system loads all the thumbs for the page. It's inefficient - some pages are 10s/100s of MB. We tried created a single long image for each album containing all the thumbs (an image sprite) but that doesn't really work with this many different images.

My suggestion would be to load all the images for a given album on first hover and store that in an array in js.

Aidan Kane
  • 3,856
  • 2
  • 25
  • 28
0

If you inspect the element and resources you will find this:

http://static.photoswarm.com/js/app_user.js

It uses jQuery and Prototype.js

Fabián Heredia Montiel
  • 1,687
  • 1
  • 16
  • 30
  • Yeah cheers, but like I say that loads all the images together was wondering if there is a better way to do this, as some of my albums will have 200+ images. Also I guess they won't like me nicking there js – Richard Housham Dec 14 '11 at 15:50
  • You can learn from it, that is how it works. Also, if you put the JS file in a document.ready() then it will load the page first then the thumbnails. Also look at this: view-source:http://event.photoswarm.com/ It loads the tumbnails after loading the page. – Fabián Heredia Montiel Dec 14 '11 at 15:54
  • Still takes a hell of a long time to download them all, and if you have like 200+ then it causes problems – Richard Housham Dec 14 '11 at 16:00
  • @RichardHousham That page you linked only has five or six images per album that cycle through. Not sure why you're hung up on downloading 200+ images per album. – MetalFrog Dec 14 '11 at 16:10
0

You could store all your image locations in an array. Then it only will load the images when you hover over them.

var images=new Array("image1.jpg","image2.jpg","image3.jpg", 'image4.jpg");
sth
  • 222,467
  • 53
  • 283
  • 367
Dominic Green
  • 10,142
  • 4
  • 30
  • 34
0

I suppose you take your images and smush it first of all via the Yahoo Tool SmushIt, this removes all unneceseary information out of your images. Then I would initialize an array with the links of the images you want to have on that specific album, and then simply add a 

`.mousemove(function(){
     set Timeout(function(){
       //code goes here
     },1000)
  })`

on the specified album(which could be a div for example) and by that you run through that array and simply change the "background-image" of that div with your link out of that array. Maybe you should add a setTimeout() to that action so this does not run through that fast. An alternate option would be if you choose .hover() but I'm not quite sure if this fits your requirements.

mas-designs
  • 7,498
  • 1
  • 31
  • 56