Question

I’m creating image gallery with drag functionality (like on iPhone).
It gets data from html div (more than 15 images possible):

<div class="mySlideshow">
  <img src="img1.jpg"/>
  <img src="img2.jpg"/>
  <img src="img3.jpg"/>      
  ...
  <img src="img15.jpg"/>
</div>

Now I see two ways how create it (transition using drag):
-Create 15 divs with background-image and show all them as one big strip.

-Create 3 div-containers and change their background-image property and position after transition complete.

What is the best way to create this kind of gallery?

Answer 1

If you’re worried about performance you could preload the next couple of “hidden” images whilst not loading all images when the page loads, like this.

However, your question seemed to be pointing at which of the two methods above you think would be best. I think the first would be better but I don’t know why you’d use background-images rather than static images on the page? Unless I misunderstood how you were using the term “background-image”. It’d probably be smoother to have all the images on a line with one div and scroll through them. Semantically, you could use a list rather than a div.