0

First of all I want say sorry for my bad english and I will try my best to get help and help you help me out.

Well i have a project for my web designer class and my teacher wants me to do a gallery html page but I could not find any answer or anything close to what I am looking for.

Well i will explain how he wants...

Let's imagine a gallery page with 3 thumbnail photos. Then the first thumbnail it's an airplane, the second it's a boat, the third it's a car.

Now if I click on the Airplane thumbnail it should only display slideshow of Airplanes and if I click on the Car Thumbnail it should only display Car images in the slideshow ... Did anybody understood what i meant? please if not i will explain it better. Thank you so much, and again please sorry for my bad english and explanation.

This is what i currently have from now but when I click on the first image it opens the one I click and when I click next go to the next one on the side of it enter image description here

Vishal Nair
  • 2,141
  • 3
  • 26
  • 39
Patrick Sterza
  • 53
  • 1
  • 1
  • 7

2 Answers2

0

Are you referring to a carousel? When you click on a thumbnail do you want a popover to appear and have carousel characteristics? To navigate from one picture to another.

If it's possible could you show your code in jsfiddle.net please?

user3223207
  • 43
  • 1
  • 2
  • 9
  • no i want to click on the airplane image and it will open on a pop up gallery that will only show airplanes imagens even if there are a thumbnail of a car or of a boat thumbnail that's what i meant – Patrick Sterza Mar 29 '14 at 12:36
0

Let's say the slideshow function looks a bit like this: 

function slideShow() {
    var slideShowImages = new Array();

    slideShow.prototype.load = function(img){ /*loads img into array*/ };
    slideShow.prototype.start = function(){ /*starts the slideshow*/ };
    slideShow.prototype.stop = function() { /*stops slideshow*/ };
    slideShow.prototype.empty = function() { /*empties array*/ };
};

To make sure you only show the images of a certain vehicle place them in an array:

var airplanes = new Array();
var cars = new Array();
var boats = new Array();

Then when loading all images, place them in the right array:

var boatImg = new Image();
boatImg.src = theSourceOfImage;
boatImg.addEventListener('load', function() { boats.push(boatImg) }); 
//etc etc.

Attach a click handler to the thumbnails.

SlideShow = new slideShow();

$("#boatThumbNailId").click(function() { 
   //now place all of the pictures from the boat array in the slideshow
   for(var i = 0; i < boats.length; i++)
       SlideShow.load(boats[i]);
   //then just start the slideShow
   SlideShow.start();
});

I hope this will be of some help to you, good luck.

Max Langerak
  • 1,187
  • 8
  • 17