Advanced Search

Results 1 to 6 of 6

Thread: Text and Image Crawler WITH Captions for Images?

  1. #1
    Join Date
    Jul 2010
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Text and Image Crawler WITH Captions for Images?

    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!

  2. #2
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    I tried to change the image array to this
    Code:
    <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
    Code:
    .marqueeimage { display:inline-block; text-align:center;}
    and it seems to work, in my browser anyway.

  3. The Following User Says Thank You to azoomer For This Useful Post:

    goldengirl (07-31-2010)

  4. #3
    Join Date
    Jul 2010
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Thanks so much for your help - works perfectly!

  5. #4
    Join Date
    Jul 2010
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Doesn't work in IE!

    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?!

  6. #5
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    try this instead
    Code:
    <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

  7. The Following User Says Thank You to azoomer For This Useful Post:

    goldengirl (08-04-2010)

  8. #6
    Join Date
    Jul 2010
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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/)

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •