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>

**funmediadesign** · 06-24-2009 02:55 AM

test.html line 40 .noscript css style class is showing >> display:none

remove that css style setting and everything shows up.

**truefreestyle** · 06-24-2009 03:13 AM

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?

**truefreestyle** · 06-24-2009 03:36 AM

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: Script Order Error

Thread Tools

Display

Hybrid View

Script Order Error

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions