Learn VBA & Macros in 1 Week!

JavaScript - Carousel Slideshow Impossible To Center

Full Excel VBA Course - Beginner to Expert

Carousel Slideshow Impossible To Center	View Content

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

Full Excel VBA Course - Beginner to Expert

Picture Slideshow Carousel Java Script Like This Example...

Similar Tutorials

View Content

Hello!

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

Can Anyone Figure Out How To Center This Slideshow Of Images

Similar Tutorials

View Content

Hi people, I am using a drupal module, views slideshow, it displays images on my site, the landscape sized images are showing fine, however the portrait images are not centered but aligned left and they look cramped over to one side, I have tried css and its not working for sure, this is the script, Im sorry but I no absolutely no javascript so if anyone can figure this one out I will owe you one. I guess it will need to check for the largest width in the slideshow and then half this for the centre. the link to the file is here aswell http://www.2shared.com/document/3kyc...slideshow.html

// $Id: views_slideshow.js,v 1.1.2.1.2.39 2010/07/01 03:29:08 redndahead Exp $

/**
* @file
* A simple jQuery SingleFrame Div Slideshow Rotator.
*/

/**
* This will set our initial behavior, by starting up each individual slideshow.
*/
Drupal.behaviors.viewsSlideshowSingleFrame = function (context) {
$('.views_slideshow_singleframe_main:not(.viewsSlideshowSingleFrame-processed)', context).addClass('viewsSlideshowSingleFrame-processed').each(function() {
var fullId = '#' + $(this).attr('id');
var settings = Drupal.settings.viewsSlideshowSingleFrame[fullId];
settings.targetId = '#' + $(fullId + " :first").attr('id');
settings.paused = false;

settings.opts = {
speed:settings.speed,
timeoutarseInt(settings.timeout),
delayarseInt(settings.delay),
sync:settings.sync==1,
random:settings.random==1,
pause:false,
allowPagerClickBubblesettings.pager_hover==1 || settings.pager_click_to_page),
prevsettings.controls > 0)?'#views_slideshow_singleframe_prev_' + settings.vss_id:null,
nextsettings.controls > 0)?'#views_slideshow_singleframe_next_' + settings.vss_id:null,
pagersettings.pager > 0)?'#views_slideshow_singleframe_pager_' + settings.vss_id:null,
nowraparseInt(settings.nowrap),
pagerAnchorBuilder: function(idx, slide) {
var classes = 'pager-item pager-num-' + (idx+1);
if (idx == 0) {
classes += ' first';
}
if ($(slide).siblings().length == idx) {
classes += ' last';
}

if (idx % 2) {
classes += ' odd';
}
else {
classes += ' even';
}

var theme = 'viewsSlideshowPager' + settings.pager_type;
return Drupal.theme.prototype[theme] ? Drupal.theme(theme, classes, idx, slide, settings) : '';
},
after:function(curr, next, opts) {
// Used for Image Counter.
if (settings.image_count) {
$('#views_slideshow_singleframe_image_count_' + settings.vss_id + ' span.num').html(opts.currSlide + 1);
$('#views_slideshow_singleframe_image_count_' + settings.vss_id + ' span.total').html(opts.slideCount);
}
},
befo function(curr, next, opts) {
// Remember last slide.
if (settings.remember_slide) {
createCookie(settings.vss_id, opts.currSlide + 1, settings.remember_slide_days);
}

// Make variable height.
if (settings.fixed_height == 0) {
//get the height of the current slide
var $ht = $(this).height();
//set the container's height to that of the current slide
$(this).parent().animate({height: $ht});
}
},
cleartypesettings.ie.cleartype == 'true')? true : false,
cleartypeNoBgsettings.ie.cleartypenobg == 'true')? true : false
}

// Set the starting slide if we are supposed to remember the slide
if (settings.remember_slide) {
var startSlide = readCookie(settings.vss_id);
if (startSlide == null) {
startSlide = 0;
}
settings.opts.startingSlide = startSlide;
}

if (settings.pager_hover == 1) {
settings.opts.pagerEvent = 'mouseover';
settings.opts.pauseOnPagerHover = true;
}

if (settings.effect == 'none') {
settings.opts.speed = 1;
}
else {
settings.opts.fx = settings.effect;
}

// Pause on hover.
if (settings.pause == 1) {
$('#views_slideshow_singleframe_teaser_section_' + settings.vss_id).hover(function() {
$(settings.targetId).cycle('pause');
}, function() {
if (settings.paused == false) {
$(settings.targetId).cycle('resume');
}
});
}

// Pause on clicking of the slide.
if (settings.pause_on_click == 1) {
$('#views_slideshow_singleframe_teaser_section_' + settings.vss_id).click(function() {
viewsSlideshowSingleFramePause(settings);
});
}

// Add additional settings.
if (settings.advanced != "\n") {
var advanced = settings.advanced.split("\n");
for (i=0; i<advanced.length; i++) {
var prop = '';
var value = '';
var property = advanced[i].split(":");
for (j=0; j<property.length; j++) {
if (j == 0) {
prop = property[j];
}
else if (j == 1) {
value = property[j];
}
else {
value += ":" + property[j];
}
}

// Need to evaluate so true, false and numerics aren't a string.
if (value == 'true' || value == 'false' || IsNumeric(value)) {
value = eval(value);
}
else {
// Parse strings into functions.
var func = value.match(/function\s*$(.*?)$\s*\{(.*)\}/i);
if (func) {
value = new Function(func[1].match(/(\w+)/g), func[2]);
}
}

// Call both functions if prop was set previously.
if (typeof(value) == "function" && prop in settings.opts) {
var callboth = function(before_func, new_func) {
return function() {
before_func.apply(null, arguments);
new_func.apply(null, arguments);
};
};
settings.opts[prop] = callboth(settings.opts[prop], value);
}
else {
settings.opts[prop] = value;
}
}
}

$(settings.targetId).cycle(settings.opts);

// Start Paused
if (settings.start_paused) {
viewsSlideshowSingleFramePause(settings);
}

// Pause if hidden.
if (settings.pause_when_hidden) {
var checkPause = function(settings) {
// If the slideshow is visible and it is paused then resume.
// otherwise if the slideshow is not visible and it is not paused then
// pause it.
var visible = viewsSlideshowSingleFrameIsVisible(settings.targetId, settings.pause_when_hidden_type, settings.amount_allowed_visible);
if (visible && settings.paused) {
viewsSlideshowSingleFrameResume(settings);
}
else if (!visible && !settings.paused) {
viewsSlideshowSingleFramePause(settings);
}
}

// Check when scrolled.
$(window).scroll(function() {
checkPause(settings);
});

// Check when the window is resized.
$(window).resize(function() {
checkPause(settings);
});
}

// Show image count for people who have js enabled.
$('#views_slideshow_singleframe_image_count_' + settings.vss_id).show();

if (settings.controls > 0) {
// Show controls for people who have js enabled browsers.
$('#views_slideshow_singleframe_controls_' + settings.vss_id).show();

$('#views_slideshow_singleframe_playpause_' + settings.vss_id).click(function(e) {
if (settings.paused) {
viewsSlideshowSingleFrameResume(settings);
}
else {
viewsSlideshowSingleFramePause(settings);
}
e.preventDefault();
});
}
});
}

// Pause the slideshow
viewsSlideshowSingleFramePause = function (settings) {
//make Resume translatable
var resume = Drupal.t('Resume');

$(settings.targetId).cycle('pause');
if (settings.controls > 0) {
$('#views_slideshow_singleframe_playpause_' + settings.vss_id)
.addClass('views_slideshow_singleframe_play')
.addClass('views_slideshow_play')
.removeClass('views_slideshow_singleframe_pause')
.removeClass('views_slideshow_pause')
.text(resume);
}
settings.paused = true;
}

// Resume the slideshow
viewsSlideshowSingleFrameResume = function (settings) {
$(settings.targetId).cycle('resume');
if (settings.controls > 0) {
$('#views_slideshow_singleframe_playpause_' + settings.vss_id)
.addClass('views_slideshow_singleframe_pause')
.addClass('views_slideshow_pause')
.removeClass('views_slideshow_singleframe_play')
.removeClass('views_slideshow_play')
.text('Pause');
}
settings.paused = false;
}

Drupal.theme.prototype.viewsSlideshowPagerThumbnails = function (classes, idx, slide, settings) {
var href = '#';
if (settings.pager_click_to_page) {
href = $(slide).find('a').attr('href');
}
return '<div class="' + classes + '"><a href="' + href + '"><img src="' + $(slide).find('img').attr('src') + '" /></a></div>';
}

Drupal.theme.prototype.viewsSlideshowPagerNumbered = function (classes, idx, slide, settings) {
var href = '#';
if (settings.pager_click_to_page) {
href = $(slide).find('a').attr('href');
}
return '<div class="' + classes + '"><a href="' + href + '">' + (idx+1) + '</a></div>';
}

// Verify that the value is a number.
function IsNumeric(sText) {
var ValidChars = "0123456789";
var IsNumber=true;
var Char;

for (var i=0; i < sText.length && IsNumber == true; i++) {
Char = sText.charAt(i);
if (ValidChars.indexOf(Char) == -1) {
IsNumber = false;
}
}
return IsNumber;
}

/**
* Cookie Handling Functions
*/
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else {
var expires = "";
}
document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) {
return c.substring(nameEQ.length,c.length);
}
}
return null;
}

function eraseCookie(name) {
createCookie(name,"",-1);
}

/**
* Checks to see if the slide is visible enough.
* elem = element to check.
* type = The way to calculate how much is visible.
* amountVisible = amount that should be visible. Either in percent or px. If
* it's not defined then all of the slide must be visible.
*
* Returns true or false
*/
function viewsSlideshowSingleFrameIsVisible(elem, type, amountVisible) {
// Get the top and bottom of the window;
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var docViewLeft = $(window).scrollLeft();
var docViewRight = docViewLeft + $(window).width();

// Get the top, bottom, and height of the slide;
var elemTop = $(elem).offset().top;
var elemHeight = $(elem).height();
var elemBottom = elemTop + elemHeight;
var elemLeft = $(elem).offset().left;
var elemWidth = $(elem).width();
var elemRight = elemLeft + elemWidth;
var elemArea = elemHeight * elemWidth;

// Calculate what's hiding in the slide.
var missingLeft = 0;
var missingRight = 0;
var missingTop = 0;
var missingBottom = 0;

// Find out how much of the slide is missing from the left.
if (elemLeft < docViewLeft) {
missingLeft = docViewLeft - elemLeft;
}

// Find out how much of the slide is missing from the right.
if (elemRight > docViewRight) {
missingRight = elemRight - docViewRight;
}

// Find out how much of the slide is missing from the top.
if (elemTop < docViewTop) {
missingTop = docViewTop - elemTop;
}

// Find out how much of the slide is missing from the bottom.
if (elemBottom > docViewBottom) {
missingBottom = elemBottom - docViewBottom;
}

// If there is no amountVisible defined then check to see if the whole slide
// is visible.
if (type == 'full') {
return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)
&& (elemBottom <= docViewBottom) && (elemTop >= docViewTop)
&& (elemLeft >= docViewLeft) && (elemRight <= docViewRight)
&& (elemLeft <= docViewRight) && (elemRight >= docViewLeft));
}
else if(type == 'vertical') {
var verticalShowing = elemHeight - missingTop - missingBottom;

// If user specified a percentage then find out if the current shown percent
// is larger than the allowed percent.
// Otherwise check to see if the amount of px shown is larger than the
// allotted amount.
if (amountVisible.indexOf('%')) {
return (((verticalShowing/elemHeight)*100) >= parseInt(amountVisible));
}
else {
return (verticalShowing >= parseInt(amountVisible));
}
}
else if(type == 'horizontal') {
var horizontalShowing = elemWidth - missingLeft - missingRight;

// If user specified a percentage then find out if the current shown percent
// is larger than the allowed percent.
// Otherwise check to see if the amount of px shown is larger than the
// allotted amount.
if (amountVisible.indexOf('%')) {
return (((horizontalShowing/elemWidth)*100) >= parseInt(amountVisible));
}
else {
return (horizontalShowing >= parseInt(amountVisible));
}
}
else if(type == 'area') {
var areaShowing = (elemWidth - missingLeft - missingRight) * (elemHeight - missingTop - missingBottom);

// If user specified a percentage then find out if the current shown percent
// is larger than the allowed percent.
// Otherwise check to see if the amount of px shown is larger than the
// allotted amount.
if (amountVisible.indexOf('%')) {
return (((areaShowing/elemArea)*100) >= parseInt(amountVisible));
}
else {
return (areaShowing >= parseInt(amountVisible));
}
}
}

How To Center A Javascript Slideshow In A Scaleable Browser

Similar Tutorials

View Content

I'm trying to center a javascript fading-slideshow.

The javascript slideshow is 1100 pixels wide. I want it centered even if the visitor's resolution is 1024px wide or less, plus I want the website to not introduce a left-right scroll bar.

Is this possible?

Please see website: archivedepartment.com

Does anyone know if its possible?

Thanks,
spacex

Javascript Listing Impossible To Figure Out!

Similar Tutorials

View Content

Okay first things first. Firebug this website http://www.locksmith.com/

You will see that they have a script in the head tag. That script is:
Quote:
<script class="yext-synd-74qWXpBkYak=">
(function () {
var el = document.createElement('script');
el.async = true;
el.src = '//s.yext-listings.com/yext?aid=74qWXpBkYak%3D&city=&state=&zip=&latitude=&longitude=';
(document.getElementsByTagName('head')[0] ||
document.getElementsByTagName('body')[0]).appendChild(el);
})();
</script>
They also have a form. That form is:
Quote:
<form title="Enter your zip and find a qualified, local locksmith" action="results.asp" method="POST">
<p><font style="font-size: 19px; font-weight: 700">FIND A LOCKSMITH</font>
<input type="text" value="14646" style="font-family: Arial; font-size: 22px; color: #666666; font-weight:bold;" onclick="this.value=''" size="5" name="zip">
<input type="image" style="position: relative; top:5px" name="B1" src="images/smallgo2.jpg">
</p>
</form>
When you enter your zip code into that form, I think it is passed to the el.src variable as a parsed string and sent to s.yext-listings.com/ like this: //s.yext-listings.com/yext?aid=74qWXpBkYak%3D&city=&state=&zip=INSERT_ZIP_CODE_PASSED_FROM_THE_FORM_HERE&latitude=&longitu de=

When you click the submit button on the form with an input zip code, it takes you to a page where there is a huge DIV block with this script executing inside it:
Quote:
<script class="yext-synd-74qWXpBkYak=">

(function () {
var el = document.createElement('script');
el.async = true;
el.src = '//s.yext-listings.com/yext?aid=74qWXpBkYak%3D&city=&state=&zip=33405&latitude=&longitude=';
(document.getElementsByTagName('head')[0] ||
document.getElementsByTagName('body')[0]).appendChild(el);

})();

</script>
Well the result on the second page is a listing pulled from a database and laid out in the second page in a DIV block.

My question! How do I emulate this on my website? I have the Yext service. I have been on the phone with the company for over a week now and I cant get any technical support on the integration. Apparently they are having a lot of lay offs and technical support is unavailable.

I am assuming that I need to build a form in HTML and have it pass the zip code to that JavaScript snippet somehow? I also want to know how the JavaScript on the second page renders a listing result from that passed form value?

Thank you so much for the help in advance. I know you guys can figure this out before I do.

Is It Impossible Or Am I Not Lucky Enough To Get An Answer After A Long Search?

Similar Tutorials

View Content

Hi,

I made some changes to the following example:
http://docs.jquery.com/Plugins/validation#Example

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<style type="text/css">
* { font-family: Verdana; font-size: 96%; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
</style>
  <script>
  $(document).ready(function(){
    $("#commentForm").validate();
  });
  </script>

</head>
<body>


 <form class="cmxform" id="commentForm" method="get" action="">
 <fieldset>
   <legend>A simple comment form with submit validation and default messages</legend>
   <p>
     <input id="cname" name="name" size="25" class="required" value="Name" onfocus="if (this.value == 'Name') {this.value=''}" onblur="if(this.value == '') { this.value='Name'}" />
   </p>
   <p>
     <input id="cemail" name="email" size="25"  class="required email" value="Email" onfocus="if (this.value == 'Email') {this.value=''}" onblur="if(this.value == '') { this.value='Email'}" />
   </p>
   <p>
     <input id="curl" name="url" size="25"  class="url" value="URL" onfocus="if (this.value == 'URL') {this.value=''}" onblur="if(this.value == '') { this.value='URL'}" />
   </p>
   <p>
     <textarea id="ccomment" name="comment" cols="35" rows="5" class="required" onfocus="if (this.value == 'Comment') {this.value=''}" onblur="if(this.value == '') { this.value='Comment'}">Comment</textarea>
   </p>
   <p>
     <input class="submit" type="submit" value="Submit"/>
   </p>
 </fieldset>
 </form>
</body>
</html>

I know how to add custom validation methods for the required fields Name, Email, and Comment. But I just don't know how to validate the optional filed URL. I've searched everywhere to no avail!

Any help is greatly appreciated!
Desparate

Carousel Ii

Similar Tutorials

View Content

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

Vertical Carousel,how?

Similar Tutorials

View Content

How do you make a vertical carousel that displays either text or images?

Need Help Finding This Carousel

Similar Tutorials

View Content

Can anyone direct me to the source of this carousel or something similar?

http://www.murdockyoung.com/projects...-house/images/

Thanks in advance!

My Carousel Not Showing In Safari

Similar Tutorials

View Content

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/

Vertical Carousel In Smoothgallery 2.0?

Similar Tutorials

View Content

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!

Jquery Carousel/scroller

Similar Tutorials

View Content

Hi, does anyone know how to make a very simple jQuery vertical carousel? without having to use the plugin...

Javascript Not Working For Carousel

Similar Tutorials

View Content

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

Adding An Alt Tag On A Carousel Banner Image (.js)

Similar Tutorials

View Content

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?

Problem With Shakiness On Carousel Script

Similar Tutorials

View Content

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

Jquery Slider/carousel Not Functioning

Similar Tutorials

View Content

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;
}

Javascript Carousel - Not From Dynamic Drive

Similar Tutorials

View Content

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

Is It Possible To Remember Location On A Video Carousel?

Similar Tutorials

View Content

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.

Picture Carousel Script Jacked Up...plzz Help

Similar Tutorials

View Content

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

Jquery Carousellite - All Images Showing When Only One Should - Carousel Not Working

Similar Tutorials

View Content

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

Jquery Carousel Plugin And Thumbs Plugin Help.

Similar Tutorials

View Content

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">&lt;</a><a class="arrow forward">&gt;</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">&lt;</a><a class="arrow forward">&gt;</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.