afficher la 1ère image à l'intérieur de l'ID

Question

Intéressé de savoir si je peux utiliser jQuery pour trouver la première image sur la page et l'afficher à l'intérieur d'un redimensionné à une vignette avec cliquer pour agrandir. Par exemple, sur ce blog particulier, lorsque le client ajoute une image à la publication, jQuery trouve la première image et l'affiche sous la forme d'une vignette cliquable dans un emplacement particulier. Ce serait idéal si l'image détaillée pouvait s'afficher dans thickbox, facebox ou dans une autre fenêtre jQuery overlay.

Merci d'avance pour vos idées. Jackson

Answer 1

Vous pouvez utiliser le sélecteur :first pour trouver la première image, puis en utilisant le clonage, vous pouvez copier l'image à un autre emplacement et la modifier à partir de là.

$(document).ready(function() { 

    var firstImage = $('img:first'); 
    var link = $('<a />') 
        .attr('href', '#') 
        .append($('img:first').clone().css({ width:100, height:100 })) 
        .append($('<div />').text('Click to Enlarge')) 
        .click(function(e) { 
         e.preventDefault(); 
         // showDialog(); 
        }); 
    $('.imageThumbnail').append(link); 

    $('.imageDialog').append(firstImage.clone()); 

}); 

Answer 2

Pour trouver la première image de votre page, vous pouvez utiliser le sélecteur :first.

$("img:first") sélectionnera le premier élément img.

Si vous souhaitez restreindre la recherche dans un élément parent, vous pouvez

$("#parentElemId").find("img:first") 

Si vous pouvez donner ces éléments d'image alors un nom de classe que vous pouvez faire

$("img.classname:first") 

Answer 3

Comme les autres membres ont mentionné, vous pouvez obtenir la première image en utilisant img: d'abord. La manière d'afficher la plus simple comme une vignette serait:

$(document).append("<img src='" + $("img:first").attr("src") + "' alt='' class='thickbox' style='width: 50px; height: 50px;' />"); 

La partie class='thickbox' est pour le plug-in thickbox

Voici un exemple plus spécifique en fonction de votre commentaire:

Si les regards de données d'origine quelque chose comme ceci:

<div id="thumbs"></div> 
<div id="article"> 
    <img src="..." alt="" /> 
    Some text.. 
</div> 

Vous pouvez utiliser quelque chose comme ceci:

var images = ""; 

$("#article img:first").each(function() { 
    images += "<img src='" + $(this).attr('src') + "' width='45' class='thickbox' alt='Click to enlarge' /> "; 
}); 

$("#thumbs").append(images);