PDA

View Full Version : Text and Image Crawler WITH Captions for Images?



goldengirl
07-30-2010, 04:00 PM
1) Script Title: Text and Image Crawler

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex2/crawler/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
07-30-2010, 06:21 PM
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
07-31-2010, 02:32 PM
Thanks so much for your help - works perfectly! :)

goldengirl
08-04-2010, 06:25 PM
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
08-04-2010, 07:22 PM
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
08-04-2010, 08:08 PM
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-an-ie-only-stylesheet/)