Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4

Thread: jquery gallery

  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    jquery gallery

    I've been self learning Javascript and jquery and i know a little bit. I want to put it to practice and create a jquery sliding gallery?

    i found the jquery cycle plugin but i cant get it to work.

    $(document).ready(init);

    function init() {
    $(".class").cycle();
    }

    what is the init Fn , is is a js built in Fn??
    Last edited by edgich; 01-09-2013 at 03:17 PM. Reason: revision

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,607
    Thanks
    6
    Thanked 997 Times in 970 Posts
    init is the function you created after the document.ready. It just says “run the function called ‘init’ when the DOM is ready”, you could as well write it like:
    PHP Code:
    $(document).ready(function() {
      $(
    '.class').cycle();
    }); 
    Which is the usual way it’s done. But there’s even a shortcut for this, just write:
    PHP Code:
    $(function() {
      
    // JS code here
    }); 
    Now, in order to tell you why your slideshow isn’t working we need to see your HTML, too. What does the JS error console say?

  • Users who have thanked VIPStephan for this post:

    edgich (01-12-2013)

  • #3
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Here's my HTML...i used some random pics i googled...i still can't get it to work

    <!DOCTYPE html>
    <html>
    <head>
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="test.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>

    </head>

    <body>
    <script type="text/javascript">
    $(document).ready(function(){
    $('.pics').cycle('fade');
    });

    </script>
    <div class="pics">
    <img src="http://cdni.tutorialchip.com/wp-content/uploads/2012/01/music-players-for-websites-200x200.jpg" width="200" height="200" />
    <img src="http://cbswxrt2.files.wordpress.com/2012/06/bernie-movie-poster-200x200.jpg?w=300" width="200" height="200" />
    <img src="http://upload.wikimedia.org/wikipedia/en/f/f6/Eons-globe-RGB-200x200.jpg" width="200" height="200" />
    </div>
    </body>

  • #4
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I got it working....i love jquery.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •