New! jQuery = Choppy

classic Classic list List threaded Threaded
1 message Options
Reply | Threaded
Open this post in threaded view
|

New! jQuery = Choppy

thesull
Well let me introduce myself! I am new here! I have been using java for some time and have always loved jQuery! I have never really mastered it but find myself using it more and more because of all the plugins ;)

Well recently I am trying to develop a rotating image from a folder that on click it would load lightbox! Simple right?

Well the rotating part works great and the lightbox works as well.... but it is SLOW and CHOPPY ;/ Not so pretty ;/


Here is my code:

<script type="text/javascript" language="javascript" src="../lytebox code/lytebox.js"></script><link rel="stylesheet" href="../lytebox code/lytebox.css" type="text/css" media="screen" />

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript" src="js/jquery.corner.js"></script>
    <link rel="stylesheet" type="text/css" href="js/jquery.lightbox-0.5.css" media="screen" />

    <script type="text/javascript"> $(function() { $('#gallery a').lightBox(); }); $(function() { $('#gallery a').corner(); }); </script>
    <style type="text/css"> /* jQuery lightBox plugin - Gallery style */ #gallery { background-color: #444; padding: 5px 5px; width: 180px; align: center; } #gallery ul { list-style: none; } #gallery ul li { display: inline; } #gallery ul img { border: 5px solid #3e3e3e; border-width: 5px 5px; } #gallery ul a:hover img { border: 5px solid #fff; border-width: 5px 5px; color: #fff; } #gallery ul a:hover { color: #fff; } </style>


<script> var pictureWebPartName="WeeklyPictures"; // name of the picture library web part that MUST be added to page // be sure to deselect the thumbnail and the image size // // var showThumbnails = true; //otherwise show full sized images // var randomImg = true; //set to true to show in random order // var useCustomLinks = false; //true to use second column as URL for picture clicks // var RotatingPicturesLoopTime = 3500; //2000 = 2 seconds var imgToImgTransition = 1.0; //2 = 2 seconds // above is the rotating duration and transition time // // don't change these var selectedImg = 0; var imgCache = []; var imgTag; function RotatingPictures() { imgTag = document.getElementById("RotatingImage"); //Find the picture web part and hide it var Imgs = []; var x = document.getElementsByTagName("TD"); // find all of the table cells var LinkList; var i=0; for (i=0;i<x.length;i++) { if (x[i].title == pictureWebPartName) { // tables in tables in tables... ah SharePoint! LinkList = x[i].parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode; // hide the links list web part // add a double backspace to the below to display the list LinkList.style.display="none"; break; } } if (!LinkList) { document.all("RotatingImageMsg").innerHTML="Web Part '" + pictureWebPartName + "' not found!"; } //Copy all of the links from the web part to our array var links = LinkList.getElementsByTagName("TR") // find all of the rows var url; var len; for (i=0;i<links.length;i++) { //if (links(i).id.match("row")!=null) if (links[i].childNodes[0].className=="ms-vb2") { len=Imgs.length Imgs[len]=[] Imgs[len][0] = links[i].childNodes[0].childNodes[0].href; if (useCustomLinks) { if (links[i].childNodes[1].childNodes.length>0) { Imgs[len][1] = links[i].childNodes[1].childNodes[0].href; } else { Imgs[len][1] = "" } } } } if (Imgs.length==0) { document.all("RotatingImageMsg").innerHTML="No images found in web part '" + pictureWebPartName + "'!"; } for (i = 0; i < Imgs.length; i++) { imgCache[i] = new Image(); imgCache[i].src = Imgs[i][0]; if (useCustomLinks) { imgCache[i].customlink=Imgs[i][1]; } } RotatingPicturesLoop(); } // now show the pictures... function RotatingPicturesLoop() { if (randomImg) { selectedImg=Math.floor(Math.random()*imgCache.length); } if (document.all){ imgTag.style.filter="blendTrans(duration=" + imgToImgTransition + ")"; imgTag.filters.blendTrans.Apply(); } url=imgCache[selectedImg].src if (useCustomLinks) { RotatingImageLnk.href=imgCache[selectedImg].customlink; } else { RotatingImageLnk.href = url; } if (showThumbnails) { // convert URLs to point to the thumbnails... // from airshow%20pictures/helicopter.jpg // to airshow%20pictures/_t/helicopter_jpg.jpg url = revString(url); c = url.indexOf("."); url = url.substring(0,c) + "_" + url.substring(c+1,url.length); c = url.indexOf("/"); url = url.substring(0,c) + "/t_" + url.substring(c,url.length); url = revString(url) + ".jpg"; } imgTag.src = url; if (document.all){ imgTag.filters.blendTrans.Play(); } selectedImg += 1; if (selectedImg > (imgCache.length-1)) selectedImg=0; setTimeout(RotatingPicturesLoop, RotatingPicturesLoopTime); } // utility function revString found here: // http://www.java2s.com/Code/JavaScript/Language-Basics/PlayingwithStrings.htm function revString(str) { var retStr = ""; for (i=str.length - 1 ; i > - 1 ; i--){ retStr += str.substr(i,1); } return retStr; } // add our function to the SharePoint OnLoad event _spBodyOnLoadFunctionNames.push("RotatingPictures"); </script>

<center>
<div id="gallery">
                 
<center>
<ul>
<li>
a name="RotatingImageLnk" id="RotatingImageLnk" alt="click for larger picture" rel="lytebox">
        img src="/_layouts/images/dot.gif" name="RotatingImage" id="RotatingImage" border=0>

</li>
</ul>
</center>
       
     
</div>
</center>