Text and Image Crawler WITH Captions for Images?

[goldengirl]

1) Script Title: Text and Image Crawler

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...wler/index.htm

I've got this working perfectly on a website: http://www.photosbyhanna.com/10/main.html

The only issue is (and it's probably very simple!) I can't find a way to have captions underneath some or all of the individual images. Everything I try seems to break the images into new lines.

Any advice gladly welcomed.

Many thanks!

[azoomer]

I tried to change the image array to this

<div class="marquee" id="mycrawler2">
         <div class="marqueeimage"><img src="http://www.photosbyhanna.com/10/people/people1.jpg" /><br /> here is a caption underneath the picture </div>
         <div class="marqueeimage"><img src="http://www.photosbyhanna.com/10/people/people2.jpg" /><br /> here is a caption underneath the picture </div>
         <div class="marqueeimage"><img src="http://www.photosbyhanna.com/10/people/people3.jpg" /><br /> here is a caption underneath the picture </div>
         <div class="marqueeimage"><img src="http://www.photosbyhanna.com/10/people/people4.jpg" /><br /> here is a caption underneath the picture </div>
         <div class="marqueeimage"><img src="http://www.photosbyhanna.com/10/people/people5.jpg" /><br /> here is a caption underneath the picture </div>
         <div class="marqueeimage"><img src="http://www.photosbyhanna.com/10/people/people6.jpg" /><br /> here is a caption underneath the picture </div>
         <div class="marqueeimage"><img src="http://www.photosbyhanna.com/10/people/people7.jpg" /><br /> here is a caption underneath the picture </div>
         <div class="marqueeimage"><img src="http://www.photosbyhanna.com/10/people/people8.jpg" /><br /> here is a caption underneath the picture </div>
         <div class="marqueeimage"><img src="http://www.photosbyhanna.com/10/people/people9.jpg" /><br /> here is a caption underneath the picture </div>
         <div class="marqueeimage"><img src="http://www.photosbyhanna.com/10/people/people10.jpg" /><br /> here is a caption underneath the picture </div>
         <div class="marqueeimage"><img src="http://www.photosbyhanna.com/10/people/people11.jpg" /><br /> here is a caption underneath the picture </div>
         <div class="marqueeimage"><img src="http://www.photosbyhanna.com/10/people/people12.jpg" /><br /> here is a caption underneath the picture </div>
         <div class="marqueeimage"><img src="http://www.photosbyhanna.com/10/people/people13.jpg" /><br /> here is a caption underneath the picture </div>
         <div class="marqueeimage"><img src="http://www.photosbyhanna.com/10/people/people14.jpg" /><br /> here is a caption underneath the picture </div>
         <div class="marqueeimage"><img src="http://www.photosbyhanna.com/10/people/people15.jpg" /><br /> here is a caption underneath the picture </div>
   </div>

and then adding this css

.marqueeimage { display:inline-block; text-align:center;}

and it seems to work, in my browser anyway.

[goldengirl]

Thanks so much for your help - works perfectly!

[goldengirl]

It's just come to my attention that this doesn't work in Internet Explorer (works perfectly in Firefox, Safari and Chrome...

It's completely validated in validator.w3.org

but in IE, each image + caption in each div breaks to a new line?!

[azoomer]

try this instead

<div class="marquee" id="mycrawler2">

<span class="marqueeimage"><img src="http://www.photosbyhanna.com/10/people/people1.jpg" alt="" /><br />Linda at Tavastia / Ylioppilaslehti, 2009</span>
<span class="marqueeimage"><img src="http://www.photosbyhanna.com/10/people/people2.jpg" alt="" /><br />Personal work, 2008</span>
<span class="marqueeimage"><img src="http://www.photosbyhanna.com/10/people/people3.jpg" alt="" /><br />Personal work, 2008</span>
<span class="marqueeimage"><img src="http://www.photosbyhanna.com/10/people/people4.jpg" alt="" /><br />Model portfolio, 2009</span>
<span class="marqueeimage"><img src="http://www.photosbyhanna.com/10/people/people5.jpg" alt="" /><br />She Rocks clothing, 2010</span>
<span class="marqueeimage"><img src="http://www.photosbyhanna.com/10/people/people6.jpg" alt="" /><br />She Rocks clothing, 2010</span>
<span class="marqueeimage"><img src="http://www.photosbyhanna.com/10/people/people7.jpg" alt="" /><br />Personal work, 2008</span>
<span class="marqueeimage"><img src="http://www.photosbyhanna.com/10/people/people8.jpg" alt="" /><br />Hen party in Kotka, 2007</span>
<span class="marqueeimage"><img src="http://www.photosbyhanna.com/10/people/people9.jpg" alt="" /><br />Hen party in Kotka, 2007</span>
<span class="marqueeimage"><img src="http://www.photosbyhanna.com/10/people/people10.jpg" alt="" /><br />Tanssikoulu Jasmiina Christmas party, 2007</span>
<span class="marqueeimage"><img src="http://www.photosbyhanna.com/10/people/people11.jpg" alt="" /><br />Restaurant Carlito's, 2009</span>
<span class="marqueeimage"><img src="http://www.photosbyhanna.com/10/people/people12.jpg" alt="" /><br />Demonstration / WSOYpro Oy, 2010</span>
<span class="marqueeimage"><img src="http://www.photosbyhanna.com/10/people/people13.jpg" alt="" /><br />Girl's night out / Ylioppilaslehti, 2008</span>
<span class="marqueeimage"><img src="http://www.photosbyhanna.com/10/people/people14.jpg" alt="" /><br />Family day at Sello / Espoon Järjestöjen Yhteisö Ry, 2009</span>
<span class="marqueeimage"><img src="http://www.photosbyhanna.com/10/people/people15.jpg" alt="" /><br />Personal work, 2010</span>

</div>

I think this works better in ie as well, although the margin to the top looks a little different in ie

[goldengirl]

Again - thank you so much!

(Also, in case this helps anyone else who is stuck - I set up a different stylesheet just for IE so it had a different top margin for the images: http://css-tricks.com/how-to-create-...ly-stylesheet/)