making a carousel optional?

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

  1. geoff

    geoff Guest

    Hello

    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

    http://www.micro-active.com/styles/style1/index.htm

    you will see that it runs automatically.

    Looking at

    http://www.micro-active.com/styles/style1/index-test.htm

    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!

    Cheers

    Geoff
     
    geoff, Apr 29, 2011
    #1
    1. Advertisements

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

    $(document).ready(function() {
    $("#carousel").featureCarousel({
    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
    documentation.

    Gregor
     
    Gregor Kofler, Apr 29, 2011
    #2
    1. Advertisements

  3. geoff

    geoff Guest

    Gregor,

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

    Using

    http://www.micro-active.com/styles/style1/index-test2.htm

    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
    should.

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

    http://www.micro-active.com/styles/style1/index-test.htm

    Cheers

    Geoff
     
    geoff, Apr 29, 2011
    #3
  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
    #4
  5. geoff

    geoff Guest

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

    Cheers

    Geoff
     
    geoff, Apr 29, 2011
    #5
  6. geoff

    geoff Guest

    I have this running now at

    http://www.micro-active.com/styles/style8/index.htm

    Thanks again!

    Geoff
     
    geoff, Apr 29, 2011
    #6
  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
     
    Gregor Kofler, Apr 29, 2011
    #7
  8. geoff

    geoff Guest

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

    http://www.micro-active.com/styles/style8/index.htm

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

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

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

    Geoff
     
    geoff, Apr 29, 2011
    #8
  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
     
    Gregor Kofler, Apr 30, 2011
    #9
  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">
    </a>
    <div class="carousel-caption">
    <p style

    and so on in the div "carousel-container"


    anyway it's of no importance
    .... the page :
    <http://www.micro-active.com/styles/style1/sound.htm>
    doesn't work for me.
     
    SAM, Apr 30, 2011
    #10
  11. geoff

    geoff Guest

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

    http://www.micro-active.com/styles/style1/index.htm

    this should be OK.
    http://www.micro-active.com/styles/style1/sound.htm

    should work now.

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

    Cheers

    Geoff
     
    geoff, Apr 30, 2011
    #11
  12. geoff

    geoff Guest

    Gregor,

    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
    started.

    see

    http://www.micro-active.com/styles/style8/index.htm

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

    Cheers

    Geoff
     
    geoff, Apr 30, 2011
    #12
    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.