tekst bij plaatje(script) in CSS

Status
Niet open voor verdere reacties.
P

Pellekaart

Gebruiker
Lid geworden
25 jun 2012
Berichten
48
Ik heb op een vaste plek plaatjes die met een soort slide zich laten zien.
Nu zou ik de mogelijkheid willen hebben om bij elk van zo'n plaatje een tekstje te voegen.
Dus dat zou dan bij of in deze code moeten volgens mij:
<img src="pvvdmap/foto1.jpg">
Het moet een (fotobijschrift)tekst zijn die meeloopt in de slide.(met de afbeeldingen)
Het zou zo makkelijker te 'editten' zijn en dan hoef ik niet steeds in photoshop de teksten in de foto te plaatsen.
Iemand een idee hoe ik dit aan dit script kan koppelen?
Deze fotobijschriften zou ik dus graag in een externe stijlsheet willen stylen, ze moeten meelopen met de wisselende plaatjes.

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

</head>
<body>

<div class="fadein3">
<img src="pvvdmap/foto1.jpg">
<img src="pvvdmap/foto2.jpg">
<img src="pvvdmap/foto3.jpg">
<img src="pvvdmap/foto4.jpg">

</div>
</body>
</html>
 
Laatst bewerkt:
Hoi Pellekaart,
Ik denk zoiets:
HTML: 
<div class="fadein3">
    <div><img src="pvvdmap/foto1.jpg"><span>Bijschrift foto 1</span></div>
    <div><img src="pvvdmap/foto2.jpg"><span>Bijschrift foto 2</span></div>
    <div><img src="pvvdmap/foto3.jpg"><span>Bijschrift foto 3</span></div>
    <div><img src="pvvdmap/foto4.jpg"><span>Bijschrift foto 4</span></div>
</div>
Dan kan je in het stylesheet:
  • De positie e.d. van het wissel-image bepalen met: #fadein3 div {...}
  • De maten van de images vastleggen met: #fadein3 img {...}
  • De positie enz. van de bijschriften regelen met: #fadein3 span {...}
Als ik jQuery goed begrijp, zou de opdracht dan moeten worden:
[JS]<script type="text/javascript">
$(function(){
$('.fadein3 div:gt(0)').hide();
setInterval(function(){$('.fadein3 :first-child').fadeOut(5555).next('div').fadeIn().end().appendTo('.fadein3');}, 9000);
});
</script>[/JS]
In plaats van alleen het image zou dan telkens een binnen-<div> met het hele pakketje moeten in- en uitfaden.

Met vriendelijke groet,
CSShunter
 
Hartelijk bedankt voor je reactie.

Ik heb net een tijd zitten puzzelen maar dit lukt nog niet. (de div's mee laten lopen incl. tekstje in span)
Als ik het zo maak, dan ziet ie niet de img niet lijkt wel, die verschijnen dan niet. (alleen de eerste)
Ook verschijnen ze niet met elkaar (dus beeld en tekst - img + spantekst) (alleen de eerste staat steeds goed)

Affijn, ik moet me bezinnen.
Misschien even iets anders doen en er later nog eens naar kijken.

groeten Pellekaart

p.s. en ik was zo blij dat ie het qua beeld wel goed deed (dus zonder de foto-bijschriften), het lijkt zo simpel..
 
Hoi Pellekaart,
Ai, het ontbreek me aan kennis om dit even met jQuery op te lossen.

Maar ik heb wel wat anders: een aanvullend eigen fabrikaat javascriptje, dat de title="..." van de images automatisch omzet naar een bijschrift.
HTML: 
<div id="fader">
	<img src="images/foto1.jpg" title="Bijschrift foto 1" alt="" />
	<img src="images/foto2.jpg" title="Bijschrift foto 2" alt="" />
	<img src="images/foto3.jpg" title="Bijschrift foto 3" alt="" />
	<img src="images/foto4.jpg" title="Bijschrift foto 4" alt="" />
</div>
<div id="bijschrift"></div>
Het bestaande en goed draaiende jQuery-script blijft daarbij gehandhaafd.
Als extra komt erbij:
[JS]var gestart=0;
function bijschriftPlaatsen(){
var allFadeImg=document.getElementsByTagName('img');
document.getElementById('bijschrift').innerHTML=allFadeImg[0].title;
if (gestart==0){
setInterval(bijschriftPlaatsen, 6000); // identiek aan pauze-tijd van het infaden
}
gestart=1;
}

setTimeout(bijschriftPlaatsen, 2000); // iets na-ijlen voor plaatsen bijschrift bij eerste img resp. tijdens infaden[/JS]
Het jQuery-script blijkt de images steeds om te wisselen, en je kunt daarom volstaan met steeds de title van de eerste-op-dat-moment op te vragen en in te planten.

Het kan ook helemaal zonder jQuery. Met een 100% eigen javascript-baksel kan je het zo mooi maken als je zelf wilt. En het spaart nog kB's ook. :)

  • Bv. deze: klikbare-slideshow.htm
  • Zie broncode: alles aan css en javascript zit ook in de pagina zelf.
  • Die is ook responsive: toonbaar van mobieltje tot superbreedbeeld desktop.
  • Toelichting staat in dit topic.
Met vriendelijke groet,
CSShunter
 
Hi CSShunter,

Dit werkt helemaal perfect!
Ik heb wel de eerste regel gewijzigd in:

<div class="fadein3">

Dus een 'div class' i.p.v een 'div id'

Nu nog uitwerken dat het mooi loopt.

Nogmaals heel veel dank!

Als ik het online zet zal ik dit nog even vermelden hier, ter illustratie.

groeten Pellekaart
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan