Script Order Error

**truefreestyle** · 06-24-2009 02:44 AM

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> » Advanced Example</h1>


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

<div style="clear: both;"></div>
</div>
</div>
<div id="footer">© 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>

Thread: Script Order Error

Thread Tools

Display

Threaded View

Script Order Error

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions