Menu
I am learning JQuery, and I have ran into an odd issue. I made a slideshow, and it works in IE, Firefox 3.0 and Firefox 3.5, but the initial image doesn't work in Chrome.
The script just cycles through a list of images and resizes the divs (image, caption) based on the size of the viewing window. If I move the $(document).ready(function() { }); script to the end of the body, the script works OK.
I was under the impression that the $(document).ready function wouldn't be called until the document had totally loaded. Is that correct, and the Chrome render engine is doing something odd, or I am doing something wrong?
here is the code:
slideShow.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="Stylesheet" type="text/css" href="css/main.css" />
<script src="scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script src="scripts/jquery.slideShow.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
slideShow();
});
</script>
</head>
<body>
<div id="gallery">
<a href="#" class="show">
<img src="images/bees1_edited.jpg" alt="Bees" title="" rel="<h3>Bees!</h3> Some bees in my lavender." /></a>
<a href="#">
<img src="images/bee1_edited.jpg" alt="Bee One" title="" rel="<h3>Bee</h3> Close-up of a bee on a lavender flower." />
</a>
.
.
.
<div class="caption">
<div class="content">
</div>
</div>
</div>
<div class="clear">
</div>
</body>
</html>
jquery.slideShow.js
function slideShow() {
//Set the opacity of all images to 0
$('#gallery a').css({ opacity: 0.0 });
//Get the first image and display it (set it to full opacity)
$('#gallery a:first').css({ opacity: 1.0 });
//Set the caption background to semi-transparent
$('#gallery .caption').css({ opacity: 0.7 });
//Resize the width of the caption according to the image width
$('#gallery a:first').find('img').css({ height: $('#gallery a:first').find('img').height() });
$('#gallery a:first').find('img').css({ width: $('#gallery a:first').find('img').width() });
var captionPosition = parseInt($('#gallery a:first').find('img').css('height')) * -1;
if ($(window).height() < $('#gallery a:first').find('img').height()) {
var imageWidth = parseInt($('#gallery a:first').find('img').width());
var imageHeight = parseInt($('#gallery a:first').find('img').height());
$('#gallery a:first').find('img').css({ height: $(window).height() - 10 });
var cssHeight = parseInt($('#gallery a:first').find('img').css('height'));
$('#gallery a:first').find('img').css({ width: parseInt((cssHeight * imageWidth) / cssHeight) });
captionPosition = parseInt($('#gallery a:first').find('img').css('height') * -1);
}
if ($(window).width() < $('#gallery a:first').find('img').width()) {
var imageWidth = parseInt($('#gallery a:first').find('img').width());
var imageHeight = parseInt($('#gallery a:first').find('img').height());
$('#gallery a:first').find('img').css({ width: ($(window).width() - 50) });
var cssWidth = parseInt($('#gallery a:first').find('img').css('width'));
$('#gallery a:first').find('img').css({ height: parseInt((cssWidth * imageHeight) / imageWidth) });
captionPosition = parseInt($('#gallery a:first').find('img').css('height')) * -1;
}
$('#gallery .caption').css({ width: $('#gallery a:first').find('img').css('width') });
$('#gallery .caption').css({ bottom: captionPosition });
//Get the caption of the first image from REL attribute and display it
$('#gallery .content').html($('#gallery a:first').find('img').attr('rel')).animate({ opacity: 0.7 }, 400);
//Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
setInterval('gallery()', 6000);
}
function gallery() {
//if no IMGs have the show class, grab the first image
var current = ($('#gallery a.show') ? $('#gallery a.show') : $('#gallery a:first'));
//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().hasClass('caption')) ? $('#gallery a:first') : current.next()) : $('#gallery a:first'));
//Get next image caption
var caption = next.find('img').attr('rel');
//Set the fade in effect for the next image, show class has higher z-index
next.css({ opacity: 0.0 }).addClass('show').animate({ opacity: 1.0 }, 1000);
//Hide the current image
current.animate({ opacity: 0.0 }, 1000).removeClass('show');
next.find('img').css({ height: next.find('img').height() });
next.find('img').css({ width: next.find('img').width() });
var captionPosition = parseInt(next.find('img').css('height')) * -1;
if (next.find('img').height() > $(window).height()) {
var imageHeight = parseInt(next.find('img').height());
var imageWidth = parseInt(next.find('img').width());
next.find('img').css({ height: (parseInt($(window).height()) - 50) });
var cssHeight = parseInt(next.find('img').css('height'));
var testVal = parseInt((cssHeight * imageWidth) / imageHeight);
next.find('img').css({ width: testVal });
//alert('css width=' + next.find('img').css('width') + ', css height=' + cssHeight + ', img width = ' + imageWidth + ', img height = ' + imageHeight + ', window width = ' + $(window).width() + ', window height = ' + $(window).height());
captionPosition = parseInt(cssHeight * -1);
}
if (parseInt(next.find('img').css('width')) > parseInt($(window).width())) {
var imageHeight = parseInt(next.find('img').height());
var imageWidth = parseInt(next.find('img').width());
next.find('img').css({ width: (parseInt($(window).width()) - 50) });
var cssWidth = parseInt(next.find('img').css('width'));
var testVal = parseInt((cssWidth * imageHeight) / imageWidth);
next.find('img').css({ height: testVal });
//alert('imageWidth = ' + imageWidth + 'imageHeight = ' + imageHeight + 'css height = ' + next.find('img').css('height') + ', css width = ' + next.find('img').css('width'));
captionPosition = parseInt(next.find('img').css('height')) * -1;
}
$('#gallery .caption').css({ width: next.find('img').css('width') });
$('#gallery .caption').css({ bottom: captionPosition });
//Set the opacity to 0 and height to 1px
$('#gallery .caption').animate({ opacity: 0.0 }, { queue: false, duration: 0 }).animate({ height: '1px' }, { queue: true, duration: 300 });
//Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
$('#gallery .caption').animate({ opacity: 0.7 }, 100).animate({ height: '100px' }, 500);
//Display the content
$('#gallery .content').html(caption);
}
917
$( document ). ready()A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ). ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.
The key difference between $(document). ready() and $(window). load() event is that the code included inside onload function will run once the entire page(images, iframes, stylesheets,etc) are loaded whereas the $(document). ready() event fires before all images,iframes etc.
The ready() method is an inbuilt method in jQuery which helps to load the whole page then execute the rest code. This method specify the function to execute when the DOM is fully loaded.
ready() method in jQuery? The ready() method is used to make a function available after the document is loaded. Whatever code you write inside the $(document ). ready() method will run once the page DOM is ready to execute JavaScript code.
"ready" means the DOM, not the content of the pages. This means the page's HTML structure is there, but images, iframes, etc. may not necessarily have been loaded. You'll need the load event instead of the ready event if you need everything loaded.
155
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
