FlexSlider cliquez sur les images pour faire apparaître la capacité de la LightBox

Question

J'ai une fiche FlexSlider/Carousel qui fonctionne très bien sur mon site. Maintenant, je voudrais pouvoir cliquer sur l'image Slider pour faire apparaître une lightbox comme plug in afin que je puisse 'faire exploser' les images pour pouvoir voir plus de détails. J'ai lu et j'ai essayé d'implémenter un lightbox: un vrai attribut qui a l'air de faire ce que je cherche, mais ça ne semble pas marcher. Je ne peux pas cliquer sur l'image du curseur pour faire quoi que ce soit.

<div id="main" role="main"> 
    <section class="slider"> 
    <div id="slider" class="flexslider"> 
     <ul class="slides"> 
     <li> 
      <img src="~/Images/Products/WoodenSign/PNG/1-AMORE.PNG" /> 
    </li> 
    <li> 
     <img src="~/Images/Products/WoodenSign/PNG/2-LOVE.PNG" /> 
    </li> 
     </ul> 
    </div> 
    <div id="carousel" class="flexslider"> 
     <ul class="slides"> 
     <li> 
      <img src="~/Images/Products/WoodenSign/PNG/1-AMORE.PNG" /> 
    </li> 
    <li> 
     <img src="~/Images/Products/WoodenSign/PNG/2-LOVE.PNG" /> 
    </li>    
     </ul> 
    </div> 
    </section> 
</div> 

<!-- jQuery --> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js">\x3C/script>')</script> 

<!-- FlexSlider --> 
<script defer src="~/Scripts/jquery.flexslider.js"></script> 

<script type="text/javascript"> 
$(function(){ 
    SyntaxHighlighter.all(); 
}); 
$(window).load(function(){ 
    $('#carousel').flexslider({ 
    animation: "slide", 
    controlNav: false, 
    animationLoop: true, 
    slideshow: true, 
    itemWidth: 100, 
    itemMargin: 0, 
    asNavFor: '#slider' 
    }); 

    $('#slider').flexslider({ 
    animation: "slide", 
    controlNav: false, 
    animationLoop: true, 
    slideshow: true, 
    sync: "#carousel", 
    start: function(slider){ 
     $('body').removeClass('loading'); 
    }, 
    lightbox: true 
    }); 
}); 

Answer 1

Juste au cas où quelqu'un a besoin. Essayez ceci:

<div id="slider" class="flexslider"> 
 
    <ul class="slides"> 
 
     <li> 
 
      <a href="~/Images/Products/WoodenSign/PNG/1-AMORE.PNG" data-lightbox="1000 500"> 
 
       <img src="~/Images/Products/WoodenSign/PNG/1-AMORE.PNG" /> 
 
      </a> 
 
     </li> 
 
     <li> 
 
      <img src="~/Images/Products/WoodenSign/PNG/2-LOVE.PNG" /> 
 
     </li> 
 
     </ul> 
 
</div>

Answer 2

Une solution que je utilise sur un projet WordPress est en cours "Lightbox Responsive" par dFactory. Il utilise l'élément HTML rel = "lightbox" comme un hook. Galeries instantanées de lightbox!

<div class="flexslider"> 
    <ul class="slides"> 
     <li> 
      <a href="large-image-01.jpg" rel="lightbox"> 
       <img src="thumb-image-01.jpg" /> 
      </a> 
     </li> 
     <li> 
      <a href="large-image-01.jpg" rel="lightbox"> 
       <img src="thumb-image-01.jpg" /> 
      </a> 
     </li> 
     </ul> 
</div>