|
JavaScript - Is It Possible To Remember Location On A Video Carousel?
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. Similar TutorialsI have a list of videos on one side of my page and a larger player in the main content column on the left. how can i click a video on the right and have it play in the big player on the left? image URL (in case it doesnt show in the post) http://mydomainsample.com/tims/ScreenShot.png also i would prefer to do this with links to youtube/vimeo rather than putting video files on my server. Code: <script language="JavaScript" type="text/javascript">
function confirmDelete(url){
var decision = confirm("Click OK to delete this post.");
if(decision == true){
window.location = url;
}
}
</script>
<!--HTML LATER ON -->
<a onclick="confirmDelete('deletePost.php?id=17')" href=''><img src='delete.png' alt='' title='Delete this post' /></a>
I get absolutely nothing out of this. The confirm box pops up, but a the URL never changes when I click OK. I have no clue what's going wrong here. I'm using Google Chrome to test this out if that helps. Also does not work in Firefox. Hi, I'm using the following Javascript code to show a div layer depending on the URL Code: <script type="text/javascript">
if (location.href.match(/folder/)) {
document.getElementById("div-layer").style.display="block";
}
</script>
This works perfectly when I visit http://www.domain.com/folder but I do not want it to match any subfolders beneath /folder, for example: http://www.domain.com/folder/sub-folder http://www.domain.com/folder/sub-folder2 etc. Does anyone know how I can modify the code to only match /folder or /folder/ and no subfolders beneath it? Thank you in advance. Hi, I currently created a video uploader, but when the video is too big in size, the page seems to be not doing any until the video is completely uploaded. I want to put somewhat like "loading.. please wait" script until the video is not completely uploaded. Thanks. //Ana 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, does anyone know how to make a very simple jQuery vertical carousel? without having to use the plugin...
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/ 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 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! 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? 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 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 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;
}
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 What are the differences between results of these two. Code: window.location.hostname or Code: document.location.hostname 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 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 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 |
|||||||