Ik heb de volgende javascript code van het net geplukt:
[JS]<script type="text/javascript">
function slideSwitch() {
var $active = $('#slideshow div.active');
if ( $active.length == 0 ) $active = $('#slideshow div:last');
var $next = $active.next().length ? $active.next() : $('#slideshow div:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 3000 );
});
</script>[/JS]
In mijn .css file heb ik staan:
In het .php bestand waarin de slideshow staat heb ik:
Voor de goede orde: Dit werkt. Kijk maar hier
Eerste vraag: Waar en hoe kan ik regelen dat de foto's gecentreerd worden weergegeven?
Tweede vraag: Waar en hoe kan ik regelen dat ik onder iedere foto nog een of twee regels tekst kan plaatsen? Zonder dat de tekst van de voorgaande foto blijft staan. Ik heb nu de copyright-regel onder foto 1 en 2 staan. Zet ik hem alleen onder 1 dan is hij daarna weg. Zet ik hem ook onder foto 2 dan blijft hij de rest van de slideshow staan. Wanneer ik dus de tekst onder foto 3 verander, dan komt hij door de copyright regel van foto 2 te staan. Met andere woorden, ik wil het hebben zoals bij de overgang van foto 1 naar 2 gebeurt: Tekst van de voorgaande foto weg en tekst van de huidige foto eronder.
Bij voorbaat veel dank
[JS]<script type="text/javascript">
function slideSwitch() {
var $active = $('#slideshow div.active');
if ( $active.length == 0 ) $active = $('#slideshow div:last');
var $next = $active.next().length ? $active.next() : $('#slideshow div:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 3000 );
});
</script>[/JS]
In mijn .css file heb ik staan:
Code:
#slideshow {
position:relative;
width: 90%;
min-width: 280px;
margin: auto auto auto auto;
}
#slideshow .slide {
position:absolute;
top:0;
left:auto;
z-index:8;
opacity:0.0;
}
#slideshow div.active {
z-index:10;
opacity:1.0;
}
#slideshow div.last-active {
z-index:9;
}
#slideshow img {
display: block;
margin-left: auto;
margin-right: auto;
width: 80%;
}
HTML:
<div id="slideshow">
<div class="slide active">
<img src="http://www.frigge.nl/batavier/tijdreeksen/tijdreeks_001/tijdreeks_001_20091215_dsc_0051.jpg" alt="Slideshow Image 1">
<hr>
<p class = "time">
© Copyright H.D. Frigge Schiedam 2010, 2011, 2012, 2013, 2014
</div>
<div class="slide">
<img src="http://www.frigge.nl/batavier/tijdreeksen/tijdreeks_001/tijdreeks_001_20101219_dsc_0079.jpg" alt="Slideshow Image 2">
<hr>
<p class = "time">
© Copyright H.D. Frigge Schiedam 2010, 2011, 2012, 2013, 2014
</div>
<div class="slide">
<img src="http://www.frigge.nl/batavier/tijdreeksen/tijdreeks_001/tijdreeks_001_20120114_dsc_0115.jpg" alt="Slideshow Image 3">
</div>
<div class="slide">
<img src="http://www.frigge.nl/batavier/tijdreeksen/tijdreeks_001/tijdreeks_001_20120114_dsc_0119.jpg" alt="Slideshow Image 4">
</div>
Eerste vraag: Waar en hoe kan ik regelen dat de foto's gecentreerd worden weergegeven?
Tweede vraag: Waar en hoe kan ik regelen dat ik onder iedere foto nog een of twee regels tekst kan plaatsen? Zonder dat de tekst van de voorgaande foto blijft staan. Ik heb nu de copyright-regel onder foto 1 en 2 staan. Zet ik hem alleen onder 1 dan is hij daarna weg. Zet ik hem ook onder foto 2 dan blijft hij de rest van de slideshow staan. Wanneer ik dus de tekst onder foto 3 verander, dan komt hij door de copyright regel van foto 2 te staan. Met andere woorden, ik wil het hebben zoals bij de overgang van foto 1 naar 2 gebeurt: Tekst van de voorgaande foto weg en tekst van de huidige foto eronder.
Bij voorbaat veel dank
Laatst bewerkt door een moderator: