So erstellen und erstellen Sie eine Galerie mit Miniaturansichten und Pfeilen

Ich versuche, eine Bildergalerie mit einem großen Bild und kleinen Miniaturansichten auf der Seite zu erstellen, die durch Scrollen angezeigt werden können. Ich möchte in der Lage sein, das Bild in der Mitte auf zwei Arten zu ändern: (1) Verwenden von Pfeilen, die sich über dem großen Bild befinden, (2) durch Klicken auf die kleinen Miniaturbilder. Ich stecke auf Schritt (1) fest und habe bisher folgenden Code gefunden:

HTML:

<html>

<head>

<link rel="stylesheet" type="text/css" href="1.css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript" src="1.js"></script> 

</head>

<body>

<!--part a-->
<div id="imag">
<div class="imageDiv">
<div>
    
</div>
<div>
    
</div>
<div>
    
</div>
<div>
    
</div>
<div>
    
</div>
<div>
    
</div>
<div>
    <input type="image" src="right arrow.png" class="rightarrow" width="10" height="35"/>
</div>
<div>
    <input type="image" src="left arrow.png" class="leftarrow" width="10" height="35"/>
</div>
</div>
</div>
<!--part a-->

<!--part b-->
<div id="box">
<div class="area">
    
    
    
    
    
    
</div>
</div>
<!--part b-->

</body>

</html>

CSS:

#imag {
float:left;
padding:5px;
height:338px;
width:450px;
  }

.rightarrow {
position: absolute;
width:40px;
top: 10px;
left:400px;
}
.leftarrow {
position: absolute;
width:40px;
top: 10px;
left: 0px;
}

#box {
width: 222px;
height: 343px;
overflow-y: scroll;
overflow-x: hidden;
 }

.area img {padding-bottom: 5px;}

JS:

$(document).ready(function() {
$('img:not(:first)').hide();
$(".rightarrow").click(function() {
    $('img:not(:last):visible').
    hide().
    parent().
    next().
    children().
    show();
});
$(".leftarrow").click(function() {
    $('img:not(:first):visible').
    hide().
    parent().
    prev().
    children().
    show();
});
});

Ich habe gerade begonnen, HTML zu lernen, daher bin ich mir nicht sicher, ob dies der beste Weg ist, dies zu tun, aber es ist das, was ich bisher geschafft habe. Jetzt ist das Problem, dass, wenn ich Teil b lösche, Teil a in Ordnung ist. Wenn ich Teil a und die Zeilen JS aus dem Header-Abschnitt des Codes lösche, dann funktioniert Teil b gut. Also meine Frage ist, wie können Sie beide Teile kombinieren, so dass sie richtig zusammenarbeiten?

0
Ja, ich habe versucht Geige, aber ich bekomme das gleiche Ergebnis
hinzugefügt der Autor oliveirano25, Quelle
können Sie dies in jsffiddle.net geigen
hinzugefügt der Autor Vivek Vikranth, Quelle

1 Antworten

Sie können HTML-Hashes verwenden, um zu ändern, auf welcher Folie Sie sich befinden. Dann speichern Sie den Index mit Javascript und verwenden Sie das, um zur nächsten oder vorherigen Folie zu gehen

<div class="carousel-full">
    
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elit elit, euismod ut fermentum sit amet, molestie non nisi. Cras placerat aliquet hendrerit. Nulla turpis sapien, ultricies ac rutrum ac, elementum vitae diam.
  • Example long title goes here
  • Example Title 1
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elit elit, euismod ut fermentum sit amet, molestie non nisi. Cras placerat aliquet hendrerit. Nulla turpis sapien, ultricies ac rutrum ac, elementum vitae diam.
</div>
<div class="carousel-nav">
    
</div>

Und das CSS:

.carousel-nav {
    padding: 5px;
    background-color: grey;
}

.carousel-nav li {
    display: inline-block;
}

.carousel-full {
    overflow: auto;
    padding: 10px;
}

.carousel-full ul {
    white-space: nowrap;
}

.carousel-full li {
    width: 100%;
    display: inline-block;
    white-space: normal;
    vertical-align: top;
}

.carousel-full img {
    float: left;
}

.carousel-full span {
    clear: left;
    float: left;
}

Und das Javascript:

var current = 0,
    total = document.querySelectorAll('carousel-full li').length;

$('carousel-nav a').click(function() {
    var id = parseInt($(this).attr('href').slice(4));
    if (id) {
        current = id;
    }
});

$('carousel-nav a[href="#next"]').click(function() {
    e.preventDefault();
    if (current < total) {
        current = current + 1;
    } else {
        current = 0;
    }
    window.location.hash = 'item' + current;
});

$('carousel-nav a[href="#prev"]').click(function (e) {
    e.preventDefault();
    if (current > 0) {
        current = current - 1;
    } else {
        current = total;
    }
    window.location.hash = 'item' + current;
});
0
hinzugefügt
Vielen Dank für Ihre Antwort, aber ich bin mir nicht sicher, ob Ihr Design ist, was ich suche. Ich möchte so etwas erstellen, aber die Thumbnails werden vertikal und nicht horizontal platziert: tympanus.net/Tutorials/ResponsiveImageGallery
hinzugefügt der Autor oliveirano25, Quelle
JavaScript - Deutsche Gemeinschaft
JavaScript - Deutsche Gemeinschaft
3 der Teilnehmer

In dieser Gruppe sprechen wir über JavaScript.