www.webdeveloper.com
Results 1 to 4 of 4

Thread: Script Order Error

Hybrid View

  1. #1
    Join Date
    Jun 2009
    Posts
    9

    Unhappy Script Order Error

    Ok, so I'm one step away from getting this script to run, but here's the problem. My DOM loads and the gallery script I'm using seems to be running while the DOM is executing and therefore crashes the DOM (at least thats what seems to be happening). I have this odd feeling the problem is a simple solution that would only take a second, so please have a look.

    Fixed a few things I found, but still not working. Updated code too.

    <html>
    <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Galleriffic | Advanced Example</title>
    <link rel="stylesheet" href="css/basic.css" type="text/css" />
    <link rel="stylesheet" href="css/galleriffic.css" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.galleriffic.js"></script>
    <script type="text/javascript">
    $(document).ready(function()
    {
    $.get('xml/portfolio.xml', function(d){
    $('#thumbs').append('<ul class="thumbs noscript" />');

    $(d).find('project').each(function(){

    var $project = $(this);
    var title = $project.find('title').text();
    var description = $project.find('description').text();
    var imageurl = $project.find('imageurl').text();
    var link = $project.find('link').text();
    var thumb = $project.find('thumbnail1').text();

    var html = '<li> <a class="thumb" href="' + thumb + '" title="' + title + '">';
    html += '<img src="' + imageurl + '" alt="' + description + '"> </a>';
    html += '<div class="caption">';
    html += '<div class="download">';
    html += '<a href="' + imageurl + '">View Website</a>';
    html += '</div>';
    html += '<div class="image-title">' + title + '</div>';
    html += '<div class="image-desc">' + description + '</div>';
    html += '</div> </li>'

    $('ul').append($(html));

    $('.loadingPic').fadeOut(1400);
    });
    });
    });
    </script>
    </head>
    <body>
    <div id="page">
    <div id="container">
    <h1><a href="index.html">Galleriffic</a> &raquo; Advanced Example</h1>

    <!-- Start Advanced Gallery Html Containers -->
    <div id="gallery" class="content">
    <div id="controls" class="controls"></div>
    <div id="loading" class="loader"></div>
    <div id="slideshow" class="slideshow"></div>
    <div id="caption" class="embox"></div>
    </div>
    <div id="thumbs" class="navigation">

    </div>
    <!-- End Advanced Gallery Html Containers -->
    <div style="clear: both;"></div>
    </div>
    </div>
    <div id="footer">&copy; 2009 Trent Foley</div>
    <script type="text/javascript">
    // We only want these styles applied when javascript is enabled
    $('div.navigation').css({'width' : '300px', 'float' : 'left'});
    $('div.content').css('display', 'block');

    // Initially set opacity on thumbs and add
    // additional styling for hover effect on thumbs
    var onMouseOutOpacity = 0.67;
    $('#thumbs ul.thumbs li').css('opacity', onMouseOutOpacity)
    .hover(
    function () {
    $(this).not('.selected').fadeTo('fast', 1.0);
    },
    function () {
    $(this).not('.selected').fadeTo('fast', onMouseOutOpacity);
    }
    );

    $(document).ready(function() {
    // Initialize Advanced Galleriffic Gallery
    var galleryAdv = $('#gallery').galleriffic('#thumbs', {
    delay: 2000,
    numThumbs: 12,
    preloadAhead: 10,
    enableTopPager: true,
    enableBottomPager: true,
    imageContainerSel: '#slideshow',
    controlsContainerSel: '#controls',
    captionContainerSel: '#caption',
    loadingContainerSel: '#loading',
    renderSSControls: true,
    renderNavControls: true,
    playLinkText: 'Play Slideshow',
    pauseLinkText: 'Pause Slideshow',
    prevLinkText: '&lsaquo; Previous Photo',
    nextLinkText: 'Next Photo &rsaquo;',
    nextPageLinkText: 'Next &rsaquo;',
    prevPageLinkText: '&lsaquo; Prev',
    enableHistory: true,
    autoStart: false,
    onChange: function(prevIndex, nextIndex) {
    $('#thumbs ul.thumbs').children()
    .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
    .eq(nextIndex).fadeTo('fast', 1.0);
    },
    onTransitionOut: function(callback) {
    $('#caption').fadeOut('fast');
    $('#slideshow').fadeOut('fast', callback);
    },
    onTransitionIn: function() {
    $('#slideshow, #caption').fadeIn('fast');
    },
    onPageTransitionOut: function(callback) {
    $('#thumbs ul.thumbs').fadeOut('fast', callback);
    },
    onPageTransitionIn: function() {
    $('#thumbs ul.thumbs').fadeIn('fast');
    }
    });
    });
    </script>
    </body>
    </html>
    Last edited by truefreestyle; 06-24-2009 at 03:34 AM.

  2. #2
    Join Date
    Jun 2009
    Posts
    5
    test.html line 40 .noscript css style class is showing >> display:none

    remove that css style setting and everything shows up.
    Last edited by funmediadesign; 06-24-2009 at 02:57 AM.

  3. #3
    Join Date
    Jun 2009
    Posts
    9
    Umm, even when that's turned on the images are not parsed by the Galleriffic script properly. Without the Galleriffic script everything loads perfectly fine on the page, but when loaded and parsed for the gallery everything crashes. I was able to get the hide property to go away, but it was just masking up a larger problem. Is there a way to get it to load the scripts in a different order?

  4. #4
    Join Date
    Jun 2009
    Posts
    9
    Updated script and fixed some bugs, but it still won't load properly. Please take a look at the script again (as I edited and posted the more complete version).

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles