Results 1 to 2 of 2

Thread: help with my jquery slideshow: javascript can't find code to load images

  1. #1
    Join Date
    Jun 2010
    Posts
    7

    Question help with my jquery slideshow: javascript can't find code to load images

    I have a jquery galleria slideshow which i got to work until I placed the code into my web page. i think that hte problem is that the javascript element isn't loading the images the way it's supposed to because the code is now burried within a a div tag that is invisible when the page is loaded .

    I believe it's this line: $('ul.gallery_demo').galleria({

    that is supposed to load images into the un ordered list in a div tag that is invisible when the page loads.

    here's my code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html><head>
    <title>Galleria Demo 2</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="imagetoolbar" content="false">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="galleria.css" rel="stylesheet" type="text/css" media="screen">
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="jquery.galleria.pack.js"></script>
    <script type="text/javascript">

    jQuery(function($) {

    $('gallery_demo_unstyled').addClass('gallery_demo'); // adds new class name to maintain degradability
    $('.nav').css('display','none'); // hides the nav initially

    $('ul.gallery_demo').galleria({
    history : false, // deactivates the history object for bookmarking, back-button etc.
    clickNext : false, // helper for making the image clickable. Let's not have that in this example.
    insert : undefined, // the containing selector for our main image.
    // If not found or undefined (like here), galleria will create a container
    // before the ul with the class .galleria_container (see CSS)
    onImage : function() { $('.nav').css('display','block'); } // shows the nav when the image is showing
    });
    });

    </script>
    <style media="screen,projection" type="text/css">

    /* BEGIN DEMO STYLE */
    *{margin:0;padding:0}
    body{padding:20px;background:white;background:white;color:#555;font:80%/140% 'helvetica neue',sans-serif;width:900px;margin: 0 auto;}
    h1,h2{font:bold 80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}
    a{color:#348;text-decoration:none;outline:none;}
    a:hover{color:#67a;}
    .caption{color:#888;position:absolute;top:250px;left:3px;width:200px;}
    .demo{position:relative;margin-top:2em;}
    .gallery_demo{width:200px;float:left;}
    .gallery_demo li{width:55px;height:70px;border:3px double #eee;margin: 0 2px 2px 0;background:#eee;}
    .gallery_demo li.hover{border-color:#bbb;}
    .gallery_demo li.active{border-style:solid;border-color:#222;}
    .gallery_demo li div{left:240px}
    .gallery_demo li div .caption{font:italic 0.7em/1.4 georgia,serif;}
    .img {width: 50px; height: auto;}
    .galleria_container{ margin:0 auto 600px auto;height:313px;width:500px;float:left;}

    .nav{padding-top:15px;clear:both;}

    .info{text-align:left;margin:30px 0;border-top:1px dotted #221;padding-top:30px;clear:both;}
    .info p{margin-top:1.6em;}

    .nav{position:absolute;top:410px;left:0;}

    </style>

    </head>
    <body>
    <h1>Galleria Demo 02</h1>
    <div class="demo">
    <ul class="gallery_demo">
    <li><img src="images/portfolio01.jpg" alt="Flowing Rock" title="Flowing Rock Caption"></li>
    <li><img src="images/portfolio02.jpg" alt="Stones" title="Stones - from Aple images"></li>
    <li><img src="images/portfolio03.jpg" alt="Grass Blades" title="Apple nature desktop images"></li>
    <li><img src="images/portfolio04.jpg" alt="Ladybug" title="Ut rutrum, lectus eu pulvinar elementum, lacus urna vestibulum ipsum"></li>
    <li><img src="images/portfolio05.jpg" alt="Lightning" title="Black &amp; White"></li>
    <li><img src="images/portfolio06.jpg" alt="Lotus" title="Fusce quam mi, sagittis nec, adipiscing at, sodales quis"></li>
    <li><img src="images/portfolio07.jpg" alt="Mojave" title="Suspendisse volutpat posuere dui. Suspendisse sit amet lorem et risus faucibus pellentesque."></li>
    <li><img src="images/portfolio08.jpg" alt="Pier" title="Proin erat nisi"></li>
    <li><img src="images/portfolio09.jpg" alt="Sea Mist" title="Caption text from title"></li>
    </ul>
    <div class="galleria_container"></div>
    <p class="nav"><a href="#" onclick="$.galleria.prev(); return false;">previous</a> | <a href="#" onclick="$.galleria.next(); return false;">next</a></p>
    </div>

    </body>
    </html>

  2. #2
    Join Date
    Jun 2010
    Location
    Canada
    Posts
    2
    If you take some of your scripts and make them external to the page I believe the page should load just fine.

    Here is a couple examples of how to refer to it:
    Just place them in the head section of your page.

    <script type="text/javascript" src="Scripts/example.js"></script>

    For css it works pretty much the same:

    <link rel="stylesheet" type="text/css" href="example.css" />


    I hope this helps.

Similar Threads

  1. load javascript before images?
    By ranteo in forum Client & Server Side Scripting (PHP, ASP, JavaScript)
    Replies: 1
    Last Post: 01 Jan 2010, 07:17 PM
  2. JavaScript menu with transparent images (round corners)
    By Mark G in forum Client & Server Side Scripting (PHP, ASP, JavaScript)
    Replies: 0
    Last Post: 02 Sep 2006, 09:21 PM
  3. Javascript calendar resizing on load
    By adgfx in forum Client & Server Side Scripting (PHP, ASP, JavaScript)
    Replies: 1
    Last Post: 30 Apr 2006, 10:05 AM

Tags for this Thread

Posting Permissions

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