I am using $(window).load() to change some image sizes for a thumbnail gallery and then configuring a slideshow based on image sizes after that. For some reason, the code is executing 2 times. I can tell this because in my configuration funcition I am using jQuery to wrap a div around another div. However, when I look at my HTML when the page loads, there are 2 instances of the same div being wrapped.
I used the javascript debugger to look at whats happening and my code executes and then goes into the jquery-min.js, then goes back to my function as if it were called a second time. Here is my code:
HTML
<?php session_start(); include ('dbConfig.php'); include('main.php'); ?>
<!DOCTYPE html>
<html>
<head>
<title>Main Gallery</title>
<link rel="stylesheet" href="css/reset.css" type="text/css" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<!--[if IE]>
<style type="text/css">
.transblack {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50000000,endColorstr=#50000000);
zoom: 1;
}
.transwhite {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50FFFFFF,endColorstr=#50FFFFFF);
zoom: 1;
}
</style>
<![endif]-->
<script>
$(window).load(function(){
$('#gallery ul li').each(function() {
var $frame = $(this).children('div');
$frame.children('img').superFit();
});
$('#gallery').css('visibility', 'visible');
configGallery();
});
$(document).ready(function(){
$('#filter').hide();
$('#photoWrap').hide();
$('#gallery').css('visibility', 'hidden');
});
</script>
</head>
<body>
<div id="mainWrap">
<?php include('adminPanel.php'); ?>
<div id="photoWrap">
<div id="controlLeft" class="control"></div>
<div id="slideShow">
<div id="slideContainer">
<?php
if(isset($_GET['c']) && isset($_GET['p']))
{
if(isAuthentic($_GET['c'], $_GET['p']))
{
getSlideshow($_GET['c']);
}else{
getSlideshow();
}
}else{
getSlideshow();
}
?>
</div>
</div>
<div id="controlRight" class="control"></div>
</div>
<div id="container">
<div id="filter" class="transblack"></div>
<div id="titleWrap"></div>
<div id="navWrap">
<div id="nav">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="gallery.php">Gallery</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</div>
</div>
<div id="clientHolder">
<span id="clientSelector">Select Gallery: <select onchange="getGallery(document.getElementById('clientSelect').value)" id="clientSelect">
<option value="-2">--Select--</option>
<option value="-1">Public Gallery</option>
<?php
if(isset($_GET['c']) && isset($_GET['p']))
{
if(isAuthentic($_GET['c'], $_GET['p']))
{
getClients($_GET['c']);
}else{
getClients();
}
}else{
getClients();
}
?>
</select></span>
</div>
<div id="gallery">
<ul>
<?php
if(isset($_GET['c']) && isset($_GET['p']))
{
if(isAuthentic($_GET['c'], $_GET['p']))
{
getMain($_GET['c']);
}else{
echo "<h2>The password you entered was incorrect</h2>";
}
}else{
getMain();
}?>
</ul>
</div>
</div>
</div>
<script src="js/md5.js" type="text/javascript"></script>
<script src="js/helper.js" type="text/javascript"></script>
<script src="js/superFit.js" type="text/javascript"></script>
</body>
</html>
Javascript
This first one is my jQuery plugin I created
(function($) {
$.fn.superFit = function(options) {
var $this = $(this);
var parent = $this.parent();
var parentW = parent.width();
var parentH = parent.height();
var imgW = $this.width();
var imgH = $this.height();
var imgRatio = imgH / imgW;
var parentRatio = parentH / parentW;
if(imgRatio < parentRatio) //We have a landscape image
{
//First set the height of image to be 100%;
$this.css('height', '100%');
imgW = $this.width();
parentW = parent.width();
//Now center the image
$this.css('margin-left', -(imgW/2)+(parentW/2));
}else{ //We have a portrait image
$this.css('width', '100%');
}
}
})(jQuery);
And this is the function that is called twice
function configGallery()
{
var currentPosition;
var slides = $('.slide');
var currentSlide;
var currentImg;
var slideWidth = 720;
var numberOfSlides = slides.length;
var imgRatio;
var slideRatio = $('#slideShow').height() / slideWidth;
slides.wrapAll('<div id="slideInner"></div>');
$('.imgHolder').click(function(){
$('#filter').show();
$('#photoWrap').show();
currentPosition = $('.imgHolder').index(this);
$('#slideShow').width(slideWidth);
// Remove scrollbar in JS
$('#slideContainer').css('overflow', 'hidden');
//Change image size based on resolution
// Wrap all .slides with #slideInner div
slides.css({
'float' : 'left',
'width' : slideWidth
});
// Set #slideInner width equal to total width of all slides
$('#slideInner').css('width', (slideWidth * numberOfSlides));
// Hide left arrow control on first load
manageControls(currentPosition);
$('#slideInner').css('margin-left' , slideWidth*(-currentPosition));
$('#photoWrap').css('margin-top', (screen.height/3)-($('#photoWrap').height()/3));
changeSize();
});
// Create event listeners for .controls clicks
$('.control')
.bind('click', function(){
// Determine new position
currentPosition = ($(this).attr('id')=='controlRight') ? currentPosition+1 : currentPosition-1;
manageControls(currentPosition);
changeSize();
$('#slideShow').width(slideWidth);
$('#slideInner').css('margin-left', slideWidth*(-currentPosition));
});
$('#filter').click(function(){
$(this).hide();
$('#photoWrap').hide();
});
// manageControls: Hides and shows controls depending on currentPosition
function manageControls(position){
// Hide left arrow if position is first slide
if(position==-1){ currentPosition = numberOfSlides-1; }
else{ $('#leftControl').show() }
// Hide right arrow if position is last slide
if(position==numberOfSlides){ currentPosition = 0; }
else{ $('#rightControl').show() }
}
function changeSize(){
currentSlide = $('.slide').get(currentPosition);
currentImg = $(currentSlide).children('img').first();
imgRatio = $(currentImg).height() / $(currentImg).width();
if(imgRatio < slideRatio)
{
$(currentImg).addClass('landscape');
//Vertically align
var thisHeight = $(currentImg).height();
$(currentImg).css('margin-top', ($('#slideShow').height()/2)-(thisHeight/2));
}else{
$(currentImg).addClass('portrait');
}
}
}
Why are you using $(window).load()? I’m asking if there’s a specific reason or not.
The standard jQuery way uses DOMReady via:
Or: