jQuery Mehrere Galerien anzeigen/ausblenden

Question

Ich habe drei Galerien auf einer Seite und möchte, dass sie mit einfacher jQuery show/hide-Technik angezeigt werden.

Galerie funktioniert perfekt, aber vielleicht gibt es einige weitere Vorschau-Galerien in der Zukunft angezeigt werden.

Was ich bisher getan haben:

$(document).ready(function(){ 

$('#gallery1').click(function() { 
    $('#gallery').hide(); 
    $('#previewGallery1').show(); 
}); 

$('#showGallery1').click(function() { 
    $('#gallery').show(); 
    $('#previewGallery1').hide(); 
}); 

$('#gallery2').click(function() { 
    $('#gallery').hide(); 
    $('#previewGallery2').show(); 
}); 

$('#showGallery2').click(function() { 
    $('#gallery').show(); 
    $('#previewGallery2').hide(); 
}); 

$('#gallery3').click(function() { 
    $('#gallery').hide(); 
    $('#previewGallery3').show(); 
}); 

$('#showGallery3').click(function() { 
    $('#gallery').show(); 
    $('#previewGallery3').hide(); 
}); 

}); 

https://jsfiddle.net/stef75/ah3Lxkdy/

etwas Hilfe benötigen weitere generische Code hinzufügen hier :)

Thx im Voraus!

Answer 1

Sie tun können, es HTML-Daten mit Attributen

$(document).ready(function(){ 
 

 
    $("[data-show-gallery]").click(function() { 
 
    $('[data-gallery-preview]').hide(); // feel free to use a class here insted 
 
    $('[data-gallery='+$(this).attr("data-show-gallery")+']').show(); 
 
    }); 
 

 
    $("[data-close-gallery]").click(function() {// feel free to use a class here insted 
 
    $('[data-gallery-preview]').show(); // feel free to use a class here insted 
 
    $('[data-gallery]').hide(); // feel free to use a class here insted 
 
    }); 
 

 
});

#gallery { 
 
    background: orange; 
 
    width: 100%; 
 
    } 
 

 
    .previewImage { 
 
    border: 1px solid red; 
 
    background: green; 
 
    height: 250px; 
 
    width: 30%; 
 
    margin: 1%; 
 
    float: left; 
 
    cursor: pointer; 
 
    } 
 

 
    .previewGallery { 
 
    margin: 1%; 
 
    background: blue; 
 
    } 
 

 
    [data-gallery] { 
 
    display: none; 
 
    } 
 

 
    .previewThumb { 
 
    background: orange; 
 
    float: left; 
 
    width: 150px; 
 
    height: 150px; 
 
    margin: 1%; 
 
    } 
 
    
 
a { color: #fff; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div>Above gallery...</div> 
 

 
<div id="gallery" data-gallery-preview> 
 
    <div class="previewImage" data-show-gallery="1">Preview-Image Gallery 1</div> 
 
    <div class="previewImage" data-show-gallery="2">Preview-Image Gallery 2</div> 
 
    <div class="previewImage" data-show-gallery="3">Preview-Image Gallery 3</div> 
 
</div> 
 

 
<div style="clear: both;"></div> 
 

 
<div data-gallery="1"> 
 
    <div class="previewGallery"> 
 
    <h2>Preview-Gallery 1</h2> 
 
    <div class="previewThumb">thumb 1</div> 
 
    <div class="previewThumb">thumb 2</div> 
 
    <div class="previewThumb">thumb 3</div> 
 
    <div class="previewThumb">thumb 4</div> 
 
    <div class="previewThumb">thumb 5</div> 
 
    <div class="previewThumb">thumb 6</div> 
 

 
    <div style="clear: both;"></div> 
 
    <a href="#" data-close-gallery>&lt;&lt; back</a> 
 
    </div> 
 
</div> 
 
<div data-gallery="2"> 
 
    <div class="previewGallery"> 
 
    <h2>Preview-Gallery 2</h2> 
 
    <div class="previewThumb">thumb 1</div> 
 
    <div class="previewThumb">thumb 2</div> 
 
    <div class="previewThumb">thumb 3</div> 
 
    <div class="previewThumb">thumb 4</div> 
 
    <div class="previewThumb">thumb 5</div> 
 
    <div class="previewThumb">thumb 6</div> 
 
    <div style="clear: both;"></div> 
 
    <a href="#" data-close-gallery>&lt;&lt; back</a> 
 
    </div> 
 
</div> 
 
<div data-gallery="3"> 
 
    <div class="previewGallery"> 
 
    <h2>Preview-Gallery 3</h2> 
 
    <div class="previewThumb">thumb 1</div> 
 
    <div class="previewThumb">thumb 2</div> 
 
    <div class="previewThumb">thumb 3</div> 
 
    <div class="previewThumb">thumb 4</div> 
 
    <div class="previewThumb">thumb 5</div> 
 
    <div class="previewThumb">thumb 6</div> 
 
    <div style="clear: both;"></div> 
 
    <a href="#" data-close-gallery>&lt;&lt; back</a> 
 
    </div> 
 
</div> 
 

 
<div>Below gallery...</div>