Zeigen Sie ein div, alle anderen auszublenden klicken Sie auf

Habe ich eine einfache Bild/video-Galerie, ich will animieren mit jQuery. Alles was ich will in der Lage sein zu tun ist, wenn jemand auf einen link klickt der .big div mit der ID gesetzt ist display:block; opacity:1 und alle anderen divs gesetzt display:none; opacity:0

Dies ist das markup für meine Galerie;

<div id="gallery">

    <div class="main">

        <div id="big-1" class="big"><!-- image /video here --></div>
        <div id="big-2" class="big"><!-- image /video here --></div>
        <div id="big-3" class="big"><!-- image /video here --></div>

    </div>

    <div class="thumbnails">

        <a id="1" href="#"><img src="images/thumb1.jpg" alt="#"/></a>
        <a id="2" href="#"><img src="images/thumb1.jpg" alt="#"/></a>
        <a id="3" href="#"><img src="images/thumb1.jpg" alt="#"/></a>

    </div>

</div>

Standardmäßig alle .big divs gesetzt display:none; opacity:0 außer dem ersten.

Sie können alle ausblenden .big [ $('.big') ] Klassen und dann zeigen, in der nur die div-id [ $('#div' + id) ] auf "fertig" callback".
Verwenden Sie nicht dieselbe ID für mehrere Elemente. Seine schrecklichen.
Sie möchten Vorschaubild auch angezeigt werden, nach .big geklickt oder wollen einfach nur die Anzeige geklickt .big?

InformationsquelleAutor Dean Elliott | 2013-11-07

jquery

Hier ist eine einfachere Lösung, ohne die Notwendigkeit von ids oder zufällige Attribute:

HTML:

<div id="gallery">
<div class="main">
    <div class="big show"><!-- image /video here --></div>
    <div class="big"><!-- image /video here --></div>
    <div class="big"><!-- image /video here --></div>
</div>

<div class="thumbnails">
    <a href="#"><img src="images/thumb1.jpg" alt="#"/></a>
    <a href="#"><img src="images/thumb1.jpg" alt="#"/></a>
    <a href="#"><img src="images/thumb1.jpg" alt="#"/></a>
</div>

jQuery:

$('.thumbnails a').on('click',function(){
   var eq = $(this).index();

   $('.main .big').removeClass('show');
   $('.main .big').eq(eq).addClass('show');
});

Im Grunde, was es tut, Holen Sie sich die position der Miniaturansicht geklickt und dann zeigen Sie das Bildergalerie-element in der gleichen position (hinzufügen einer Klasse .show die display:block zum Beispiel).

Hier ist ein gewürzt FIDDLE ilustrating der Ansatz.

InformationsquelleAutor Claudio Holanda

Zunächst müssen Sie mehrere Elemente mit der gleichen ID, was aber falsch ist. Jede ID auf der Seite sollte eindeutig sein.

Dann könnte man etwas wie das hier tun:

<div class="main">

    <div id="vid1" class="big"><!-- image /video here --></div>
    <div id="vid2" class="big"><!-- image /video here --></div>
    <div id="vid3" class="big"><!-- image /video here --></div>

</div>

<div class="thumbnails">

    <a id="1" class="vidlink" href="#"><img src="images/thumb1.jpg" alt="#"/></a>
    <a id="2" class="vidlink" href="#"><img src="images/thumb1.jpg" alt="#"/></a>
    <a id="3" class="vidlink" href="#"><img src="images/thumb1.jpg" alt="#"/></a>

</div>
<script>
    $('a.vidlink').click(function(){
        $('div.main div').css('opacity',0).css('display','none');
        $('div.main div#vid'+this.attr('id')).css('opacity',1).css('display','block');
    });
</script>

Aber ich higly empfehlen, die nur mit jquery .hide() und .show() Funktionen.

InformationsquelleAutor amosmos

ID nicht allein numerisch.

Konventionen für ID:

Muss mindestens ein Zeichen enthalten

Darf keine Leerzeichen enthalten

Beginnen Sie NICHT mit der ID-name mit einer Zahl

ID muss eindeutig sein.

Versuchen:

HTML:

<div id="gallery">

    <div class="main">

        <div id="b1" class="big active"><!-- image /video here --></div>
        <div id="b2" class="big"><!-- image /video here --></div>
        <div id="b3" class="big"><!-- image /video here --></div>

    </div>

    <div class="thumbnails">

        <a id="t1" class="active" href="#"><img src="images/thumb1.jpg" alt="#"/></a>
        <a id="t2" href="#"><img src="images/thumb1.jpg" alt="#"/></a>
        <a id="t3" href="#"><img src="images/thumb1.jpg" alt="#"/></a>

    </div>

</div>

jQuery:

$(".big").click(function () {
        var th = $(this);
        var id = this.id;
        id = id.substr(1);
        if (!($(th).hasClass("active"))){
            $(".active ").removeClass("active");
            $(th).addClass("active");
            $(".thumbnails ").find("#t"+id).addClass("active");
        }
    });

CSS:

.main div,.thumbnails div{display:none; opacity:0}
.active{display:block;opacity:1}

InformationsquelleAutor Hiral

in html Satz ein Attribut

    <a rel="1" href="#"><img src="images/thumb1.jpg" alt="#"/></a>
    <a rel="2" href="#"><img src="images/thumb1.jpg" alt="#"/></a>
    <a rel="3" href="#"><img src="images/thumb1.jpg" alt="#"/></a>

</div>

IN JS

  $('a').click(function(){ 
        var target = $(this).attr('rel');
        $('div.big').hide();
        $("div#"+target).show();
     })

InformationsquelleAutor Rituraj ratan

0
```
$('div.big').on('click','a',function(){
 $('.thumbnails').find('div').hide();

 var id = $(this).data('id');
 var $e = $('#' + id);
 $e.show();
})
```
Hinweis - da Sie nicht haben, 2 Elemente mit der gleichen id. Ich habe hier unterstellt, dass Sie die id des div angezeigt werden, die in dem Attribut data-id

InformationsquelleAutor Parv Sharma

Sollten Sie nicht mehrere IDs, Sie sollen einzigartig sein. Update deine divs yo verwenden einen benutzerdefinierten HTML5-data-Attribut:

<div target-id="1" class="big"><!-- image /video here --></div>
<div target-id="2" class="big"><!-- image /video here --></div>
<div target-id="3" class="big"><!-- image /video here --></div>

Und versuchen, diese:

$('.thumbnails a').click(function(){ 
    var target = $(this).data('target-id');
    $('div').hide();
    $('div[target-id=' + target).show();
 })

InformationsquelleAutor Mister Epic

Bitte versuchen Sie dies:

<div id="gallery">

<div class="main">

    <div rel="1" class="big"><!-- image /video here -->1 d</div>
    <div rel="2" class="big"><!-- image /video here -->2f</div>
    <div rel="3" class="big"><!-- image /video here -->3d</div>

</div>

<div class="thumbnails">
    <a id="1" href="#"><img src="images/thumb1.jpg" alt="#"/>1</a>
    <a id="2" href="#"><img src="images/thumb1.jpg" alt="#"/>2</a>
    <a id="3" href="#"><img src="images/thumb1.jpg" alt="#"/>3</a>

</div>

$('.big').click(function(){
   var cuu_id= $(this).attr('rel');
    $('a').hide();
    $("#"+cuu_id).show();
 });

.thumbnails a {display:none;}

InformationsquelleAutor jagruti

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.