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.

Results 1 to 3 of 3

Thread: gallery

  1. #1
    Senior Member
    Join Date
    Apr 2016
    Posts
    717
    Member #
    53891
    Liked
    11 times

    gallery

    ive been playing around with a pretty simple image gallery, and I love it, mainly because it has such a tiny amount of code, I can actually employ it to the page I'm working on, what I'm wondering (because I don't know any jquery) is how would I go about adding an image picker (you know those lil circles that select the corresponding photo) to the bottom of the slider? heres the code

    html
    <main>
    <div id="slideshow">
    <div>
    <img src="../images/124.jpg">
    </div>
    <div>
    <img src="../images/tipohb.jpg">
    </div>
    <div>
    <img src="../images/tiposw.jpg">
    </div>
    <div>
    <img src="../images/tiposd.jpg">
    </div>
    <div>
    <img src="../images/500.jpg">
    </div>
    <div>
    <img src="../images/500x.jpg">
    </div>
    <div>
    <img src="../images/500l.jpg">
    </div>
    <div>
    <img src="../images/panda.jpg">
    </div>
    </div>
    </main>
    css
    #slideshow {
    margin: 0px auto;
    position: relative;
    }

    #slideshow > div {
    position: absolute;
    top: 0px;
    }
    jquery
    <script>

    $(document).ready(function(){

    $("#slideshow > div:gt(0)").hide();

    setInterval(function() {
    $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
    }, 3000);
    });
    </script>
    I must say, I'm not looking for someone to do this for me, I just need an idea of how it should be done, best practices etc

    thanks

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Take a look through the slider's documentation. They likely have that option already built-in, you just have to turn it on.

    Adding it yourself will be more of a pain than it's worth.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,717
    Member #
    5580
    Liked
    718 times
    Also, if you only have the photo filenames and not any titles or captions, you can use PHP really easy to automatically grab all .jpg photos from your directory and dynamically create your HTML. You'll never have to edit your HTML code when you add or delete photos. As soon as you do other things, like captions or titles, then you'll need some sort of database.



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 06:17 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com