Trenger hjelp med gallery..

Mazå · 25. juli 2012

Hei!

Trenger noe hjelp med gallery i html/css. Skal da lage et gallery som ser ut som dette: http://www.nitinh.com/static/SlideShow/jquery.html

Har da lagt inn html koden, css koden og javascript. Men det virker ikke. Det jeg tror er feilen er javascript, fordi jeg ikke er god i det området. Noen som kan hjelpe meg?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id="bigPic">
<img alt="" src="_1013513.JPG" />
<img alt="" src="_1083527.JPG" />
<img alt="" src="_2213653.JPG" />
<img alt="" src="_2213659.JPG" />
<img alt="" src="_5023769.JPG" />
<img alt="" src="_5023770.JPG" />
<img alt="" src="_5023795.JPG" />
<img alt="" src="_5023795.JPG" />
<img alt="" src="_5023817.JPG" />
<img alt="" src="_0083716549.jp" />
</div>

<ul id="thumbs">
<li class="active" rel="1"><img alt="" src="_1013513.JPG" /> </li>
<li rel="2"><img alt="" src="_1083527.JPG" /> </li>
<li rel="3"><img alt="" src="_2213653.JPG" /> </li>
<li rel="4"><img alt="" src="_2213659.JPG" /> </li>
<li rel="5"><img alt="" src="_5023769.JPG" /> </li>
<li rel="6"><img alt="" src="_5023770.JPG" /> </li>
<li rel="7"><img alt="" src="_5023795.JPG" /> </li>
<li rel="8"><img alt="" src="_5023801.JPG" /> </li>
<li rel="9"><img alt="" src="_5023817.JPG" /> </li>
<li rel="10"><img alt="" src="_0083716549.jpg" /> </li>
</ul>

</body>
</html>

@charset "utf-8";
/* CSS Document */
#bigPic{
width:940px;
height:300px;
padding:1px;
border:1px solid #CCC;
background-color:#FFF;
margin-bottom:10px;
}
#bigPic img{
position:absolute;
display:none;
}
ul#thumbs li.active{
border:2px solid #000;
background:#fff;
padding:2px;
}
ul#thumbs, ul#thumbs li{
margin:0;
padding:0;
list-style:none;
}

ul#thumbs li{
float:left;
margin-right:7px;
margin-bottom:5px;
border:1px solid #CCC;
padding:3px;
cursor:pointer;
}
ul#thumbs img{
float:left;
width:80px;
height:80px;
line-height:80px;
overflow:hidden;
position:relative;
z-index:1;
}

Read more: http://www.nitinh.com/2010/03/how-to-create-a-simple-slideshow-using-mootools-jquery/#ixzz21bvzoppp

// JavaScript Document
var currentImage;
var currentIndex = -1;
var interval;
function showImage(index){
if(index<$('bigPic').getElements('img').length){
	var indexImage = $$('#bigPic img')[index]
	if(currentImage){  
		if(currentImage != indexImage ){
			$(currentImage).setStyle('z-index',2);
			$clear(myTimer);
			var myFx = new Fx.Tween(currentImage, {
				duration: 250,
				onComplete:function(){
					$(this).setStyles({'display':'none','z-index':1});
					myTimer = showNext.delay(3000);
				}.bind(currentImage)
			}).start('opacity',0);
		}
	}
	indexImage.setStyles({'display':'block', 'opacity':1});
	currentImage = indexImage;
	currentIndex = index;
	$$('#thumbs li').removeClass('active');
	$$('#thumbs li')[index].addClass('active');
}
}

function showNext(){
var len = $('bigPic').getElements('img').length;
var next = currentIndex < (len-1) ? currentIndex + 1 : 0;
showImage(next);
}

var myTimer;
window.addEvent('domready',function(){
myTimer = showNext.delay(3000);
showNext(); //loads first image
$('thumbs').getElements('li').addEvent('click',function(e){
	var count = this.get('rel');
	showImage(parseInt(count)-1);
});
});
var currentImage;
var currentIndex = -1;
var interval;
function showImage(index){
if(index < $('#bigPic img').length){
	var indexImage = $('#bigPic img')[index]
	if(currentImage){  
		if(currentImage != indexImage ){
			$(currentImage).css('z-index',2);
			clearTimeout(myTimer);
			$(currentImage).fadeOut(250, function() {
				myTimer = setTimeout("showNext()", 3000);
				$(this).css({'display':'none','z-index':1})
			});
		}
	}
	$(indexImage).css({'display':'block', 'opacity':1});
	currentImage = indexImage;
	currentIndex = index;
	$('#thumbs li').removeClass('active');
	$($('#thumbs li')[index]).addClass('active');
}
}

function showNext(){
var len = $('#bigPic img').length;
var next = currentIndex < (len-1) ? currentIndex + 1 : 0;
showImage(next);
}

var myTimer;

$(document).ready(function() {
myTimer = setTimeout("showNext()", 3000);
showNext(); //Load first image
$('#thumbs li').bind('click',function(e){
	var count = $(this).attr('rel');
	showImage(parseInt(count)-1);
});
});

BlueEAGLE · 25. juli 2012

...og på hvilken måte virker det ikke?

Mazå · 25. juli 2012

Det kommer liksom ikke det store bildet, og skjer ikke noe når jeg trykker på de som bildene

MikkelRev · 26. juli 2012

link?

Mazå · 26. juli 2012

Når du går inn på denne siden http://www.nitinh.com/static/SlideShow/jquery.html Så ser du mange bilder nedenfor det store. jeg får greit opp bilder som de små er, men ser ikke noe bilde i den store firkanten/skjer ikke noe når jeg trykke på de små.

BlueEAGLE · 26. juli 2012

Ja, det å vise oss noe som virker er veldig hjelpsomt når vi skal feilsøke noe som _ikke_ virker. :/

hjahre · 26. juli 2012

Hvis jeg skal gjette, så vil jeg tro du ikke har tilgang til bildene. Dvs at nettleseren ikke finner bildene det er linket til i HTML-fila. Det kan være så enkelt som at de ligger i en annen mappe eller at du ikke har bildene.

Sånn som det står nå skal alle bildene ligge i samme mappe som HTML-fila.

EDIT: Jeg ser heller ikke at JavaScript-fila blir referert til/inkludert i HTML-dokumentet

Endret 26. juli 2012 av hjahre

Logg inn

Trenger hjelp med gallery..

Anbefalte innlegg

Mazå

Lenke til kommentar

Videoannonse

BlueEAGLE

Lenke til kommentar

Mazå

Lenke til kommentar

MikkelRev

Lenke til kommentar

Mazå

Lenke til kommentar

BlueEAGLE

Lenke til kommentar

hjahre

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Populær nå

Elon Musk er verdens beste Diablo 4 spiller. 1 2 3

Hvem er aktive 0 medlemmer