(omdraaien) beeldvolgorde slide

Status
Niet open voor verdere reacties.
P

Pellekaart

Gebruiker
Lid geworden
25 jun 2012
Berichten
48
In het onderstaande scriptje gebruik ik voor de foto's de namen;
foto1.jpg, foto2.jpg etc. t/m foto9.jp

Als ik nu een nieuwe foto wil toevoegen, die dus als eerste moet verschijnen, dan moet ik alle beelden hernummeren.
foto1.jpg wordt foto2.jpg, foto 2 wordt foto3.jpg etc.

Is er niets te bedenken binnen dit script zodat dit niet hoeft?
Dus dat ik de nieuwste foto, foto10.jpg kan noemen.
En dat ie dus begint met de laatste foto in de map? (dat je het omdraait)
Dat zou me veel tijd schelen, veel makkelijker dus.

link: http://robertheemskerk.nl/Pvdd.html
HTML: 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

  <script>

$(function(){
	$('.fadein3 img:gt(0)').hide();
	setInterval(function(){$('.fadein3 :first-child').fadeOut(3500).next('img').fadeIn(3500).end().appendTo('.fadein3');}, 9000);
});

var gestart=0;
function bijschriftPlaatsen(){
    var allFadeImg=document.getElementsByTagName('img');
    document.getElementById('bijschrift').innerHTML=allFadeImg[0].title;
    if (gestart==0){
        setInterval(bijschriftPlaatsen, 3500); // identiek aan pauze-tijd van het infaden
    }
    gestart=1;
}
 
setTimeout(bijschriftPlaatsen, 3500); // iets na-ijlen voor plaatsen bijschrift bij eerste img resp. tijdens infaden

</script>

</head>
<body>

<div class="fadein3">
    <img src="pvvdmap/foto1.jpg" title="ZWARTE WALNOTEN, 24 november 2013, Almere-buiten" alt="" />
    <img src="pvvdmap/foto2.jpg" title="INGEKERFDE STER OP BEUK, 26 oktober 2013, DeBeek" alt="" />
    <img src="pvvdmap/foto3.jpg" title="WALNOOTHARTJES, 31 oktober 2013, Almere-buiten" alt="" />
    <img src="pvvdmap/foto4.jpg" title="ZONNEBLOEMPITTEN, 13 september 2013, Almere-buiten" alt="" />
    <img src="pvvdmap/foto5.jpg" title="MENUETZWEEFVLIEG, 24 juli 2013, Almere-buiten" alt="" />
    <img src="pvvdmap/foto6.jpg" title="Zeearend, 30 maart 2013, Almere - Buitenvaart" alt="" />
    <img src="pvvdmap/foto7.jpg" title="Gewone pad, 6 maart 2013, Almere buiten" alt="" />
    <img src="pvvdmap/foto8.jpg" title="Edelherten, 31 januari 2013, Fluitbos" alt="" />
    <img src="pvvdmap/foto9.jpg" title="NEOMYIA CORNICINA, 23-12-2007, Amsterdamse bos" alt="" />

</div>
<div id="bijschrift"></div>

</div>
</body>
</html>

  </script>
 
Laatst bewerkt door een moderator:
Hallo,

ik heb je scriptje een beetje aangepast en volgens mij zou het zo moeten werken:
[js]$(function(){
$('.fadein3 img:not(:last)').hide();
setInterval(function(){$('.fadein3:last-child').fadeOut(3500).prev('img').fadeIn(3500).end().prependTo('.fadein3');}, 9000);
});

var gestart=0;
function bijschriftPlaatsen(){
var allFadeImg=document.getElementsByTagName('img');
document.getElementById('bijschrift').innerHTML=allFadeImg[allFadeImg.length-1].title;
if (gestart===0){
setInterval(bijschriftPlaatsen, 3500); // identiek aan pauze-tijd van het infaden
}
gestart=1;
}

setTimeout(bijschriftPlaatsen, 3500); // iets na-ijlen voor plaatsen bijschrift bij eerste img resp. tijdens infaden[/js]

Ik heb belangrijke wijzigingen even dik gezet. Ik hoop dat dit helpt!


Theis
 
Laatst bewerkt door een moderator:
A: Ik snap niet waarom je jQuery gebruikt om vervolgens alsnog met vanilla Javascript iets doet (Waarschijnlijk is dat vanuit een online voorbeeld gewoon geplakt heb ik het vermoeden)

B: Het probleem is dat je een andere volgorde wilt hebben, waarom ga je dan moeilijk lopen doen met Javascript terwijl je ook gewoon je HTML volgorde aan kunt passen ;)

Dus in plaats van
HTML: 
<div class="fadein3">
    <img src="pvvdmap/foto1.jpg" title="ZWARTE WALNOTEN, 24 november 2013, Almere-buiten" alt="" />
    <img src="pvvdmap/foto2.jpg" title="INGEKERFDE STER OP BEUK, 26 oktober 2013, DeBeek" alt="" />
    <img src="pvvdmap/foto3.jpg" title="WALNOOTHARTJES, 31 oktober 2013, Almere-buiten" alt="" />
    <img src="pvvdmap/foto4.jpg" title="ZONNEBLOEMPITTEN, 13 september 2013, Almere-buiten" alt="" />
    <img src="pvvdmap/foto5.jpg" title="MENUETZWEEFVLIEG, 24 juli 2013, Almere-buiten" alt="" />
    <img src="pvvdmap/foto6.jpg" title="Zeearend, 30 maart 2013, Almere - Buitenvaart" alt="" />
    <img src="pvvdmap/foto7.jpg" title="Gewone pad, 6 maart 2013, Almere buiten" alt="" />
    <img src="pvvdmap/foto8.jpg" title="Edelherten, 31 januari 2013, Fluitbos" alt="" />
    <img src="pvvdmap/foto9.jpg" title="NEOMYIA CORNICINA, 23-12-2007, Amsterdamse bos" alt="" />
</div>
Doe je dit:
HTML: 
<div class="fadein3">
    <img src="pvvdmap/foto9.jpg" title="NEOMYIA CORNICINA, 23-12-2007, Amsterdamse bos" alt="" />
    <img src="pvvdmap/foto8.jpg" title="Edelherten, 31 januari 2013, Fluitbos" alt="" />
    <img src="pvvdmap/foto7.jpg" title="Gewone pad, 6 maart 2013, Almere buiten" alt="" />
    <img src="pvvdmap/foto6.jpg" title="Zeearend, 30 maart 2013, Almere - Buitenvaart" alt="" />
    <img src="pvvdmap/foto5.jpg" title="MENUETZWEEFVLIEG, 24 juli 2013, Almere-buiten" alt="" />
    <img src="pvvdmap/foto4.jpg" title="ZONNEBLOEMPITTEN, 13 september 2013, Almere-buiten" alt="" />
    <img src="pvvdmap/foto3.jpg" title="WALNOOTHARTJES, 31 oktober 2013, Almere-buiten" alt="" />
    <img src="pvvdmap/foto2.jpg" title="INGEKERFDE STER OP BEUK, 26 oktober 2013, DeBeek" alt="" />
    <img src="pvvdmap/foto1.jpg" title="ZWARTE WALNOTEN, 24 november 2013, Almere-buiten" alt="" />
</div>
Wil je dan een nieuwe foto toevoegen dan zet je die gewoon bovenaan. :)
 
Bedankt Theis en Tha Devil,

Allereerst wil ik even reageren op de laatste reactie (Tha Devil).

Aan deze mogelijkheid had ik zelf ook gedacht maar als ik regel verwijder;
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Dan mis ik de slide-funktie bij de beelden en het automatisch plaatsen van het foto-bijschrift.

Mogelijk moet ik op die plek een andere scriptregel plaatsendan?

Het is wel zo dat je door het omdraaien van de volgorde van de 'div class' begint bij het recentste beeld, zo zou ik het wel willen gebruiken ja!

Maar hij draait nu nog niet de slide met het bijschrift (title)
 
Ik begrijp niet waarom je deze regel zou willen verwijderen, deze geeft namelijk toegang tot de jquery library, waaronder dus ook fadeIn en fadeOut (gebruikt voor de "slide-functie").
Ik zou de regel lekker laten staan en Tha Devil's oplossing gebruiken.

Theis
 
Laatst bewerkt door een moderator:
Het ging mij niet om het feit dat je jQuery wel of niet gebruikt, alleen maak je nu gebruik van de javascript library jQuery alleen gebruik je hem vervolgens niet om het bijschrift gedeelte te regelen.

Daar gebruik je weer gewone Javascript voor, terwijl het idee van jQuery juist is dat je eenvoudiger iets kunt realiseren.
Het nadeel er van is wel weer dat je een hele bibliotheek inlaadt (dus extra laadtijd) voor wellicht een kleine functionaliteit, alleen vind ik dat tegenwoordig geen groot argument meer. Je maakt al gebruik van de CDN-versie dus de kans is aardig aanwezig dat het bestand al in de cache van de bezoeker staat.

Eigenlijk komt mijn reactie in het kort hier op neer: Laat je Javascript gewoon met rust en wijzig de volgorde van je HTML :)
 
Laatst bewerkt:
Ik heb de volgorde gewijzigd (en de fotobestanden gere-nummerd) en dit gaat perfect!

Wel moet ik het nog online zetten straks.

Super bedankt.

Het was weer véél eenvoudiger dan ik dacht.

groeten Pellekaart
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan