Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 7 1 2 3 ... LastLast
Results 1 to 10 of 67

Thread: Image scroller

  1. #1
    Senior Member
    Join Date
    Jan 2011
    Posts
    148
    Member #
    26229
    Liked
    1 times
    Hi all,

    Wondering if i could get a bit of advice on an image scroller script.

    I'd like to allow people to scroll through a number of images using a simple left and right button on the page.
    Ideally I'd only have one image on the page at a time rather than a scroll where you can see a number of images.

    Any help would be greatly appreciated...

    Thanks,
    John

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Google is your friend
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Member
    Join Date
    May 2011
    Posts
    32
    Member #
    27678
    Liked
    3 times
    Piece o' cake.

    Create an array of images: var images = ['a.jpg', 'b.jpg', ... ] // or .png, .gif, ...
    Create a pointer: var ptr = 0;
    Display an image: var image.src = images[ptr]; // "image" is your <img> element

    Respond to button clicks: function next() { ptr++; image.src = images[ptr]; }
    Function prev() is about the same.

    Check that "ptr++" doesn't fall past the end: if ( ptr === images.length ) { ptr = 0; }
    Ditto for past the other end: if ( ptr < 0 ) ...

    Martin
    Adrian Sane likes this.

  5. #4
    Senior Member
    Join Date
    Jan 2011
    Posts
    148
    Member #
    26229
    Liked
    1 times
    Sorry Martin, just seen this reply... thanks for your help... I'll give it a go and let you know how I get on...

  6. #5
    Member
    Join Date
    May 2011
    Posts
    32
    Member #
    27678
    Liked
    3 times
    Jonny B,

    Guitar player?

    I've just finished two articles on this, targeted at the beginning JSer. Let me know if you need help.

    Martin

  7. #6
    Senior Member
    Join Date
    Jan 2011
    Posts
    148
    Member #
    26229
    Liked
    1 times
    Hey Martin,

    Ha, nope not me!
    So I've not been able to get that to work, maybe if we could go from the begining?
    would it help if I sent you the files to look at?? if so send me your e-mail and i'll drop them over...

    Sorry, I'm fairly new to .js

  8. #7
    Member
    Join Date
    May 2011
    Posts
    32
    Member #
    27678
    Liked
    3 times
    Hi again, Jonny not B Good.

    No files, please. Begin at the beginning. (And no apologies for being new to JS. None of us were born fluent in JS. Since JS was new in '95, none of us could even have learned it from our parents.)

    Beginning: Can you make an HTML page with two buttons and a rectangle where you want the photos?

    Can you get the buttons to send alerts, such as "Left clicked!" and "Right clicked!"?

    Now try this, but use divs for the buttons (not <button> elements, and most certainly not <input type=...> elements). Got some nice arrow graphics? Use 'em. Don't got? Try a "<" and a ">" but make the font really big and bold.

    I'd post my article but it's in the hard disk equivalent of a moving van's boxes. Needs to be unpacked.

    Hints: give those divs IDs. Use code like this:

    Code:
    var left = document.getElementById( 'left_arrow' );
    
        left.onclick = left_click;
    
    function left_click() { alert( 'Hey! I got a left click!' ); }
    Do NOT put parens after the "left_click" where you assign it to the onclick event. Putting parens there means "execute this function" which will fire it when your page loads. You want it to wait patiently, firing if you click on the left-arrow div.

    Get that to work, then the right arrow, and then all you need is to flop pictures. See what you come up with and get back to me. My puppy has promised to take me out for a hike today, but otherwise I'm at my computer.

    Martin

    How come nobody's ever written a "Martin" song? At Christmas we sing "Good King Wenceslas" which is really the story of King (and then Saint) Martin, but no one save me knows that. Oh well. Saint Martin's really big in Germany. Good excuse for hoisting a liter in the beer garden, 11AM, Nov. 11.
    TheGAME1264 likes this.

  9. #8
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Can't do that in Canada. November 11 is Remembrance Day (we remember the soldiers that died in WWI and WWII).
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  10. #9
    Member
    Join Date
    May 2011
    Posts
    32
    Member #
    27678
    Liked
    3 times
    Quote Originally Posted by TheGAME1264, post: 206356
    Can't do that in Canada. November 11 is Remembrance Day (we remember the soldiers that died in WWI and WWII).
    As Pooh said, "Oh bother."

    Where is Chuck Berry when you really need him?

  11. #10
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Chuck? Why, he's d[COLOR=rgb(0, 0, 0)]eep down in Louisiana close to New Orleans. w[/COLOR][COLOR=rgb(0, 0, 0)]ay back up in the woods among the evergreens. [/COLOR]

    [COLOR=rgb(0, 0, 0)][/COLOR]

    [COLOR=rgb(0, 0, 0)]
    [/COLOR]
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!


Page 1 of 7 1 2 3 ... LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:14 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com