2010-04-06 5 views
1

Je le code suivant:reformatage une galerie de photos à base de table à une galerie basée UL

var table = $('.photogalleryTable').before('<ul class="photogallery"></ul>') 
table.find('td a').wrap('<li>').parent().appendTo('ul.photogallery'); 
table.remove(); 

Ce code trouve une table avec une liste de photos et recode à utiliser une liste non ordonnée à la place. Le script fonctionne parfaitement sauf pour un problème. S'il y a 2 galeries sur une page, le script va saisir toutes les images et les reformater en une seule liste. Comme le CMS que j'utilise étiquette chaque table de galerie avec .photogalleryTable, je ne suis pas sûr de savoir comment empêcher le script de toucher les autres galeries. Ce que je voudrais avoir, c'est que le script reformate la première instance et passe ensuite à l'instance suivante, en gardant la liste des photos séparée Est-ce possible?

Voici un exemple du code de la table de base;

<table cellspacing="0" class="photogalleryTable"><tbody><tr><td class="photogalleryItem"><a title="" href="/images/varsity_basketball/alexdefending.jpg" rel="lightbox[12828]" onclick="myLightbox.start(this);return false;"><img border="0" alt="" src="/Utilities/ShowThumbnail.aspx?W=80&amp;H=80&amp;Img=%5c%5c192.168.61.7%5canf01%5cyvir%5cfvgrf1%5c67982%5cSbyqref%5c%5cvzntrf%5cinefvgl_onfxrgonyy%5cnyrkqrsraqvat.wct&amp;USM=1"></a></td><td class="photogalleryItem"><a title="" href="/images/varsity_basketball/cheerweb.jpg" rel="lightbox[12828]" onclick="myLightbox.start(this);return false;"><img border="0" alt="" src="/Utilities/ShowThumbnail.aspx?W=80&amp;H=80&amp;Img=%5c%5c192.168.61.7%5canf01%5cyvir%5cfvgrf1%5c67982%5cSbyqref%5c%5cvzntrf%5cinefvgl_onfxrgonyy%5cpurrejro.wct&amp;USM=1"></a></td><td class="photogalleryItem"><a title="" href="/images/varsity_basketball/hoopcheerteamcombo.jpg" rel="lightbox[12828]" onclick="myLightbox.start(this);return false;"><img border="0" alt="" src="/Utilities/ShowThumbnail.aspx?W=80&amp;H=80&amp;Img=%5c%5c192.168.61.7%5canf01%5cyvir%5cfvgrf1%5c67982%5cSbyqref%5c%5cvzntrf%5cinefvgl_onfxrgonyy%5cubbcpurregrnzpbzob.wct&amp;USM=1"></a></td><td class="photogalleryItem"><a title="" href="/images/varsity_basketball/piercepipes.jpg" rel="lightbox[12828]" onclick="myLightbox.start(this);return false;"><img border="0" alt="" src="/Utilities/ShowThumbnail.aspx?W=80&amp;H=80&amp;Img=%5c%5c192.168.61.7%5canf01%5cyvir%5cfvgrf1%5c67982%5cSbyqref%5c%5cvzntrf%5cinefvgl_onfxrgonyy%5ccvreprcvcrf.wct&amp;USM=1"></a></td></tr><tr><td class="photogalleryItem"><a title="" href="/images/varsity_basketball/scrappyonfloor.jpg" rel="lightbox[12828]" onclick="myLightbox.start(this);return false;"><img border="0" alt="" src="/Utilities/ShowThumbnail.aspx?W=80&amp;H=80&amp;Img=%5c%5c192.168.61.7%5canf01%5cyvir%5cfvgrf1%5c67982%5cSbyqref%5c%5cvzntrf%5cinefvgl_onfxrgonyy%5cfpencclbasybbe.wct&amp;USM=1"></a></td><td class="photogalleryItem"><a title="" href="/images/varsity_basketball/teamabove.jpg" rel="lightbox[12828]" onclick="myLightbox.start(this);return false;"><img border="0" alt="" src="/Utilities/ShowThumbnail.aspx?W=80&amp;H=80&amp;Img=%5c%5c192.168.61.7%5canf01%5cyvir%5cfvgrf1%5c67982%5cSbyqref%5c%5cvzntrf%5cinefvgl_onfxrgonyy%5cgrnznobir.wct&amp;USM=1"></a></td><td class="photogalleryItem"><a title="" href="/images/varsity_basketball/teamarms.jpg" rel="lightbox[12828]" onclick="myLightbox.start(this);return false;"><img border="0" alt="" src="/Utilities/ShowThumbnail.aspx?W=80&amp;H=80&amp;Img=%5c%5c192.168.61.7%5canf01%5cyvir%5cfvgrf1%5c67982%5cSbyqref%5c%5cvzntrf%5cinefvgl_onfxrgonyy%5cgrnznezf.wct&amp;USM=1"></a></td><td class="photogalleryItem"><a title="" href="/images/varsity_basketball/yeisson.jpg" rel="lightbox[12828]" onclick="myLightbox.start(this);return false;"><img border="0" alt="" src="/Utilities/ShowThumbnail.aspx?W=80&amp;H=80&amp;Img=%5c%5c192.168.61.7%5canf01%5cyvir%5cfvgrf1%5c67982%5cSbyqref%5c%5cvzntrf%5cinefvgl_onfxrgonyy%5clrvffba.wct&amp;USM=1"></a></td></tr><tr><td colspan="4" class="photogalleryNavigation"></td></tr></tbody></table> 

Répondre

0

Je pense que cela devrait aider: http://api.jquery.com/each/

Je ne sais pas assez pour vous dire exactement comment la mettre en œuvre, mais je suis assez sûr en utilisant cette fonction devrait vous obtenir le résultat souhaité.

EDIT

Peut-être essayer

var table = $('.photogalleryTable').before('<ul class="photogallery"></ul>') 
table.each(function(){find('td a').wrap('<li>').parent().appendTo('ul.photogallery')}; 
table.remove(); 

Désolé, je ne pouvais pas être plus utile,

Vian

1

Essayez ceci:

$('.photogalleryTable').each(function(i){ 
$(this) 
    .before('<ul class="photogallery"></ul>') 
    .find('td a').wrap('<li>').parent().appendTo('ul.photogallery:eq('+i+')'); 
}).remove(); 
+0

Je n'ai pas travaillé pour une raison quelconque. Aucune suggestion? –

+0

Oups, je l'ai laissé 'table.remove()' à cause de votre code .. le code a été corrigé. – Mottie

Questions connexes