11 svar · 1 525 visningar · startad av Hannes_T
Tjena.
Jag har precis börjat med html och sådant.
Jag håller på att göra en hemsida och skulle behöva hjälp med att göra ett bildspel som liknar den här
Tyvärr är jag inte så bra på engelska och fattar inte riktigt hur jag ska göra på den där turtorialen. Undrar om någon skulle kunna hjälpa mig med detta.
Ska helst vara så att den bytar bild av sig själv!!
MVH// Hannes
http://www.queness.com/post/152/simple-jquery-image-slide-show-with-semi-transparent-caption
Det är 3 block i tutorial delen: html, css och Javascript, bör inte vara några problem för dig att kopiera dessa fält och få skriptet att fungera för dig.
Glöm inte att infoga jquery ramverket också.
Tack så mycket för sidan, men som jag trodde så är jag kasst på sånt här och såklart är det ngt fel. Skulle vara bra om någon skulle kunna hitta felet
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>testsida</title>
<style type="text/css">
body{
font-family:arial
}
.clear {
clear:both
}
#gallery {
position:relative;
height:360px
}
#gallery a {
float:left;
position:absolute;
}
#gallery a img {
border:none;
}
#gallery a.show {
z-index:500
}
#gallery .caption {
z-index:600;
background-color:#000;
color:#ffffff;
height:100px;
width:100%;
position:absolute;
bottom:0;
}
#gallery .caption .content {
margin:5px
}
#gallery .caption .content h3 {
margin:0;
padding:0;
color:#1DCCEF;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
//Execute the slideShow
slideShow();
});
function slideShow() {
//Set the opacity of all images to 0
$('#gallery a').css({opacity: 0.0});
//Get the first image and display it (set it to full opacity)
$('#gallery a:first').css({opacity: 1.0});
//Set the caption background to semi-transparent
$('#gallery .caption').css({opacity: 0.7});
//Resize the width of the caption according to the image width
$('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});
//Get the caption of the first image from REL attribute and display it
$('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
.animate({opacity: 0.7}, 400);
//Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
setInterval('gallery()',6000);
}
function gallery() {
//if no IMGs have the show class, grab the first image
var current = ($('#gallery a.show')? $('#gallery a.show') : $('#gallery a:first'));
//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));
//Get next image caption
var caption = next.find('img').attr('rel');
//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 1000);
//Hide the current image
current.animate({opacity: 0.0}, 1000)
.removeClass('show');
//Set the opacity to 0 and height to 1px
$('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 });
//Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
$('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 );
//Display the content
$('#gallery .content').html(caption);
}
</script>
</head>
<body>
<div id="gallery">
<a href="#" class="show">
<img src="blomma1.jpg" alt="Flowing Rock" alt="" title="" width="580" height="360" rel="<h3>Flowing Rock</h3>You can put html element
inside the REL attribute."/></a>
</a>
<a href="#">
<img src="blomma2.jpg" alt="Grass Blades" alt="" title="" width="580" height="360" rel="<h3>Grass Blades</h3>description"/>
</a>
<div class="caption"><div class="content"></div></div>
</div>
<div class="clear"></div>
</body>
</html>
Tack så mycket för sidan, men som jag trodde så är jag kasst på sånt här och såklart är det ngt fel. Skulle vara bra om någon skulle kunna hitta felet
Glöm inte att infoga jquery ramverket också.
Det du gör här är ett jquery skript, du behöver ladda ner det alternativ köra skript-blocket för att ladda in jquery från google apis:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
Om du vill köra med 1.4.2
Tack så mycket har fått det att funka nu :)
Sätt gärna tråden till löst ;)
Problem med valideringen
Funkar ju jättebra! Dock är det problem att validera den på W3C.
Han använder ett attribut, rel, i img-taggen som inte finns i den valda doctypen.
Hur löser man detta?
/Christer
Flytta rel till a elementet och skriv om jquery skriptet att ta caption texten ifrån a-elementet istället. eller flyttar rel texten till alt (han har dubbla alt element) och byt ut ....attr('rel')) i jquery mot alt/title
Glöm inte att markera tråden som löst ;)
Jojoxx: Det är två olika användare ;)