|
JavaScript - Picture Carousel Script Jacked Up...plzz Help
I cant seem to get the top picture carousel to work i think this is my problem but Im not sure what in th coding needs to change:
Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; InfoPath.3) Timestamp: Tue, 26 Jul 2011 23:59:17 UTC Message: Object required Line: 456 Char: 26 Code: 0 URI: http://maps.gstatic.com/intl/en_us/m...s2.api/main.js Message: Object doesn't support this property or method Line: 825 Char: 5 Code: 0 URI: http://yourozarksrealtor.com/wp-cont...ts/carousel.js Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; InfoPath.3) Timestamp: Tue, 26 Jul 2011 23:59:28 UTC Message: Object required Line: 456 Char: 26 Code: 0 URI: http://maps.gstatic.com/intl/en_us/m...s2.api/main.js Message: Object doesn't support this property or method Line: 825 Char: 5 Code: 0 URI: http://yourozarksrealtor.com/wp-cont...ts/carousel.js Similar TutorialsHello! A client of mine wanted a picture slideshow like this website. http://themeforest.net/item/dark-atl..._preview/50415 I have looked through many different slideshows and carousel and have had no luck trying to find just a nice simple one like this. Can anyone help? I did find this: http://sorgalla.com/jcarousel/ but it deals with JQuery and I'm not sure how to use it. If it's simple and I can change that script to the one above then that's great. Any feedback is greatly appreciated Kristen http://www.twitter.com/kris10ized Hi Javascript geeks. I am hoping you can help with my shakey images on my carousel. Basically I have a lovely moving carousel on this web page http://www.turningworm.co.uk/nudgegl...nge/icons.html but the images kind of shudder as they come to a stand still before the pause. Does anyone know of a way to smooth the movement out so they glide round better and then pause? The speed is correct, it is just the shakiness of the images that is the problem. Many thanks for looking. Zena So i have this code and when you click on the first set of them (a specific one) it copys it and then when you click on one of the other ones it pastes it but its not working properly. (If you need to you can put an other image in there) Code:
<script>
var change = new Array
change [0] = [0,0,0,0,0];
change [1] = [0,0,0,0,0];
change [2] = ["",0];
change [3] = [0,0,0,0,0];
function equipaa(){
change [0][0] = 1
change [0][4] = 0
change [0][1] = 0
change [0][2] = 0
change [0][3] = 0
changea();
}
function equipab(){
change [0][1] = 1
change [0][0] = 0
change [0][4] = 0
change [0][2] = 0
change [0][3] = 0
changea();
}
function equipac(){
change [0][2] = 1
change [0][0] = 0
change [0][1] = 0
change [0][4] = 0
change [0][3] = 0
changea();
}
function equipad(){
change [0][3] = 1
change [0][0] = 0
change [0][1] = 0
change [0][2] = 0
change [0][4] = 0
changea();
}
function equipae(){
change [0][4] = 1
change [0][0] = 0
change [0][1] = 0
change [0][2] = 0
change [0][3] = 0
changea();
}
function equipba(){
change [1][0] = 1
change [1][4] = 0
change [1][1] = 0
change [1][2] = 0
change [1][3] = 0
changefinal();
}
function equipbb(){
change [1][1] = 1
change [1][0] = 0
change [1][2] = 0
change [1][3] = 0
change [1][4] = 0
changefinal();
}
function equipbc(){
change [1][2] = 1
change [1][0] = 0
change [1][1] = 0
change [1][3] = 0
change [1][4] = 0
changefinal();
}
function equipbd(){
change [1][3] = 1
change [1][4] = 1
change [1][0] = 0
change [1][1] = 0
change [1][2] = 0
changefinal();
}
function equipbe(){
change [1][4] = 1
change [1][0] = 0
change [1][1] = 0
change [1][2] = 0
change [1][3] = 0
changefinal();
}
function changea(){
if(change [0] [0] = 1){
change [2] [0] = document.getElementById("is1i").src;
change [2] [1] = change [3] [0];
}
else if(change [0] [1] = 1){
change [2] [0] = document.getElementById("is2i").src;
change [2] [1] = change [3] [1];
}
else if(change [0] [2] = 1){
change [2] [0] = document.getElementById("is3i").src;
change [2] [1] = change [3] [2];
}
else if(change [0] [3] = 1){
change [2] [0] = document.getElementById("is4i").src;
change [2] [1] = change [3] [3];
}
else if(change [0] [4] = 1){
change [2] [0] = document.getElementById("is5i").src;
change [2] [1] = change [3] [4];
}
}
function changefinal(){
if(change [1] [0] = 1){
document.getElementById("i1").src = change [2] [0];
}
else if(change [1] [1] = 1){
document.getElementById("i2").src = change [2] [0];
}
else if(change [1] [2] = 1){
document.getElementById("i3").src = change [2] [0];
}
else if(change [1] [3] = 1){
document.getElementById("i4").src = change [2] [0];
}
else if(change [1] [4] = 1){
document.getElementById("i5").src = change [2] [0];
}
clear();
}
function clear(){
change [0] [0] = 0;
change [0] [1] = 0;
change [0] [2] = 0;
change [0] [3] = 0;
change [0] [4] = 0;
change [1] [0] = 0;
change [1] [1] = 0;
change [1] [2] = 0;
change [1] [3] = 0;
change [1] [4] = 0;
}
</script>
<html>
<body>
<table border="0">
<tr>
<td><div ><img onclick="equipba()" id="i1" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
<td><div ><img onclick="equipbb()" id="i2" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
<td><div ><img onclick="equipbc()" id="i3" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
<td><div ><img onclick="equipbd()" id="i4" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
<td><div ><img onclick="equipbe()" id="i5" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
</tr>
</table>
<div id="invent">
<table border="o">
<tr>
<td><div ondblclick="dropa();" onclick="equipaa();"><img id="is1i" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
<td><div id="is1n"></div></td>
<td><div id="is1d"></div></td>
<td></td>
</tr>
<tr>
<td><div ondblclick="dropb()" onclick="equipab();"><img id="is2i" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
<td><div id="is2n"></div></td>
<td><div id="is2d"></div></td>
<td></td>
</tr>
<tr>
<td><div ondblclick="dropc()" onclick="equipac();"><img id="is3i" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
<td><div id="is3n"></div></td>
<td><div id="is3d"></div></td>
<td></td>
</tr>
<tr>
<td><div ondblclick="dropd()" onclick="equipad();"><img id="is4i"src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
<td><div id="is4n"></div></td>
<td><div id="is4d"></div></td>
<td></td>
</tr>
<tr>
<td><div ondblclick="drope()" onclick="equipae();"><img id="is5i" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td>
<td><div id="is5n"></div></td>
<td><div id="is5d"></div></td>
<td></td>
</tr>
</table>
</body>
</html>
I have searched for a rotating image script to use at mrsgriffins.com and am currently using Tony Foster's Picture Cube slideshow downloaded from javascript.com. This is EXACTLY the effect I wanted, but it only works with IE since it uses MS-only code. Is there a similar script that is more universal? Thanks for any help! Hi All, I am very new at this and do not have any script editing skills. I have been building my website with webeasy 8 and downloaded one of the free scripts from JavaScriptKit website and I edited the parts that i think it were suppose to be edited. However, my problem is that the script is not working and i don't know where to begin ..... When i preview the site it shows broken link icon where the picture suppose to load. The pictures URL is correct, thus my dilemma! I don't know what else to do.... Copy of script bellow <script type="text/javascript"> // Flexible Image Slideshow- By JavaScriptKit.com (http://www.javascriptkit.com) // For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/ // This notice must stay intact for use var ultimateshow=new Array() //ultimateshow[x]=["path to image", "OPTIONAL link for image", "OPTIONAL link target"] ultimateshow[0]=['C:\Users\Tony\Desktop\Website Pictures and stuff\SS_Pics\SS_01.jpg'] ultimateshow[1]=['C:\Users\Tony\Desktop\Website Pictures and stuff\SS_Pics\SS_02.jpg'] ultimateshow[2]=['C:\Users\Tony\Desktop\Website Pictures and stuff\SS_Pics\SS_03.jpg'] ultimateshow[3]=['C:\Users\Tony\Desktop\Website Pictures and stuff\SS_Pics\SS_04.jpg'] ultimateshow[4]=['C:\Users\Tony\Desktop\Website Pictures and stuff\SS_Pics\SS_05.jpg'] //configure the below 3 variables to set the dimension/background color of the slideshow var slidewidth="540px" //set to width of LARGEST image in your slideshow var slideheight="412px" //set to height of LARGEST iamge in your slideshow var slidecycles="continous" //number of cycles before slideshow stops (ie: "2" or "continous") var randomorder="no" //randomize the order in which images are displayed? "yes" or "no" var preloadimages="yes" //preload images? "yes" or "no" var slidebgcolor='white' //configure the below variable to determine the delay between image rotations (in miliseconds) var slidedelay=3000 ////Do not edit pass this line//////////////// var ie=document.all var dom=document.getElementById var curcycle=0 if (preloadimages=="yes"){ for (i=0;i<ultimateshow.length;i++){ var cacheimage=new Image() cacheimage.src=ultimateshow[i][0] } } var currentslide=0 function randomize(targetarray){ ultimateshowCopy=new Array() var the_one var z=0 while (z<targetarray.length){ the_one=Math.floor(Math.random()*targetarray.length) if (targetarray[the_one]!="_selected!"){ ultimateshowCopy[z]=targetarray[the_one] targetarray[the_one]="_selected!" z++ } } } if (randomorder=="yes") randomize(ultimateshow) else ultimateshowCopy=ultimateshow function rotateimages(){ curcycle=(currentslide==0)? curcycle+1 : curcycle ultcontainer='<center>' if (ultimateshowCopy[currentslide][1]!="") ultcontainer+='<a href="'+ultimateshowCopy[currentslide][1]+'" rel="nofollow" target="'+ultimateshowCopy[currentslide][2]+'">' ultcontainer+='<img src="'+ultimateshowCopy[currentslide][0]+'" border="0">' if (ultimateshowCopy[currentslide][1]!="") ultcontainer+='</a>' ultcontainer+='</center>' if (ie||dom) crossrotateobj.innerHTML=ultcontainer if (currentslide==ultimateshow.length-1) currentslide=0 else currentslide++ if (curcycle==parseInt(slidecycles) && currentslide==0) return setTimeout("rotateimages()",slidedelay) } if (ie||dom) document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>') function start_slider(){ crossrotateobj=dom? document.getElementById("slidedom") : document.all.slidedom rotateimages() } if (ie||dom) window.onload=start_slider </script> This is a really awesome script that I'm sure all of you can put to use if you haven't yet heard of it. However, I'm trying to get it to fade a background image on my css styled navigation for my a:hover. Here is the script with a little simple tutorial on how to set it up: http://bavotasan.com/tutorials/creat...r-fade-effect/ My only other knowledge is in PHP, so after about 2 hours of fail in this client-side language, I decided it was about time I should post where some experienced people can help. I really appreciate all time you spend on this, and don't think it will take a moderate Javascript programmer very long. This is the link to my site so far: http://matt.mw/help-request You can see the script working as it is on my little yellow MW logo on the right side of the navigation. So in my scenario, I am looking to fade button.png to button-hover.png (both repeating on the x axis). Any ideas? I am using the Carousel II Horizontal and it clearly says "Each image hyperlinked and opens in same browser." However, once you click on the image it opens a new browser. I am using this in an online store and I do not want my customers to open a new browser when viewing the product, I want them to click on image to go directly to the product to purchase. Any help? Thanks, Candy How do you make a vertical carousel that displays either text or images?
Can anyone direct me to the source of this carousel or something similar? http://www.murdockyoung.com/projects...-house/images/ Thanks in advance! hi, on my website: http://zend.warrencreative.com/gemini-group/index.html the carousel on the right is not showing unless you hover your mouse over?! Can some one please help? I am using : http://www.twospy.com/galleriffic/ Hello, I was wondering if anyone knew how to alter SmoothGallery to move the thumbnail carousel from a horizontal one along the top to a vertical one along the right side. It's supposedly possible within the core code, and I've seen it done, but it's not in the documentation and no one on the SmoothGallery forums seems to know how to do it. Ultimately, I'd like to move the carousel to the right side, make it static so that it's always overlaying the main image (rather than clicking to unhide it), and make sure the slideInfoZone is adjusted so as to not overlap with the carousel. I'm assuming that anyone who knows how to do it has SmoothGallery and has made the carousel vertical before... but if not, and someone wants to take a crack at it anyway, the SmoothGallery files are HERE. Thanks for your help in advance! Hi, does anyone know how to make a very simple jQuery vertical carousel? without having to use the plugin...
Hi All I've been following an example on how to build an interactive carousel, but I am unable to get the javascript to make the carousel loop continously. I've posted all the code below, if anyone can show me the error I would be very grateful. Code: <!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" />
<title>Interactive Carousel</title>
<style type="text/css">
#feature_holder{position:relative; top:150px; overflow:hidden; height:400px; width:100%;}
.feature{position:absolute; width:1000px; height:400px; top:0; z-index:1;}
.arrow_right{right:20px;}
.arrow_left{left:20px;}
.arrow{height: 70px; width:70px; z-index:2; top:160px; position:absolute; background:#000;}
#feature_1{background: #666666;}
#feature_2{background: #225566;}
#feature_3{background: #006600;}
#feature_4{background: #ff0066;}
#feature_5{background: #00ff00;}
#feature_6{background: #0380ff;}
</style>
</head>
<body>
<div id="feature_holder">
<div class="arrow arrow_left"></div>
<div class="arrow arrow_right"></div>
<div class="feature" id="feature_1"></div>
<div class="feature" id="feature_2"></div>
<div class="feature" id="feature_3"></div>
<div class="feature" id="feature_4"></div>
<div class="feature" id="feature_5"></div>
<div class="feature" id="feature_6"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
var BrowserWidth
var FeatureCount
var CurrentFeature = 1
var NextFeature
var NextNextFeature
var PrevFeature
var PrevPrevFeature
$(document).ready (function(){
setFeatureCount()
getBrowserWidth()
setClicks()
setNextPrev()
setFeaturePosition()
});
setFeatureCount = function(){
FeatureCount = $('#feature_holder').children('.feature').length;
}
getBrowserWidth = function(){
BrowserWidth = $(window).width();
}
setClicks = function(){
$('#feature_holder').children('.arrow_left').click(function(){
SlideInFeature(true);
});
$('#feature_holder').children('.arrow_right').click(function(){
SlideInFeature(false);
});
}
setNextPrev = function(){
PrevFeature = (CurrentFeature-1);
PrevPrevFeature = (CurrentFeature-2);
NextFeature = (CurrentFeature+1);
NextNextFeature = (CurrentFeature+2);
if (CurrentFeature == 1){
PrevFeature = FeatureCount;}
setFeaturePosition = function(){
$('#feature_holder').children('.feature').css('left', -9999);
var CurrentPositioning = (BrowserWidth/2) - 500;
$('#feature_'+CurrentFeature).css('left', CurrentPositioning);
var NextPositioning = (BrowserWidth/2) + 500;
$('#feature_' +NextFeature).css('left', NextPositioning);
var PrevPositioning = (BrowserWidth/2) - 1500;
$('#feature_'+PrevFeature).css('left', PrevPositioning);
}}
</script>
</body>
</html>
Thanks I am trying to install a simple slider/carousel in the middle of a web page. I opted for the JCarouselLite plug-in but can't seem to get it working. When the page loads, the images tile vertically(as opposed to line up horizontally) and the nav buttons sit below them. I have included necessary links to jQuery,the Carousel plug-in and also a custom.js file that includes a call to the plug-in to activate it(i think). I also have linked to a custom.css file to style the bar. I am wondering if my call to the plug-in is coded correctly. Beyond that, I can't understand why it isen't working. It is probably obvious but I'm a bit stuck! Could anyone help? I have attached the code showing the html, the custom.js function and the css. Thanks, nevblanc79 HTML: Code:
<div id="carousel">
<h3>Our Titles</h3>
<div class="carousel">
<ul>
<li><a href="portfolio_item.html"><img width="198" height="130" src="img/pictures/1.jpg" alt></a></li>
<li><a href="portfolio_item.html"><img src="img/pictures/2.jpg" alt="" width="198" height="130" ></a></li>
<li><a href="portfolio_item.html"><img src="img/pictures/3.jpg" alt="" width="198" height="130" ></a></li>
<li><a href="portfolio_item.html"><img src="img/pictures/4.jpg" alt="" width="198" height="130" ></a></li>
<li><a href="portfolio_item.html"><img src="img/pictures/5.jpg" alt="" width="198" height="130" ></a></li>
<li><a href="portfolio_item.html"><img src="img/pictures/6.jpg" alt="" width="198" height="130" ></a></li>
</ul>
</div>
<button class="prev"><</button>
<button class="next">></button>
</div>
Javascript: Code: $(function() {
$(".carousel").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev"
});
});
CSS: Code: #carousel {
width:900px;
overflow:hidden;
margin-bottom:30px;
}
.carousel ul li {
width:198px;
margin-right:36px;
}
#carousel .next, #carousel .prev {
margin:0px;
font-size:15px;
padding:4px 10px;
}
#carousel .next {
float:right;
}
#carousel .prev {
float:left;
}
My website is: ERBoH.com I have no experience with JS, just general knowledge of html/css. I had someone else write the site for me. They didn't know how to do this and pretty much just stopped talking to me... On my site, I have a video carousel (4 video thumbnails in a row, you press the > arrow, and it shows the next 4 video thumbnails, you click 1 video thumbnail, and it shows you the video above the carousel). The problem is, when you click on one of the thumbnails, it reloads the page, and the video carousel goes back to the beginning. So if you clicked the > arrow 3 times (ur on the 3rd set of thumbnails), then it brings you back to the 1st set. This is pretty annoying, especially if your planning on watching each video. My question is, is it possible to make some type of cookie or something to remember which set of thumbnails you were on in the carousel? So that, if your on the 3rd set, and click a video, instead of resetting to the 1st set, it keeps you on the 3rd set. If it is possible... how hard would it be to do? Is it something where I could just copy/paste a string of code, or would this be a huge project? Thanks for the advice. Hello, I have been noticing a really cool trend on the web and it is called the javascript carousel. Not the one from dynamic Drive. Here is an example of what I am talking about; carousel http://food.yahoo.com/;_ylt=AtuShzEA...hz75HDg9VIY.Y5 check on the bottom of the page where it says "try these recipes" I just love the circle indicating how many "pages there are. Do you know where I can find the tutorial or script for this effect? Thanks, Creations_Kash Carousel Slideshow (http://www.dynamicdrive.com/dynamicindex14/carousel.htm) in Internet Explorer functions all right (top center of screen). But same Carousel in Firefox and Chrome is shown top left of screen and I do not know how to center it. How can I solve this problem ? Thank you very much for your help. pro298 I'm having the same trouble with adding an ALT tag to the last image: var imageList = [ "images/banner/banner1.jpg", "images/banner/banner2.jpg", "images/banner/banner3.jpg", "images/banner/banner4.jpg", "images/banner/banner4.jpg", ]; Can anyone help? I am trying to set up a jQuery carousel on my home page. I want it to operate by mouse - also auto scrolling, be horizontal, be circular, show one image at once. I currently have three images to show one at a time in a containing div. All three images are showing together. One is in the container, in the right place, two others are shown below it. These two should be hidden in the carousel. The carousel itself, does not work. Please can anyone tell me what I am doing wrong?! I would like to keep, at least some, of my hair! Here is my code in the head; Code: <link rel="stylesheet" type="text/css" href="css/deestyle.css" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript" src="js/jcarousellite_1.0.1.pack.js"></script>
<!-- Optional -->
<script type="text/javascript" src="js/mousewheel.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(function() {
$(".carousel").jCarouselLite({
mouseWheel: true,
auto: 800,
speed: 500,
vertical: false,
circular: true,
visible: 1
});
});
});
</script>
This is the code in the body;
<div class="carousel">
<ul id="slides">
<li><img src="images/imagered.jpg" alt="" width="650" height="350" ></li>
<li><img src="images/imageblue.jpg" alt="" width="650" height="350" ></li>
<li><img src="images/imagegreen.jpg" alt="" width="650" height="350" ></li>
</ul>
</div>
Here is the CSS code;
.carousel {
position: absolute;
top: 200px;
right: 0px;
width: 650px;
height: 350px;
margin: 0px;
padding: 0px;
border: 1px solid #00ff00;
}
#slides {
list-style-type:none;
float: left;
padding: 0;
margin: 0;
}
Big thank you's for any help, in advance Hello! I am new to the boards, I am a graphic and web designer. Been designing and developing web sites since 2001. I have fun doing it and was lucky enough to have someone hire me to do it and get paid for it. The reason I signed up to the boards is so that I can search for some help since I am starting to learn jQuery I am having a little bit of trouble with a page I am working on and was hoping someone would be able to help me out! The problem: I have a spry collapsable panel with 4 panels, in the panels I have jQuery carousel plugins with the thumbs plugin. The problem I am having is that I want the carousel in the 4 panels like I mentioned before but I can only get one of the panels to function fully. The other three loses their forward back functions. I tried copying the code for the first one and just renaming the classes and functions so it would separate the two. The thumbs plugin will still work, I just can not get the carousel function to repeat on another one. I will post the code I have left off with. If you need to see the page you can message me. Thanks for reading and if you can help it will be great! Here is the java: Code: $(document).ready(function () {
$('.infiniteCarousel').infiniteCarousel();
});
$.fn.infiniteCarousel = function () {
function repeat(str, num) {
return new Array( num + 1 ).join( str );
}
return this.each(function () {
var $wrapper = $('> div', this).css('overflow', 'hidden'),
$slider = $wrapper.find('> ul'),
$items = $slider.find('> li'),
$single = $items.filter(':first'),
singleWidth = $single.outerWidth(),
visible = Math.ceil($wrapper.innerWidth() / singleWidth),
currentPage = 1,
pages = Math.ceil($items.length / visible);
if (($items.length % visible) != 0) {
$slider.append(repeat('<li class="empty" />', visible - ($items.length % visible)));
$items = $slider.find('> li');
}
$items.filter(':first').before($items.slice(- visible).clone().addClass('cloned'));
$items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned'));
$items = $slider.find('> li'); // reselect
$wrapper.scrollLeft(singleWidth * visible);
function gotoPage(page) {
var dir = page < currentPage ? -1 : 1,
n = Math.abs(currentPage - page),
left = singleWidth * dir * visible * n;
$wrapper.filter(':not(:animated)').animate({
scrollLeft : '+=' + left
}, 500, function () {
if (page == 0) {
$wrapper.scrollLeft(singleWidth * visible * pages);
page = pages;
} else if (page > pages) {
$wrapper.scrollLeft(singleWidth * visible);
// reset back to start position
page = 1;
}
currentPage = page;
});
return false;
}
$wrapper.after('<a class="arrow back"><</a><a class="arrow forward">></a>');
$('a.back', this).click(function () {
return gotoPage(currentPage - 1);
});
$('a.forward', this).click(function () {
return gotoPage(currentPage + 1);
});
$(this).bind('goto', function (event, page) {
gotoPage(page);
});
});
};
//Carousel 2
$('.infiniteCarouselTwo').infiniteCarouselTwo();
$.fn.infiniteCarouselTwo = function () {
function repeat(str, num) {
return new Array( num + 1 ).join( str );
}
return this.each(function () {
var $wrapperTwo = $('> div', this).css('overflow', 'hidden'),
$slider = $wrapperTwo.find('> ul'),
$items = $slider.find('> li'),
$single = $items.filter(':first'),
singleWidth = $single.outerWidth(),
visible = Math.ceil($wrapperTwo.innerWidth() / singleWidth),
currentPage = 1,
pages = Math.ceil($items.length / visible);
if (($items.length % visible) != 0) {
$slider.append(repeat('<li class="empty" />', visible - ($items.length % visible)));
$items = $slider.find('> li');
}
$items.filter(':first').before($items.slice(- visible).clone().addClass('cloned'));
$items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned'));
$items = $slider.find('> li'); // reselect
$wrapperTwo.scrollLeft(singleWidth * visible);
function gotoPage(page) {
var dir = page < currentPage ? -1 : 1,
n = Math.abs(currentPage - page),
left = singleWidth * dir * visible * n;
$wrapperTwo.filter(':not(:animated)').animate({
scrollLeft : '+=' + left
}, 500, function () {
if (page == 0) {
$wrapperTwo.scrollLeft(singleWidth * visible * pages);
page = pages;
} else if (page > pages) {
$wrapperTwo.scrollLeft(singleWidth * visible);
// reset back to start position
page = 1;
}
currentPage = page;
});
return false;
}
$wrapperTwo.after('<a class="arrow back"><</a><a class="arrow forward">></a>');
$('a.back', this).click(function () {
return gotoPage(currentPage - 1);
});
$('a.forward', this).click(function () {
return gotoPage(currentPage + 1);
});
$(this).bind('goto', function (event, page) {
gotoPage(page);
});
});
};
Here is the CSS: Code: .infiniteCarousel {
width: 395px;
position: relative;
}
.infiniteCarousel .wrapper {
width: 825px; /* .infiniteCarousel width - (.wrapper margin-left + .wrapper margin-right) */
overflow: auto;
min-height: 10em;
position: absolute;
top: 0;
margin-top: 0;
margin-right: 40px;
margin-bottom: 0;
margin-left: 40px;
left: 20px;
}
.infiniteCarousel ul a img {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
.infiniteCarousel .wrapper ul {
width: 9999px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
position: absolute;
top: 0;
}
.infiniteCarousel ul.thumb li {
display:block;
float:left;
padding: 10px;
height: 85px;
width: 85px;
-ms-interpolation-mode: bicubic;
}
.infiniteCarousel ul.thumb li a img {
display:block;
}
.infiniteCarousel .arrow {
display: block;
height: 36px;
width: 37px;
text-indent: -999px;
position: absolute;
top: 25px;
cursor: pointer;
background-image: url(../images/arrow.png);
background-repeat: no-repeat;
background-position: 0 0;
}
.infiniteCarousel .forward {
background-position: 0 0;
right: 0;
background-image: url(../images/arrow.png);
background-repeat: no-repeat;
left: 910px;
}
.infiniteCarousel .back {
background-position: 0 0px;
left: 0;
background-image: url(../images/arrow-back.png);
background-repeat: no-repeat;
}
.infiniteCarousel .forward:hover {
background-position: 0 0px;
background-image: url(../images/arrow.png);
background-repeat: no-repeat;
}
.infiniteCarousel .back:hover {
background-position: 0 0px;
background-image: url(../images/arrow-back.png);
}
ul.thumb li img.hover {
background:url(thumb_bg.png) no-repeat center center;
border: none;
}
#main_view {
}
/* Carousel Two */
.infiniteCarouselTwo {
width: 395px;
position: relative;
}
.infiniteCarouselTwo .wrapperTwo {
width: 825px; /* .infiniteCarouselTwo width - (.wrapperTwo margin-left + .wrapperTwo margin-right) */
overflow: auto;
min-height: 10em;
position: absolute;
top: 0;
margin-top: 0;
margin-right: 40px;
margin-bottom: 0;
margin-left: 40px;
left: 20px;
}
.infiniteCarouselTwo ul a img {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
.infiniteCarouselTwo .wrapperTwo ul {
width: 9999px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
position: absolute;
top: 0;
}
.infiniteCarouselTwo ul.thumbTwo li {
display:block;
float:left;
padding: 10px;
height: 85px;
width: 85px;
-ms-interpolation-mode: bicubic;
}
.infiniteCarouselTwo ul.thumbTwo li a img {
display:block;
}
.infiniteCarouselTwo .arrow {
display: block;
height: 36px;
width: 37px;
text-indent: -999px;
position: absolute;
top: 25px;
cursor: pointer;
background-image: url(../images/arrow.png);
background-repeat: no-repeat;
background-position: 0 0;
}
.infiniteCarouselTwo .forward {
background-position: 0 0;
right: 0;
background-image: url(../images/arrow.png);
background-repeat: no-repeat;
left: 910px;
}
.infiniteCarouselTwo .back {
background-position: 0 0px;
left: 0;
background-image: url(../images/arrow-back.png);
background-repeat: no-repeat;
}
.infiniteCarouselTwo .forward:hover {
background-position: 0 0px;
background-image: url(../images/arrow.png);
background-repeat: no-repeat;
}
.infiniteCarouselTwo .back:hover {
background-position: 0 0px;
background-image: url(../images/arrow-back.png);
}
ul.thumbTwo li img.hover {
background:url(thumb_bg.png) no-repeat center center;
border: none;
}
#main_viewTwo {
}
Here is the HTML: Code: <div id="around" class="CollapsiblePanel">
<div class="CollapsiblePanelTabBlue" tabindex="1">Around town</div>
<div class="CollapsiblePanelContent">
<div id="main_viewTwo"> <img src="images/placeholder.jpg" alt="placeholder" width="938" height="273" /> </div>
<!-- Start Carousel -->
<div class="infiniteCarouselTwo">
<div class="wrapperTwo">
<ul class="thumbTwo">
<li><a href="images/placeholder.jpg"><img src="images/carouhold1.png" alt="Holder image" width="51" height="51" /></a>1</li>
<li><a href="images/placeholder2.jpg"><img src="images/carouhold2.png" width="51" height="51" alt="Holder image" /></a>2</li>
<li><a href="images/placeholder3.jpg"><img src="images/carouhold3.png" width="51" height="51" alt="Holder image" /></a>3</li>
<li><a href="images/placeholder4.jpg"><img src="images/carouhold4.png" width="51" height="51" alt="Holder image" /></a>4</li>
<li><a href="images/placeholder5.jpg"><img src="images/carouhold5.png" width="51" height="51" alt="Holder image" /></a>5</li>
<li><a href="images/placeholder6.jpg"><img src="images/carouhold6.png" width="51" height="51" alt="Holder image" /></a>6</li>
<li><a href="images/placeholder7.jpg"><img src="images/carouhold7.png" width="51" height="51" alt="Holder image" /></a>7</li>
<li><a href="images/placeholder8.jpg"><img src="images/carouhold8.png" width="51" height="51" alt="Holder image" /></a>8</li>
<li><a href="images/placeholder9.jpg"><img src="images/carouhold9.png" width="51" height="51" alt="Holder image" /></a>9</li>
<li><a href="images/placeholder10.jpg"><img src="images/carouhold10.png" width="51" height="51" alt="Holder image" /></a>10</li>
<li><a href="images/placeholder11.jpg"><img src="images/carouhold11.png" width="51" height="51" alt="Holder image" /></a>11</li>
<li><a href="images/placeholder12.jpg"><img src="images/carouhold12.png" width="51" height="51" alt="Holder image" /></a>12</li>
<li><a href="images/placeholder13.jpg"><img src="images/carouhold13.png" width="51" height="51" alt="Holder image" /></a>13</li>
<li><a href="images/placeholder14.jpg"><img src="images/carouhold14.png" width="51" height="51" alt="Holder image" /></a>14</li>
<li><a href="images/placeholder15.jpg"><img src="images/carouhold15.png" width="51" height="51" alt="Holder image" /></a>15</li>
<li><a href="images/placeholder16.jpg"><img src="images/carouhold16.png" width="51" height="51" alt="Holder image" /></a>16</li>
</ul>
</div>
</div>
<!--End Carousel-->
</div>
</div>
<div id="campus" class="CollapsiblePanel">
<div class="CollapsiblePanelTabGreen" tabindex="1">Campus life</div>
<div class="CollapsiblePanelContent">
<div id="main_view"> <img src="images/placeholder.jpg" alt="placeholder" width="938" height="273" /> </div>
<!-- Start Carousel -->
<div class="infiniteCarousel">
<div class="wrapper">
<ul class="thumb">
<li><a href="images/placeholder.jpg"><img src="images/carouhold1.png" alt="Holder image" width="51" height="51" /></a>1</li>
<li><a href="images/placeholder2.jpg"><img src="images/carouhold2.png" width="51" height="51" alt="Holder image" /></a>2</li>
<li><a href="images/placeholder3.jpg"><img src="images/carouhold3.png" width="51" height="51" alt="Holder image" /></a>3</li>
<li><a href="images/placeholder4.jpg"><img src="images/carouhold4.png" width="51" height="51" alt="Holder image" /></a>4</li>
<li><a href="images/placeholder5.jpg"><img src="images/carouhold5.png" width="51" height="51" alt="Holder image" /></a>5</li>
<li><a href="images/placeholder6.jpg"><img src="images/carouhold6.png" width="51" height="51" alt="Holder image" /></a>6</li>
<li><a href="images/placeholder7.jpg"><img src="images/carouhold7.png" width="51" height="51" alt="Holder image" /></a>7</li>
<li><a href="images/placeholder8.jpg"><img src="images/carouhold8.png" width="51" height="51" alt="Holder image" /></a>8</li>
<li><a href="images/placeholder9.jpg"><img src="images/carouhold9.png" width="51" height="51" alt="Holder image" /></a>9</li>
<li><a href="images/placeholder10.jpg"><img src="images/carouhold10.png" width="51" height="51" alt="Holder image" /></a>10</li>
<li><a href="images/placeholder11.jpg"><img src="images/carouhold11.png" width="51" height="51" alt="Holder image" /></a>11</li>
<li><a href="images/placeholder12.jpg"><img src="images/carouhold12.png" width="51" height="51" alt="Holder image" /></a>12</li>
<li><a href="images/placeholder13.jpg"><img src="images/carouhold13.png" width="51" height="51" alt="Holder image" /></a>13</li>
<li><a href="images/placeholder14.jpg"><img src="images/carouhold14.png" width="51" height="51" alt="Holder image" /></a>14</li>
<li><a href="images/placeholder15.jpg"><img src="images/carouhold15.png" width="51" height="51" alt="Holder image" /></a>15</li>
<li><a href="images/placeholder16.jpg"><img src="images/carouhold16.png" width="51" height="51" alt="Holder image" /></a>16</li>
</ul>
</div>
</div>
<!--End Carousel-->
</div>
</div>
Ask me if you need any more information from me. Like I said if you need to see the page message me! It is not a site I want to make too public at the moment for some reasons of who I work for. |
|||||||