making a carousel optional?

Discussion in 'Javascript' started by geoff, Apr 29, 2011.

  1. geoff

    geoff Guest


    I am trying to make the running of a carousel of images optional (for
    those who are annoyed by moving images!).

    If you look at

    you will see that it runs automatically.

    Looking at

    there is the start carousel button.

    I am using document.getElementById('carouse').innerHTML to load an
    image into <div id='carousel'> when the page loads.

    Then startCarousel() puts the markup for the carousel into the div and
    then runs goCarousel() which starts the carousel running.

    Problem is - the carousel runs the first image and then stops!

    Any ideas please!


    geoff, Apr 29, 2011
    1. Advertisements

  2. Am 2011-04-29 09:15, meinte:
    So your

    $(document).ready(function() {
    largeFeatureWidth: 400,
    largeFeatureHeight: 250,
    smallFeatureWidth: 80,
    smallFeatureHeight: 50,
    trackerIndividual: false,
    trackerSummation: false

    doesn't work as intended? And you really think that someone here is
    willing to dig through some minified jQuery plugin script?

    I suppose some jQuery forum is a better place to ask (whether the
    answers will be of any help is a different matter). Another option would
    be the documentation of the plugin - I assume there is a proper API

    Gregor Kofler, Apr 29, 2011
    1. Advertisements

  3. geoff

    geoff Guest


    No!! I wouldn't dream of asking that!


    without the initial image and having the carousel html markup in the
    body and having a button to run goCarousel(), the carousel works as it

    I was therefore hoping that there was a simple error or two in my
    javascript logic in


    geoff, Apr 29, 2011
  4. geoff

    S.T. Guest

    It's a little confusing to look at right now. Maybe a test page that
    strips out all the HTML, scripts, etc aside from what's needed for this
    carousel feature.

    Couple things to look at to start:

    You're nesting DIVs with the same ID's inside each other with this line:

    document.getElementById('carousel').innerHTML = "<div id=\"carousel\">..

    You don't want to do that as you're effectively saying "inside the
    #carousel DIV insert another #carousel DIV". Strip the outside <div
    id=carousel></div> from that innerHTML string.

    Also you're loading the jQuery script four times which, while probably
    not hurting anything, isn't needed (and may well cause heart attacks te
    a few of the anti-jQuery zealots in this newsgroup). Load it one time
    before any of the jQuery specific plug-in scripts.
    S.T., Apr 29, 2011
  5. geoff

    geoff Guest

    Brilliant!! That was the key error - it'w working now.


    geoff, Apr 29, 2011
  6. geoff

    geoff Guest

    I have this running now at

    Thanks again!

    geoff, Apr 29, 2011
  7. Am 2011-04-29 19:22, meinte:

    Doesn't work here. FF4 - once started the opacity of the caption div
    changes frequently and style properties of the first image change, but
    the other images never show up.

    Since you made a "same-id-twice" error before: The (static) markup still
    has plenty of errors: several divs that are not closed properly - all of
    them in the carousel markup.

    Gregor Kofler, Apr 29, 2011
  8. geoff

    geoff Guest

    apologies Gregor - I got into a bit of a tangle but the

    shows no errors in W3C Validator and the carousel runs/stops using the

    If you have the patience please take another look and let me know if

    I have checked using Firefox 4.0.1 but the button does not start he
    carousel with IE9 ??

    geoff, Apr 29, 2011
  9. Am 2011-04-29 21:34, meinte:
    Perhaps a cross-browser issue of the cross-browser library? (Or the
    plugin building on top of this library.)

    Gregor Kofler, Apr 30, 2011
  10. geoff

    SAM Guest

    Le 29/04/11 14:18, a écrit :
    I can't say if it is a JS or HTML error (I think that's html)
    but on that page (in that file) are missing your images

    <div id="carousel">
    <div class="carousel-feature">
    <a href="sound.htm">
    <img class="carousel-image"
    src="../../assets/images/c-sound3.jpg" alt="Image Caption">
    <div class="carousel-caption">
    <p style

    and so on in the div "carousel-container"

    anyway it's of no importance
    .... the page :
    doesn't work for me.
    SAM, Apr 30, 2011
  11. geoff

    geoff Guest

    I think this was when I was changing things - please see

    this should be OK.

    should work now.

    Do let me know if it doesn't work for you!


    geoff, Apr 30, 2011
  12. geoff

    geoff Guest


    The error has disappeared now that I have used a div within a div

    <div id="carousel"><div id="carousel-pic"></div></div>

    instead of using the same div for both the image and the carousel.

    the inner div is used for the image displayed before the carousel is


    which works in the latest IE, FF, Chrome, Opera and Safari browsers.


    geoff, Apr 30, 2011
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.