2012-02-22 4 views
1

J'ai la galerie suivante créée en jQuery: -Problème avec jQuery lightbox plugin/galerie

<script type="text/javascript"> 
    $(function() { 
     $(".image").click(function() { 
      var image = $(this).attr("rel"); 
      $('#galleryImage').hide(); 
      $('#galleryImage').fadeIn('slow'); 
      $('#galleryImage').html('<img src="' + image + '"/>'); 
      return false; 
     }); 
     $("#galleryImage").click(function() { 
      var imageLarge = $(this).attr("rel"); 
      $('#galleryImage').html('<a href="' + imageLarge + '"/>'); 
      $('#galleryImage a').lightBox(); 
     }); 
    }); 

<div id="galleryImage"> 

     <a href=""><img src="../../Images/Design/Gallery/HavellHouse/havellhouse-small1.jpg" width="337" height="223" alt="forbury court" /></a> 
</div> 

    <a href="#" rel="../../Images/Design/Gallery/HavellHouse/havellhouse-small1.jpg" class="image"> 
     <img src="../../Images/Design/Gallery/HavellHouse/Thumbs/havellhouse-thumb1.jpg" class="thumb" border="0" /></a> 

    <a href="#" rel="../../Images/Design/Gallery/HavellHouse/havellhouse-small2.jpg" class="image"> 
     <img src="../../Images/Design/Gallery/HavellHouse/Thumbs/havellhouse-thumb2.jpg" class="thumb" border="0" /></a> 

    <a href="#" rel="../../Images/Design/Gallery/HavellHouse/havellhouse-small3.jpg" class="image"> 
     <img src="../../Images/Design/Gallery/HavellHouse/Thumbs/havellhouse-thumb3.jpg" class="thumb" border="0" /></a> 

qui prend la valeur d'attribut rel quand une vignette est cliqué et il insère dans le galleryImage div permettant à l'utilisateur de sélectionner différentes images via les vignettes qui affichent tous en un seul endroit. Maintenant, ce que je veux faire est d'appliquer lightbox à l'image actuelle dans le div #galleryImage, de sorte que si un utilisateur clique dessus, une version encore plus grande surgit via le plugin lightbox, mais je ne peux pas tout à fait obtenir mon la tête autour de la façon de le faire, c'est ce que j'ai jusqu'à présent, je suis dans la bonne direction?

+0

bosse pour l'aide .. – dtsg

Répondre

2

le fixe, utilisé:

$(".image").click(function() { 
    var image = $(this).attr("rel"); 
    var imageLarge = $(this).attr("title"); 
    $("#galleryImage img").attr("src",image); 
    $("#galleryImage a").attr("href", imageLarge); 
    return false; 
} 

En utilisant la valeur de titre qui stocke une URL pour la grande image, tirée de la vignette sélectionnée et réglage juste la valeur d'attribut dans jQuery plutôt que d'insérer un tas de HTML droite dans le div