Portfolio à afficher

Question

J'aime avoir un portfolio dynamique et simple à mettre à jour.

Dans une partie, il y aura un petit aperçu carré, et le survol ou en cliquant sur ces aperçus mettra à jour la section LARGE avec l'ensemble du travail.

Je connais assez bien le: MM_swapImage(), mais j'aime le faire en jquery ou ajax.

Comment puis-je faire cela?

Certains résultats de la recherche: http://code.google.com/p/jquery-swapimage/

-

<SCRIPT LANGUAGE="Javascript"> 
function swap(pic1, pic2) 
{ 
var pic1 = document.getElementById("pic1"); 
var pic2 = document.getElementById("pic2"); 
var pic1src = pic1.src; 
var pic2src = pic2.src; 
pic2.src = pic1src; 
pic1.src = pic2src; 
} 
</SCRIPT> 

Answer 1

Voici mon code (juste un exemple, il a besoin de changements à travailler pour vous)

$('#imageswitch img').hover(
       function() { 
        var oldsource = $(this).attr('src'); 
        var foldername = oldsource.substr(0, oldsource.lastIndexOf('/')); 
        var filename = oldsource.replace(foldername+'/',''); 
        var newsource = foldername + '/' + 'hover_' + filename; 
        $(this).attr('src', newsource); 
        $(this).data('src', oldsource);     
       }, 
       function() { 
        $(this).attr('src', $(this).data('src')); 
       } 
      ); 

Créez un dossier pour les images. Les petites images sont appelées: image_1.jpg

les images plus grandes sont appelées hover_image_1.jpg

(notez le 'hover_' avant le nom du fichier)

Passez la souris sur une image et il le remplace est source avec la nouvelle source (l'image plus grande), lorsque vous quittez l'image avec la souris, l'ancienne source est restaurée.

Answer 2

Une solution rapide et facile serait de stocker le nom de fichier plus grand dans la balise rel, et l'utiliser pour échanger la source d'une image plus grande sur la page. Vous pouvez étendre ce avec des effets fade-in et fade-out, mais je vais fournir seulement la base ici:

<img class="thumbnail" rel="image01-hr.jpg" src="image01-thumb.jpg" /> 
<img class="thumbnail" rel="image02-hr.jpg" src="image02-thumb.jpg" /> 
<img class="preview" src="image01-hr.jpg" /> 

$(".thumbnail").click(function(e){ 
    $(".preview").attr("src", $(this).attr("rel")); 
});