www.webdeveloper.com
Results 1 to 4 of 4

Thread: Script Order Error

Threaded 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.

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