SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2005
    Location
    Osoyoos BC Canada
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript slideshow?

    I recently built a site for a conference, which has several sponsors. I added some php to the pages so that a random logo of one of them shows up each time a page is requested. Clicking on the logo takes the user to that sponsor's site, and hovering over the logo in FF and Safari/opera (not, of course IE) shows a tooltip with title "description of the company".

    So, a typical logo's html , generated server side looks like this:

    Code:
    <a href="http://www.marmot.com" rel="external"><img src="sponsors_logos/marmot4life_175_21.png"  height="21" width="175" alt="Marmot's logo" title="NB. External link. Opens in a new tab/window. Marmot, maker of packs, tents, sleeping bags and outdoor clothing is the Presenting Sponsor for ISSW2008" /></a>
    The organizers wanted the linked page to open in a new window/tab if the logo is clicked on, so in order to get the code to validate, I used Kevin Yank's javascript function external_link.js, so when a logo is clicked I then open the link in new window/tab, using the rel="external" tag.

    All was well, till the organizer's asked me to make the sponsor's logos rotate at 4 second intervals, which obviously requires it all to be done in javascript at the browser end.

    I'm really not well up on javascript, and while I can find several slide show scripts on the net, I have some questions that stump me, and wonder of anyone could please offer advice.

    1. If Javascript is disabled, I don't want the same logo to always appear. Thus I suspect that I should leave in place my php script sending out a random logo with each page load in place.
    2. If I wrap the code shown above in div with an id, then I can target it in javascript.
    3. I then want to replace the image and it's link and text/title/alt/size etc with another every 4 secs.


    I just don't see how to do this, I can set up a timer, based on the number of items in an array, make an image change every x secs, but don't know how to also add all the other parts to the code.

    Thanks!

  2. #2
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You are soooooo... close already.

    1. Absolutely. If you remove your PHP script you'll get the same image everytime. If you leave it in place, it will swap every page load. That shouldn't interfere with your javascript at all. The only behavior that will look weird is when the PHP selected logo is the same as the 1st logo in the array. Then it will look like the 1st image stays up for 8 seconds, when it was really "swapped out for itself" after 4. Fixing that is possible but probably not worth the trouble. If someone notices, ask them to show you, and chances are they won't be able to duplicate it. Sorry, I get punchy on a Saturday night.

    2. I don't think you need to, but if you want to wrap it in a div there's no reason you can't. I would try it without, and wrapping it in a div is one possible solution if you're having trouble.

    3. If you can swap out the pictures then you're already using javascript to change img.src every 4 seconds, correct? You just need to target the other attributes you want to affect. img.src isn't part of javascript, it's part of the DOM which javascript can access. All the other pieces you want can be referenced via the DOM as well. W3 schools has a great Javascript reference. Their information on the DOM for images is at...

    http://www.w3schools.com/htmldom/dom_obj_image.asp

    To change the links, use the DOM to reference the attributes of the anchor...

    http://www.w3schools.com/htmldom/dom_obj_anchor.asp
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.

  3. #3
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by colinmcc View Post
    The organizers wanted the linked page to open in a new window/tab if the logo is clicked on, so in order to get the code to validate, I used Kevin Yank's javascript function external_link.js, so when a logo is clicked I then open the link in new window/tab, using the rel="external" tag.
    That's O.K., or for just one link give it an ID, then somewhere below
    Code:
    <script type='text/javascript'>
    document.getElementById('myLink').target='_blank';
    </script>
    All was well, till the organizer's asked me to make the sponsor's logos rotate at 4 second intervals, which obviously requires it all to be done in javascript at the browser end.

    I'm really not well up on javascript, and while I can find several slide show scripts on the net, I have some questions that stump me, and wonder of anyone could please offer advice.

    • If Javascript is disabled, I don't want the same logo to always appear. Thus I suspect that I should leave in place my php script sending out a random logo with each page load in place.
    Yes.
    • If I wrap the code shown above in div with an id, then I can target it in javascript.
    • I then want to replace the image and it's link and text/title/alt/size etc with another every 4 secs.
    Try RBanner, which you should find does all of the above.
    Tab-indentation is a crime against humanity.

  4. #4
    .* draziW tnioPetiS *. bronze trophy
    Join Date
    Jun 2004
    Location
    "Then I figure the most good good guy will win."
    Posts
    1,666
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not sure if this will help, but Jquery innerfade might give you some ideas.

  5. #5
    SitePoint Zealot
    Join Date
    Jul 2005
    Location
    Osoyoos BC Canada
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks folks, especially Logic Ali whose mention of Rbanner did the trick. With js disabled each page has a new random logo served up from php , while if js is 'on' logos rotate every 6 secs.

  6. #6
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by colinmcc View Post
    Thanks folks, especially Logic Ali whose mention of Rbanner did the trick. With js disabled each page has a new random logo served up from php , while if js is 'on' logos rotate every 6 secs.
    I'm sure the ISSW will be pleased.
    Tab-indentation is a crime against humanity.


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
  •