Jquery pour activer plusieurs diaporamas et popups

Question

J'ai un peu de difficulté avec le code que j'ai mis en place. Je suis en train de mettre en place une page avec différents projets. Quand on clique sur, l'idée est qu'il y aura un popup avec une image en taille réelle. Certains projets ont plusieurs images, j'ai donc ajouté une propriété de diaporama. Je suis en train de dimensionner le popup en ayant jquery déterminer la largeur et la hauteur img de sorte que chaque fenêtre aura une taille unique basée sur la première image. Lorsque je configure ces deux scripts seuls, ils fonctionnent correctement, mais maintenant que je les implémente ensemble, la taille de l'img n'est pas lue. Un autre problème est que puisque le diaporama traite une liste d'images, il cache tout sauf le premier ... Cependant ce filtre cache aussi toutes les autres images dans d'autres projets.

Je voudrais également positionner le popup ouvert centré horizontalement et 10% du haut ... J'ai le code là-dedans pour la fenêtre de conteneur mais je n'arrive pas à le faire fonctionner pour une raison quelconque car cela me donne une position étrange si je mets juste à 10% et 25% de gauche ...

Voici le code que je me sers pour les popups sans diaporama:

<div class="projectPopup" id="lova"> 
    <a class="close">Close &times;</a> 
    <img src="/img/lova_popup_slide01.jpg" alt="" /> 
    <p class="description">Description</p> 
</div> 

Voici le code I utilise pour les popups avec un diaporama:

<div class="projectPopup" id="rbex"> 
    <a class="close">Close &times;</a> 
<ul class="slideImages"> 
      <li><a href="#slide1" class="active" >1</a>&nbsp;/&nbsp;</li> 
      <li><a href="#slide2">2</a>&nbsp;/&nbsp;</li> 
      <li><a href="#slide3">3</a>&nbsp;/&nbsp;</li> 
      <li><a href="#slide4">4</a>&nbsp;/&nbsp;</li> 
      <li><a href="#slide5">5</a>&nbsp;/&nbsp;</li> 
      <li><a href="#slide6">6</a>&nbsp;/&nbsp;</li> 
      <li><a href="#slide7">7</a>&nbsp;/&nbsp;</li> 
      <li><a href="#slide8">8</a></li> 
     </ul> 
     <img id="slide1" src="/img/rbex_popup_slide01.jpg" alt="Image 1 slideshow" /> 
     <img id="slide2" src="/img/rbex_popup_slide02.jpg" alt="Image 2 slideshow" /> 
     <img id="slide3" src="/img/rbex_popup_slide03.jpg" alt="Image 3 slideshow" /> 
     <img id="slide4" src="/img/rbex_popup_slide04.jpg" alt="Image 4 slideshow" /> 
     <img id="slide5" src="/img/rbex_popup_slide05.jpg" alt="Image 5 slideshow" /> 
     <img id="slide6" src="/img/rbex_popup_slide06.jpg" alt="Image 6 slideshow" /> 
     <img id="slide7" src="/img/rbex_popup_slide07.jpg" alt="Image 7 slideshow" /> 
     <img id="slide8" src="/img/rbex_popup_slide08.jpg" alt="Image 8 slideshow" /> 
     <p class="description">Description</p> 
</div> 

Voici le Jquery J'utilise:

$(document).ready(function() { 
    //Hiding all Divs 
    $(".projectPopup").hide(); 

    //Setting DIV name to nothing 
    var actualOpenID = ""; 

    //Slideshow Image to hide rest 
    var image = $('.projectPopup > img'); 
    image.hide().filter(':first').show(); 

    //Determine popup width and height 
    var container = $(".projectPopup", this); 
    var popupWidth = container.find("img").width()+10; 
    var popupHeight = container.find("img").height()+60; 

    //Determine window width and height 
    var windowWidth = document.documentElement.clientWidth; 
    var windowHeight = document.documentElement.clientHeight; 
    container.css("width" , popupWidth); 
    container.css("height" , popupHeight); 

    //Find & Open 
    $(".projectThumb").click(function(){ 
      if (actualOpenID !== "") { 
        $("div[id="+actualOpenID+"]").hide(); 
      } 
      var newID = $(this).children("img").attr("name"); 
      $("div[id="+newID+"]").show(); 
      actualOpenID = newID; 
      }); 

    //Set popup CSS 
    container.css({"position": "fixed", "background": "#000", "top": "10%", "left": "20%"}); 
    $('ul.slideImages li a').click(function() { 
      if (this.className.indexOf('active') == -1){ 
        image.hide(); 
        image.filter(this.hash).show(); 
        $('ul.slideImages li a').removeClass('active'); 
        $(this).addClass('active'); 
      } 
      return false; 
    }); 
    //Close property 
    $("a.close").click(function (e) { 
      e.preventDefault(); 
      $(this).parent().hide(); 
      actualOpenID = ""; 
    }); 
    }); 

Les problèmes peuvent être vus ici:

Le diaporama de travail lui-même ici: http://www.samuelfarfsing.com/slides.php

Toute aide est très appréciée !

Answer 1

Il semblerait que vous ayez quelques problèmes avec votre javascript. Voir http://jsbin.com/ahide pour une version de travail et le code source.

D'abord,

//Slideshow Image to hide rest 
var image = $('.projectPopup > img'); 
image.hide().filter(':first').show(); 

Ce code va cacher toutes les images dans les fenêtres pop-up et seulement montrent la première image de la collection qui est à l'intérieur du A.Effect projectPopup. Puisque vous devez montrer la première image dans chaque pop-up, boucle à travers eux comme individuellement:

//Slideshow Image to hide rest 
$(".projectPopup").each(function(){ 
    $("img", this).hide().filter(":first").show(); 
}); 

Le problème avec le redimensionnement de la pop-up a à voir avec obtenir la taille de la première img en utilisant la largeur() et la hauteur() . Ces méthodes retourneront 0 si le img est caché d'une certaine manière. Pour résoudre ce problème, en bouclant les projectPopups, affichez-les temporairement hors de l'écran pour pouvoir obtenir la largeur et la hauteur de la première image. Cela devrait résoudre ce problème:

//Slideshow Image to hide rest 
$(".projectPopup").each(function(){ 
    $("img", this).hide().filter(":first").show(); 

    //Determine popup width and height 
var container = $(this); 

if (container.is(":hidden")) { 
      container.css({ position: "absolute", visibility: "hidden", display: "block" }); 
     } 

var popupWidth = container.find("img:first").width()+10; 
var popupHeight = container.find("img:first").height()+60; 

//Determine window width and height 
var windowWidth = document.documentElement.clientWidth; 
var windowHeight = document.documentElement.clientHeight; 
container.css("width" , popupWidth); 
container.css("height" , popupHeight); 

//Set popup CSS 
container.css({"position": "fixed", "background": "#000", "top": "10%", "left": "20%", visibility: "", display: "none"}); 

}); 

Maintenant, pour les faire centrés au milieu de l'écran, vous pouvez définir la propriété gauche à (WindowWidth/2) - (popupWidth/2) + "px"

l'ensemble $ (document) .ready() doit être le suivant:

$(document).ready(function() { 
//Hiding all Divs 
$(".projectPopup").hide(); 

//Setting DIV name to nothing 
var actualOpenID = ""; 

//Slideshow Image to hide rest 
$(".projectPopup").each(function(){ 
    $("img", this).hide().filter(":first").show(); 

    //Determine popup width and height 
var container = $(this); 

if (container.is(":hidden")) { 
      container.css({ position: "absolute", visibility: "hidden", display: "block" }); 
     } 

var popupWidth = container.find("img:first").width()+10; 
var popupHeight = container.find("img:first").height()+60; 

//Determine window width and height 
var windowWidth = document.documentElement.clientWidth; 
var windowHeight = document.documentElement.clientHeight; 
container.css("width" , popupWidth); 
container.css("height" , popupHeight); 

//Set popup CSS 
container.css({"position": "fixed", "background": "#000", "top": "10%", "left": (windowWidth/2) - (popupWidth/2) + "px", visibility: "", display: "none"}); 

}); 



//Find & Open 
$(".projectThumb").click(function(){ 
     if (actualOpenID !== "") { 
       $("div[id="+actualOpenID+"]").hide(); 
     } 
     var newID = $(this).children("img").attr("name"); 
     $("div[id="+newID+"]").show(); 
     actualOpenID = newID; 
     }); 


$('ul.slideImages li a').click(function() { 
     if (this.className.indexOf('active') == -1){ 
       var images = $(this).closest(".projectPopup").find("img"); 
       images.hide(); 
       images.filter(this.hash).show(); 
       $('ul.slideImages li a').removeClass('active'); 
       $(this).addClass('active'); 
     } 
     return false; 
}); 
//Close property 
$("a.close").click(function (e) { 
     e.preventDefault(); 
     $(this).parent().hide(); 
     actualOpenID = ""; 
}); 
});