2010-04-13 4 views
0

J'essaie de faire le site de commerce électronique typique où vous avez différentes vues de vêtements et lorsque vous cliquez dessus, il devient l'image principale.Que dois-je utiliser pour créer une simple galerie html?

Je suppose que javascript serait le mieux adapté pour cela? Peut-être que Jquery sera plus facile?

Merci J'ai juste besoin de quelqu'un pour me diriger dans la bonne direction.

+0

Puisque vous semblez penser Jquery (sic) est une alternative à JavaScript, je vous suggère de trouver un texte d'introduction JS et se familiariser avec les bases avant d'essayer de construire quoi que ce soit avec ça. http://wsc.opera.com/ est probablement un bon point de départ. – Quentin

+1

duplicata possible de http://stackoverflow.com/questions/2220964/recommendation-for-gallery-script –

+0

Je ne suis pas à la recherche d'une galerie complète. Juste une simple fonction qui vous permet de cliquer sur le pouce et de faire l'image principale etc ... ill essayez le code ci-dessous. Merci. – Adam

Répondre

0

Envoyez les différents noms de fichiers d'images avec le code html dans un tableau javascript. Définissez les liens "next" et "previous" pointant vers une fonction javascript qui définit simplement la source du <img> à l'image suivante/précédente. Ou, si vous avez des mini-aperçus, organisez les images de façon à avoir image0032_small.jpg pour la mini-prévisualisation et image0032.jpg pour la grande image, puis réglez l'événement onClick de la mini-image sur une fonction javascript qui lit l'URL de la mini image, supprime la partie _small et définit la source d'image de la grande image sur le résultat ...

0

Si vous utilisez une convention de dénomination logique, où le zoom img = la petite image + "_Zoom" (a.jpg > a_Zoom.jpg) dans le nom de fichier, vous pouvez le faire comme ceci:

<img id="productZoom" src="productA_Zoom.jpg" /> <-- the large image 
<a href="javascript:;// zoom in" onclick="loadZoom(this)"> 
<img id="productZoom" src="productB.jpg" /></a> <-- the thumbnail 




function loadZoom(element) { 
    var zoomImg = $(element).children('img')[0].src.replace(".","_Zoom.") 
    $('#productZoom').attr('src',zoomImg) 

} 
0

Il ya des annonces ozen façons de le faire. Je vous suggère d'exécuter une recherche sur

simple gallery [your favorite coding tool] 
Questions connexes