PDA

View Full Version : jquery resize problem


daan
02-11-2011, 08:33 AM
I tried to paste following script in my website;

http://katelijneleeft.be/index2.html

and tried to resize the image size from 900 width to 500 width, now I get the following;

http://katelijneleeft.be/index3.htm

so my problem is that the small thumbnails are now at the wrong place, can anyone help me to correct this ?



my site

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Lang" content="en" />
<meta name="author" content="Muneer Saheed" />
<meta http-equiv="Reply-to" content="muneer@encodez.com" />
<meta name="description" content="Multi transition Javascript banner can quickly configure in to many forms." />
<meta name="keywords" content="Dynamic Multi Transition Banner, Dynamic Banner, Flash banner, Javascript Banner" />
<title>Dynamic Multi Transition Banner | Encodez Systems.</title>
<script language="javascript" src="inc/jquery-1.3.2.js"></script>
<script language="javascript" src="inc/jquery.pngFix.js"></script>
<script language="javascript" src="inc/jquery.backgroundPosition.js"></script>
<script language="javascript" src="inc/jquery.easing.compatibility.js"></script>
<script language="javascript" type="text/javascript">
|

var encBannerWidth = 500;

/*
* This peroperty describes how the banner transition will be
* The option availbale are
* I "slide" - This slides the banner from left to right.
* II "slideDown" - This slides the banner from top to bottom.
* III "fade" - This makes the banner fade in/fade out.
*/
var encTransitionType = "fade";

/*
* Describes the number of background images and thumbnail images
* are there.
* Recomended values are 3 or 4
* Can be 1 to max possible according to the width of banner.
*/
var encNumOfImages = 4;

/*
* This array contains the path to large version of background images.
* Path can be configured according to the user path.
* Arrange the images in order. This order will be executed while processing.
*/
var encImageArray = new Array("img/frontBanner/large/img_1.jpg", "img/frontBanner/large/img_2.jpg", "img/frontBanner/large/img_3.jpg", "img/frontBanner/large/img_4.jpg");

/*
* This array contains the path to thumbnail version of background images.
* Path can be configured according to the user path.
*/
var encThumbNailImageArray = new Array("img/frontBanner/thumb/img_1.png", "img/frontBanner/thumb/img_2.png", "img/frontBanner/thumb/img_3.png", "img/frontBanner/thumb/img_4.png");

/*
* This property describes the transition of the banner.
* If it is set to true, the banner will automatically change according to the Timeout
* value. The selected transition type will be applied while auto transition.
*/
var encAutoRotateBanner = false;

/*
* Transition timeout.
*/
var encAutoRotateTimeout = 5000;

/*
* Enable or disable description footer containing thumbnail image.
* If this is set to true, the properties "encDisableTextsAll", "encEnableThumbImageLink",
* "encEnableDescription", "encEnableReadMore" will not be executed.
*/
var encEnableFooter = true;

/*
* Disable all text from the footer
* except the thumbnail image. This will make possible to
* maximise the number of thumbnail image using variable "encNumOfImages".
*/
var encDisableTextsAll = false;

/*
* Enable/disable link for thumbnail click event.
*/
var encEnableThumbImageLink = true;

/*
* Enable/disable description in footer
*/
var encEnableDescription = true;

/*
* Enable/disable readmore button in footer.
* read more button is described using ".bttnMore" class
*/
var encEnableReadMore = true;

/*
* This array contains the contents used in footer.
* The sample values can be changed,
* the array size can be altered according to the need.
* It contains
* I Title
* II Description
* II Link
* If wanted to remove the link only for a single item, just remove the value.
*/
var encBannerTexts = new Array(4);

encBannerTexts[0] = new Array(3);
encBannerTexts[0][0] = "OUR COMPANY";
encBannerTexts[0][1] = "We are dedicated in designing your..";
encBannerTexts[0][2] = "http://www.google.com";

encBannerTexts[1] = new Array(3);
encBannerTexts[1][0] = "DESIGN POLICY";
encBannerTexts[1][1] = "Our design is the dream of you.";
encBannerTexts[1][2] = "http://www.yahoo.com";

encBannerTexts[2] = new Array(3);
encBannerTexts[2][0] = "UNLIMITED CHOICES";
encBannerTexts[2][1] = "We provide you with the number of choices.";
encBannerTexts[2][2] = "http://www.bing.com";

encBannerTexts[3] = new Array(3);
encBannerTexts[3][0] = "STAY CONNECTED";
encBannerTexts[3][1] = "Keep in touch 365 days with us.";
encBannerTexts[3][2] = "http://www.msn.com";

/*
* STOP !
* WARNING !!!!
* pLease do not change the below variables.
* Thosea are private variables and used for runtime configuration
*/
var encBusy = false;
var encCurrentBanner = -1;
var encImg = new Array(encNumOfImages);
var encThumbs = new Array(encNumOfImages);
/*
* THANK YOU for leaving them.
*/


/*
* The "encLoadBanner()" is the main function to start the banner.
* It can be placed inside "$(document).ready(function()" jquery document ready
* funciton or inside the "onload=function()" javascript document onload function.
* both will work. The advantage of placing inside "onload=function()" is,
* the banner image will be loaded after the complete website rendered in to browser.
*/
onload=function()
{
encLoadBanner();
}

encLoadBanner = function()
{
encImg = encPreloadImages(encImageArray, encNumOfImages);
if(encEnableFooter)
{
encThumbs = encPreloadImages(encThumbNailImageArray, encNumOfImages);
}

$("#bannerBody").html("");

$("div#bannerContainerCover").css("background-image", "url(" + encImg[encImg.length-1].src + ")");
encTransformBanner(0);

if(encEnableFooter)
{
var tmpCellWidth = Math.floor(encBannerWidth/encNumOfImages);
var tmpLastCellWidth = tmpCellWidth + (encBannerWidth%encNumOfImages);

var footerContents = "<table cellpadding='0' cellspacing='0' width='" + encBannerWidth + "' align='center'><tr>";
for(i=0; i<encNumOfImages; i++)
{
if((i+1) == encNumOfImages)
footerContents += "<td class='footerCell' width='" + tmpCellWidth + "'>";
else
footerContents += "<td class='footerCell' width='" + tmpLastCellWidth + "'>";

footerContents += "<div class='imgBgDiv_i'><div id='thumbDiv_" + i + "' class='imgDiv' style='background:url(" + encThumbs[i].src + ") 0px 0px no-repeat;'></div></div>";
footerContents += "<ul id='footerContents_" + i + "'>";
footerContents += "<li class='footerTitle'></li>";
footerContents += "<li class='footerDesc'></li>";
footerContents += "<li class='footerLink'></li>";
footerContents += "</ul>";
footerContents += "</td>";
}
footerContents += "</tr></table>";
$("#bannerFooterNav").html(footerContents);
$("#bannerFooter").fadeTo("fast", 0.4);
showFooter();
$(".imgDiv").fadeTo("fast", 0.75);
}


if(! encDisableTextsAll && encEnableFooter)
{
for(i=0; i<encNumOfImages; i++)
{
$(".footerTitle:eq(" + i + ")").html(encBannerTexts[i][0]);
if(encEnableDescription) $(".footerDesc:eq(" + i + ")").html(encBannerTexts[i][1]);
if(encBannerTexts[i][2] != "" & encEnableReadMore)
{
$(".footerLink:eq(" + i + ")").html("<div class='bttnMore'><a href='" + encBannerTexts[i][2] + "'>&nbsp;</a></div>");
}
}
}

if(encEnableThumbImageLink && encEnableFooter)
{
for(i=0; i<encNumOfImages; i++)
{
link = encBannerTexts[i][2];
$("#thumbDiv_" + i).attr("onclick", "window.location.href='" + link + "'")
}
}

if(encEnableFooter)
{
a=0;
$(".imgDiv").each(function()
{
var ids = a;
$(this).mouseover(function()
{
$(this).fadeTo("fast", 1);
var cssObj = {"margin-top": "0px", "margin-bottom": "2px"}
$(this).css(cssObj);
encBusy = true;
encTransformBanner(ids);
$(document).pngFix();
})
a++;
}).mouseout(function() {
$(this).fadeTo("fast", 0.75);
var cssObj = {"margin-top": "2px", "margin-bottom": "0px"}
$(this).css(cssObj);
encBusy = false;
$(document).pngFix();
});

$(document).pngFix();
}

if(encAutoRotateBanner)
{
var tmpBannerTimer = setTimeout("encAutorotate(0)", encAutoRotateTimeout);
}
}

showFooter=function()
{
$("div#bannerFooter").animate({ width: '900px', opacity: '0.5' }, 'slow');
}

encTransformBanner = function(ids)
{
encCurrentBanner = ids;
var currentBg = $("div#bannerContainerCover").css("background-image");
$("div#bannerContainer").css("background-image", currentBg);

var cssObj = {"opacity": "0.1", "background-repeat": "no-repeat", "background-image": "url(" + encImg [ids].src + ")"}
$("div#bannerContainerCover").css(cssObj);

if(encTransitionType == "slide")
{
$("div#bannerContainerCover").css("background-position", "-50px 0");
$("div#bannerContainerCover").stop().animate({backgroundPosition:"(0 0)", opacity:"1"}, {duration:600});
}
else if(encTransitionType == "slideDown")
{
$("div#bannerContainerCover").css("background-position", "0 -50px");
$("div#bannerContainerCover").stop().animate({backgroundPosition:"(0 0)", opacity:"1"}, {duration:600});
}
else
{
$("div#bannerContainerCover").stop().animate({opacity:"1"}, {duration:1000});
}
}

encAutorotate = function(bannerID)
{
if(encCurrentBanner > -1)
{
bannerID = encCurrentBanner;
encCurrentBanner = -1;
}

if(!encBusy)
{
if(bannerID < (encNumOfImages-1) && bannerID >= 0)
bannerID++;
else
bannerID =0;

encTransformBanner(bannerID);
}

var tmpBannerTimer = setTimeout("encAutorotate(" + bannerID + ")", encAutoRotateTimeout);
}

encPreloadImages = function(images, size)
{
var tmpArray = new Array(size);
for(i=0; i<size; i++)
{
tmpArray[i] = new Image;
tmpArray[i].src = images[i];
}
return tmpArray;
}

</script>
<link href="global.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#Container #ThreeHolder #SlopeTHREE h2 {
text-align: center;
}
#Container #ThreeHolder #SlopeTWO h2 {
text-align: center;
}
#Container #ThreeHolder #SlopeTWO h2 {
text-align: center;
}
-->
#logoPart { background:#000; height:90px;}

#bannerTD { width:900px; height:325px; background-color:#333; background-repeat: no-repeat;}
#bannerTD #bannerContainer { width:900px; height:325px; text-align:center;}
#bannerTD #bannerContainerCover { width:900px; height:325px; text-align:center;}
#bannerTD #bannerBody { height:245px; text-align:center;}

#bannerTD #bannerFooter {
background:#000; height:80px;
display:none;
width:900px;
}
#bannerTD #bannerFooterNav {
position:absolute;
top:335px;margin-top:0;
left:50%;margin-left:-450px;
width:900px;
}
.footerCell{ padding:5px; text-align:left; border:0px #F90 solid;}
.footerCell .footerTitle {font-family:tahoma, arial; font-size:11px; color:#fff; font-weight: bold;}
.footerCell .footerDesc {font-family:tahoma, arial; font-size:11px; color:#efefef;}
.footerCell ul {list-style: none; margin: 2px; margin-left: 75px; padding-left: 10px;}
.footerCell ul li {margin: 2px; line-height: 13px; padding: 0;}
.footerLink {text-align: right;}

.footerCell .imgDiv{ position:relative; float:left; width:80px; height:65px; margin: 2px 1px 0px 1px;}
.bttnMore {width:57px; height:19px; float: left;}
.bttnMore a{display: block; background:url(img/gen/bttn_more_small.png) 0 0 no-repeat; line-height: 19px; text-decoration: none;}

.imgBgDiv_i {
width:82px; height:67px;
background: url(img/gen/thumbBgBordered.png) 0 0 no-repeat;
padding: 0;
float:left;
}


#bannerCornerOverlayT{position:absolute; left:50%; margin-top:0; margin-left:-450px; top:90px; background:url(img/gen/bg_bigbanner_trans.gif) 0 -5px no-repeat; width:900px; height:5px; z-index:1000;}
#bannerCornerOverlayB{position:absolute; left:50%; margin-top:0; margin-left:-450px; top:410px; background:url(img/gen/bg_bigbanner_trans.gif) 0 0 no-repeat; width:900px; height:5px; z-index:1001;}

form {color:#efefef; margin:0;}
</style>
</head>
<body>
<div id="Container">
<div id="Menu_2"> | <a href="mailto:info@katelijneleeft.be">Info</a> | <a href="sitemap.php">Sitemap</a> | <a href="log_in.php">Log In</a> |</div>
<div id="Top">
<h1>Katelijne Leeft</h1>
<h3> Het levend bewijs dat Katelijne Leeft !</h3>
</div>
<div id="nav">
<ul>
<li id="current"><a href="index.php">Welkom</a></li>
<li><a href="news.php">Nieuws</a></li>
<li><a href="about.php">Over ons</a></li>
<li><a href="who.php">Wie is wie</a></li>
<li><a href="events.php">Activiteiten</a></li>
<li><a href="media_home.php">Media</a></li>
<li><a href="contact.php">Contact</a></li>
<li><a href="links.php">Links</a></li>
</ul>
</div>
<p>&nbsp;</p>
<!-- All Slopes have OverFlow:auto so you can add as much or as little text as you like -->
<!-- Three Slopes -->
<div id="ThreeHolder">
<div id="SlopeNAV">
<p><img src="images/button_lid.jpg" width="149" height="48" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="8,6,138,41" href="lid_worden.php" />
</map>
<br />
<img src="images/button_brief.jpg" width="149" height="48" border="0" usemap="#Map2" />
<map name="Map2" id="Map2">
<area shape="rect" coords="9,6,137,40" href="nieuwsbrief_inschrijven.php" />
</map>
<br />
<img src="images/button_textiel.jpg" width="149" height="48" border="0" usemap="#Map3" />
<map name="Map3" id="Map3">
<area shape="rect" coords="10,7,137,39" href="merchandise.php" />
</map>
</p>
<p>
<?php include('next_event.php'); ?>
</p>
</div>
<div id="RightOnly">
<h2>Welkom op de website van &quot;vzw Katelijne Leeft&quot;</h2>
<p>&nbsp;</p>
<p><div id="bannerCornerOverlayT"></div>
<div id="bannerCornerOverlayB"></div>
<table cellpadding="0" cellspacing="0" width="900" bgcolor="#FFFFFF" align="center">
<tr><td id="logoPart"></td></tr>
<!-- ______________________ BANNER ___________________-->
<tr><td id="bannerTD">
<div id="bannerContainer">
<div id="bannerContainerCover">
<div id="bannerBody"><img src="img/gen/loading_animation.gif" border="0" alt="Loading..." />
</div>
<div id="bannerFooter">
</div>
</div>
</div>
<!-- ________________ NAVIGATOR ___________________ -->
<div id="bannerFooterNav">
</div>
<!-- ________________ /NAVIGATOR ___________________ -->
</td></tr>
<!-- ______________________ /BANNER ___________________-->
</table>
<br />
&nbsp;<br /></p>
<p>De gemeente Sint-Katelijne-Waver bestaat uit vier kernen: het centrum, Onze-Lieve-Vrouw-Waver, Elzestraat en Pasbrug-Nieuwendijk. Op de grens van de vroegere deelgemeenten bevindt zich bovendien het gehucht Hagelstein (of Katerveire). Op 31 december 2008 telde onze gemeente net geen 20 000 inwoners. </p>
<p><img src="images/logo_medium.jpg" width="388" height="214" border="0" align="absmiddle" /></p>
<p>Met zoveel inwoners in een aangename gemeente moet er wel leven zijn in Sint-Katelijne-Waver. Dat hopen wij althans te bereiken. Wij zullen er, samen met u, alles aan doen om van Katelijne een aangename en leuke gemeente te maken. Regelmatig organiseren wij tal van activiteiten, waar u steeds welkom bent. Indien u lid bent van onze vzw, profiteer je een heel jaar lang van kortingen en voordelen. </p>
</div>
</div>
<p>&nbsp;</p>
<div id="ThreeHolder">
<div id="SlopeONE">
<h2>Nieuwsbrief</h2>
<p><a href="nieuwsbrief_inschrijven.php"><img src="brief.gif" width="173" height="149" border="0" /></a></p>
<p>Blijf meteen op de hoogte van het laatste nieuws en schrijf je in voor de digitale nieuwsbrief.</p>
</div>
<div id="SlopeTWO">
<h2>Kalender</h2>
<p><a href="kalender.php"><img src="calendar.gif" width="173" height="149" border="0" /></a></p>
<p>Ontdek welke activiteiten we voorbereiden en binnenkort op de agenda zullen staan. </p>
</div>
<div id="SlopeTWO">
<h2>Weblog</h2>
<p><a href="http://blog.katelijneleeft.be/" target="_blank"><img src="blog.gif" width="173" height="149" border="0" /></a></p>
<p>Ontdek nog meer nieuws en praat mee over verschillende onderwerpen. </p>
</div>
<div id="SlopeTHREE">
<h2>Intranet</h2>
<p><a href="log_in.php"><img src="login.gif" width="173" height="149" border="0" /></a></p>
<p>Beveiligd gedeelte voor werkende leden en raad van bestuur. </p>
</div>
</div>
<div id="Footer"> | All rights reserved &copy; 2009 <a href="index.php">vzw Katelijne Leeft</a> | <a href="disclaimer.php">Disclaimer</a> | <a href="sitemap.php">Sitemap</a> | <a href="mailto:info@katelijneleeft.be">info@katelijneleeft.be</a> |</div>
</div>
</body>
</html>

thanx