Hallo,
habe folgende inline-Galerie. Leider klappt es nicht mit der zufälligen Bildauswahl.
habe folgende inline-Galerie. Leider klappt es nicht mit der zufälligen Bildauswahl.
HTML:
<style>
.gallerywrap {
background-color: #BFBFBF;
width: 215px;
height: 102px;
position: relative;
overflow: hidden;
-moz-border-radius: 4px;
margin: 25px 0;
padding: 2px;
}
.gallerywrap ul {
list-style: none;
}
.gallerywrap li {
position: absolute;
top: 2px;
left: 2px;
}
.gallerywrap li img {
border-radius: 2px;
}
.gallerywrap a {
color: #FFF;
position: absolute;
bottom: 10px;
right: 0;
}
#prevImage {
left: 0;
}
</style>
</head>
<body>
<ul class="gallery">
<li><img src="/news/ns6562_1.jpg" alt="" height="102px" width="215px" /></li>
<li><img src="/news/ns6565_1.jpg" alt="" height="102px" width="215px" /></li>
<li><img src="/news/ns6564_1.jpg" alt="" height="102px" width="215px" /></li>
</ul>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
(function($) {
//wieviele Bilder gibt es
var countImage = $('ul.gallery li').length;
//zufälliges Bild ermitteln
var randInt = Math.ceil(Math.random() * countImage);
//Bild-Container einbinden
$('ul.gallery').wrap('<div class="gallerywrap"></div>');
//alle Bilder bis auf das Erste ausblenden und dem erstem Bild die Klasse "active" zuweisen
$('ul.gallery li').hide().eq(randInt).show().addClass('active');
//Button einbinden
$('.gallerywrap').append('<a href="#"id="nextImage">></a><a href="#" id="prevImage"><</a>');
//vorwärts navigieren
$('#nextImage').on('click', function() {
var currentImage = $('ul.gallery li.active');
$(currentImage).fadeOut().removeClass('active');
if ($(currentImage).next().length == 0) {
var nextImage = $('ul.gallery li:first-child');
} else {
var nextImage = $(currentImage).next();
}
$(nextImage).fadeIn().addClass('active');
return false;
});
//zurück navigieren
$('#prevImage').on('click', function() {
var currentImage = $('ul.gallery li.active');
$(currentImage).fadeOut().removeClass('active');
if ($(currentImage).prev().length == 0) {
var prevImage = $('ul.gallery li:last-child');
} else {
var prevImage = $(currentImage).prev();
}
$(prevImage).fadeIn().addClass('active');
return false;
});
})(jQuery);
</script>
</body>
</html>
