Comment utiliser jQuery pour créer un hachage avec signet?

Question

J'ai une seule URL que j'utilise comme galerie d'images. A cette URL est un coup de pouce div (je ne montrant quatre pouces pour un souci de concision):

<div id="thumbs"> 
<img src="graphics/thumbs/01.jpg" width="190" height="190" class="thumb objects" id="project01" /> 
<img src="graphics/thumbs/08.jpg" width="190" height="190" class="thumb web" id="project08" /> 
<img src="graphics/thumbs/14.jpg" width="190" height="190" class="thumb freehand" id="project14"/> 
<img src="graphics/thumbs/04.jpg" width="190" height="190" class="thumb freehand objects" id="project04" /></div> 

et un vide div appelé #content:

<div id="content"></div> 

et un div caché appelé #preload:

<div id="preload"> 
<span id="project01_content"><img src="graphics/010.jpg" /></span> 
<span id="project02_content"><img src="graphics/022.jpg" /><img src="graphics/021.jpg" /><img src="graphics/023.jpg" /><img src="graphics/020.jpg" /></span> 
<span id="project03_content"><img src="graphics/030.jpg" width="450" height="600" /><img src="graphics/031.jpg" width="450" height="600" /></span> 
<span id="project04_content"><img src="graphics/040.jpg" width="775" height="600" /><img src="graphics/041.jpg" width="775" height="600" /></span></div> 

Mon jQuery utilise l'ID de la vignette cliqué pour clone() l'im âges à partir du span correspondant et les déposer dans #content en utilisant la méthode html(). Cela fonctionne très bien. Maintenant, je voudrais retourner à mysite.com/#project01 et avoir #content déjà rempli avec le projet 01.

Comment est-ce que je peux donner à chaque image une URL hachée qui appellera le même état de jQuery?

Answer 1

Vous pouvez simplement effectuer un clic sur ce pouce, dès que la page se charge et votre code actuel doit exécuter, comme ceci:

$(function() { 
    if(window.location.hash.indexOf('project') > -1) 
    $(window.location.hash).click(); 
}); 

Il utilise la window.location.hash property qui serait "#project01" dans votre exemple URL .. .so c'est déjà un #ID selector, nous vérifions juste que c'est un hachage qui nous intéresse, puis en utilisant ce sélecteur pour lancer un .click(). Assurez-vous simplement que cela fonctionne après votre gestionnaire de clic en cours pour les pouces est lié.