Jquery responsive cliquable image diaporama

Je suis nouveau à JS et il a été un ours pour moi d'apprendre. Je travaille à la création d'un site réactif en utilisant des requêtes média. Je veux un diaporama cliquable qui change la photo principale lorsque vous cliquez sur l'une des trois vignettes.Jquery responsive cliquable image diaporama

J'ai décidé de garder le diaporama simple. J'ai une div avec une image principale et trois vignettes en dessous. Quand je clique sur une vignette, je veux que la classe div mainPhoto change pour une classe différente avec un background-image différent. J'utilise la fonction jquery .on("click", et .addClass pour changer la classe div lorsque l'on clique sur l'une des vignettes. Je fais cela parce que je vais utiliser des requêtes média. Si l'écran est plus petit ou plus grand, les classes div que j'appelle auront une image de fond différente pour s'adapter à la fenêtre plus grande ou plus petite. Je n'ai pas encore ajouté le code @media. Mais finalement, j'aurai différentes images d'arrière-plan pour chaque classe en fonction de certaines tailles d'écran. En ce moment, je veux juste rester simple et créer le script qui fonctionne en premier. Mon problème est que lorsque je clique sur les vignettes, cela ne fonctionne qu'une seule fois et cela ne fonctionne que dans l'ordre si je clique sur thumbnailThree avant thumbnailTwo Je ne peux pas cliquer sur les autres. Je veux être en mesure de cliquer sur tous les trois comme temps d'argent que je veux. Peut-être qu'il existe un moyen plus simple de le faire, mais je suis nouveau à JS et jQuery. Ci-dessous mon code:

<style> 
    body { 
    margin: 0; 
    padding: 10px; 
    font-size: 16px; 
    color: #000000; 
    background-color: #fff; 
    } 
    h1 { 
    font-size:1.5em; 
    } 
    .wrap { 
    position: relative; 
    margin: 0 auto; 
    padding: 0; 
    width: 800px; 
    } 
    #mainDiv { 
    float: left; 
    width: 800px; 
    background-color:#888; 
    } 
    .mainPhoto { 
    float: left; 
    width: 800px; 
    height: 600px; 
    background-image: url(images/mainPhoto); 
    background-repeat:no-repeat; 
    } 
    .mainPhotoTwo { 
    background-image:url(images/mainPhotoTwo); 
    } 
    .mainPhotoThree { 
    background-image:url(images/mainPhotoThree); 
    } 
    #secondaryDiv{ 
    float:left; 
    width: 780px; 
    margin:0; 
    padding:10px; 
    font-size: .9em; 
    color: #fff; 
    background-color: #333; 
    } 
    #thumbOne { 
    float:left; 
    width:250px; 
    height:250px; 
    margin:10px 0px 0px 0px; 
    padding:0; 
    background-image:url(images/thumbOne); 
    background-repeat:no-repeat; 
    } 
    #thumbTwo { 
    float:left; 
    width:250px; 
    height:250px; 
    margin:10px 0px 0px 10px; 
    padding:0; 
    background-image:url(images/thumbTwo); 
    background-repeat:no-repeat; 
    } 
    #thumbThree { 
    float:left; 
    width:250px; 
    height:250px; 
    margin:10px 0px 0px 10px; 
    padding:0; 
    background-image:url(images/thumbThree); 
    background-repeat:no-repeat; 
    } 
    .clearDiv{ 
    clear:both; 
    line-height:1px; 
    } 
</style> 
</head> 
<body> 
    <div class="wrap"> 
    <div class="mainPhoto"> 
    </div> 
    <div id="secondaryDiv"> 
     <h1>Title Test</h1> 
     <p>A paragraph of text</p> 
     <div id="thumbOne"></div> 
     <div id="thumbTwo"></div> 
     <div id="thumbThree"></div> 
     <div class='clearDiv'></div> 
    </div> 
    </div> 
</body> 
<script> 
    $(document).ready(function(){ 
    $('#thumbOne').on("click", function(){ 
     $('div.mainPhoto').addClass('mainPhoto'); 
    }); 
    }); 
    $(document).ready(function(){ 
    $('#thumbTwo').on("click", function(){ 
     $('div.mainPhoto').addClass('mainPhotoTwo'); 
    }); 
    }); 
    $(document).ready(function(){ 
    $('#thumbThree').on("click", function(){ 
     $('div.mainPhoto').addClass('mainPhotoThree'); 
    }); 
    }); 
</script>

Source

2013-10-17 Charlie

Show de la vanille il s'il vous plaît à jsFiddle, en ordet pour attraper le virus plus rapidement. –

Ici, vous allez: http://jsfiddle.net/JQ7Rk/

Le problème a été gardé .addClass clouant sur les classes à votre div, au lieu de les remplacer. Une fois qu'il a cloué sur les trois classes, .addClass a cessé de les ajouter (parce qu'ils étaient déjà allumés!). Ainsi, faire en sorte que le dernier était permanent!

Editer: Oh, j'ai presque oublié. Je n'avais pas vos photos, alors je les ai remplacées par des chats mignons.

j'ai décidé de faire mes changements dans

$(document).ready(function(){ 
    $('#thumbOne').on("click", function(){ 
     var main = document.getElementById("mainPhoto"); 
     main.className = "mainPhoto"; 
    }); 
    }); 

    $(document).ready(function(){ 
    $('#thumbTwo').on("click", function(){ 
     var main = document.getElementById("mainPhoto"); 
     main.className = "mainPhoto mainPhotoTwo"; 
    }); 
}); 

    $(document).ready(function(){ 
    $('#thumbThree').on("click", function(){ 
     var main = document.getElementById("mainPhoto"); 
     main.className = "mainPhoto mainPhotoThree"; 
    }); 
    });

Source

2013-10-17 20:51:21

Merci beaucoup! C'était exactement ce que je cherchais – Charlie

Jquery responsive cliquable image diaporama

Répondre

Questions connexes