|
JavaScript - Caption/image Timing In Slideshow Problem
Hello, hoping someone can help. Have built a slide show for header using following, but there is a very annoying time lag between the photo changing and the caption changing (ie photo changes, then a brief moment later the caption changes). Can anyone tell me how to correct this so that the caption and the photo change simultaneously? Thanks in advance!
<script type="text/javascript"> $(function() { $('#slideshow').cycle({ fx: 'fade', timeout: 3000, after: function() { $('#caption').html(this.alt); } }); }); </script> Similar TutorialsHi, i'm not a Javascript programmer but have adapted this slideshow from an open source online and i need some help in adding some touches and finishing it off. www.sixtydegreedays.com I want to add timings to the main images so they scroll through at a set interval, as well as being able to be clicked through as they are now, can someone help with this? Also, i cannot figure out where the first image (horsebox) goes once i have clicked through the other links - if i click back to horsebox, the image disappears! These are the two most important things, but it would also be helpful if someone could help me pre-load the images to cut down on load time. Hopefully these are quick fixes and someone can take the time to help. Cheers Good day all, I was hoping someone could help me out with the following. I currently have a slideshow that as thumbnails under a main image. The thumbnails slide left and right with hover on a button and with a click changes main image without any problems. Few things I am looking to change/add: 1. The ability to mouse over the main image and have the caption appear than disappear when the mouse is moved off. Currently I have the caption as a static text under the main image. 2. Start the thumbnail position in the middle instead of the left 3. Add mouseover buttons to the main image to give the ability to cycle through the images instead of having to always use the thumbnails. Below I've include the Javascript code: Is this the best way or is there a better way? Example of slideshow: http://neileverosborne.com/portfolios/manatees.html JAVASCRIPT: Code:
var displayWaitMessage=true; // Display a please wait message while images are loading?
var activeImage = false;
var imageGalleryLeftPos = false;
var imageGalleryWidth = false;
var imageGalleryObj = false;
var maxGalleryXPos = false;
var slideSpeed = 0;
var imageGalleryCaptions = new Array();
function startSlide(e)
{
if(document.all)e = event;
var id = this.id;
if(this.id=='arrow_right'){
slideSpeedMultiply = Math.floor((e.clientX - this.offsetLeft) / 5);
slideSpeed = -1*slideSpeedMultiply;
slideSpeed = Math.max(-10,slideSpeed);
}else{
slideSpeedMultiply = 10 - Math.floor((e.clientX - this.offsetLeft) / 5);
slideSpeed = 1*slideSpeedMultiply;
slideSpeed = Math.min(10,slideSpeed);
if(slideSpeed<0)slideSpeed=10;
}
}
function releaseSlide()
{
var id = this.id;
slideSpeed=0;
}
function gallerySlide()
{
if(slideSpeed!=0){
var leftPos = imageGalleryObj.offsetLeft;
leftPos = leftPos/1 + slideSpeed;
if(leftPos>maxGalleryXPos){
leftPos = maxGalleryXPos;
slideSpeed = 0;
}
if(leftPos<minGalleryXPos){
leftPos = minGalleryXPos;
slideSpeed=0;
}
imageGalleryObj.style.left = leftPos + 'px';
}
setTimeout('gallerySlide()',20);
}
function showImage()
{
if(activeImage){
activeImage.style.filter = 'alpha(opacity=50)';
activeImage.style.opacity = 0.5;
}
this.style.filter = 'alpha(opacity=100)';
this.style.opacity = 1;
activeImage = this;
}
function initSlideShow()
{
document.getElementById('arrow_left').onmousemove = startSlide;
document.getElementById('arrow_left').onmouseout = releaseSlide;
document.getElementById('arrow_right').onmousemove = startSlide;
document.getElementById('arrow_right').onmouseout = releaseSlide;
imageGalleryObj = document.getElementById('theImages');
imageGalleryLeftPos = imageGalleryObj.offsetLeft;
var galleryContainer = document.getElementById('galleryContainer');
imageGalleryWidth = galleryContainer.offsetWidth - 20;
maxGalleryXPos = imageGalleryObj.offsetLeft;
minGalleryXPos = imageGalleryWidth - document.getElementById('slideEnd').offsetLeft;
if (navigator.userAgent.indexOf('MSIE') >= 0) {
var arrowWidth = document.getElementById('arrow_left').offsetWidth;
var el = document.createElement('div');
el.style.position = 'absolute';
el.style.left = arrowWidth + 'px';
el.style.width = (galleryContainer.offsetWidth - arrowWidth * 2) + 'px';
el.style.overflow = 'hidden';
el.style.height = '100%';
document.getElementById('galleryContainer').appendChild(el);
el.appendChild(document.getElementById('theImages'));
}
var slideshowImages = imageGalleryObj.getElementsByTagName('IMG');
for(var no=0;no<slideshowImages.length;no++){
slideshowImages[no].onmouseover = showImage;
}
var divs = imageGalleryObj.getElementsByTagName('DIV');
for(var no=0;no<divs.length;no++){
if(divs[no].className=='imageCaption')imageGalleryCaptions[imageGalleryCaptions.length] = divs[no].innerHTML;
}
gallerySlide();
}
function showPreview(imagePath,imageIndex){
var subImages = document.getElementById('previewPane').getElementsByTagName('IMG');
if(subImages.length==0){
var img = document.createElement('IMG');
document.getElementById('previewPane').appendChild(img);
}else img = subImages[0];
if(displayWaitMessage){
document.getElementById('waitMessage').style.display='inline';
}
document.getElementById('largeImageCaption').style.display='none';
img.onload = function() { hideWaitMessageAndShowCaption(imageIndex-1); };
img.src = imagePath;
}
function hideWaitMessageAndShowCaption(imageIndex)
{
document.getElementById('waitMessage').style.display='none';
document.getElementById('largeImageCaption').innerHTML = imageGalleryCaptions[imageIndex];
document.getElementById('largeImageCaption').style.display='block';
}
window.onload = initSlideShow;
I have a jQuery Slideshow script that i'm using and it's all done in 6 lines. Code: $(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){
$('.fadein :first-child').fadeOut()
.next('img').fadeIn()
.end().appendTo('.fadein');},
3000);
});
</script>
I'm having a problem centering it on my website and keeping the images behind each other every time a picture changes. The CSS uses absolute positioning to hide the images behind each other. The fadeIn part of the CSS uses relative positioning. The CSS for the fading image slideshow is at the end of the css. Code: .fadein {
position:relative;
width:100%;
height:300px;
background-color:#000;
overflow:hidden
}
.fadein img {
position:relative;
left:300px;
width:auto;
text-align:center;
top:0px;
}
jonathaneiger.com Hi, Im using the following javascript to cycle through 3 images on my website header. http://www.dynamicdrive.com/dynamici...nslideshow.htm However, I have put it in a div layer and it works fine, except in Internet explorer, if you load the page in a small window and then maximise, it moves out of position. Similarly if you open the page maximised, and then make the page smaller, it again moves out of position. My page layout is centered on the web page. is there anyone who could help me? hi, please ignore this thread..it is a duplicate of one already active. MODS please delete. apologies for my mistake. Hi, Im a complete newbie to javascript and I've basically copied and pasted the javascript I found here to use on my site. Its an onMouseOver slideshow: http://www.javascriptkit.com/script/...ifferent.shtml to use on my site. Basically, my problem is how do I add a second, separate image in a different location on the web page, associated with this script? If I post <a href="javascript:warp()"><img src="myimage" name="targetimage" border=0></a> in two different locations, which is the script for the image, the script stops working, but having it once makes it work. So how do I add two different image locations? Can someone please help me here? I just want to add more images in a different location. ie have image location 1, and image location 2. Thanks in advance Script Below: Code: <script>
function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink1
}
</script>
<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
preloadimages(my images here)
</script>
For the Links:
<a href="creativewriting.html" onMouseover="changeimage(myimages[1],this.href)">Creative Writing</a><br>
For the Image:
<a href="javascript:warp()"><img src="myimage" name="targetimage" border=0></a>
http://www.***.com/5.html i cant get a caption specific to each image to display under the arrows when the image changes. it is especially hard for me because i have to edit the javascript which confuses the **** out of me. it seemed so simple.... thanks for any help ps i cant start an id with a digit? it doesnt seem to cause any problems...why is it stated that this cannot or shouldnot be done? Hi, Does anybody know how to create an Image Slideshow like the ones on the main page of http://www.game.co.uk and http://www.burton.co.uk????
Hello everyone, I'm trying to add a 5th image to this pre-fabricated script: http://www.javascriptkit.com/script/...tionshow.shtml I added another line similar to ["autumn.jpg", "", "", "Ah the cool breeze of autumn."] for my 5th image but the slideshow doesn't load at all. Once I delete the added line, it loads properly with no problems. I'm guessing there's a stipulation somewhere in the .js file but I can't seem to find what's preventing it from loading 5 images. Please help. Thank you very much. Hi, I'm working on an image slideshow for a website (please see the codes below). So far I've got the big images to change whenever I scroll to a thumbnail. There are two more things/functions I'd like to add to it, 1) make the big images clickable and each links to a webpage and 2) make the big images rotating (from first to last image continuously), but still maintain the ability to view other big images when scrolling over to the thumbnails. Here are the codes: Code:
<html>
<head>
<title>Image Gallery</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>
<body>
<table height="15" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="../images/image_thumb01.jpg" alt="" name="thumb01" width="15" height="12" id="thumb01" onMouseOver="MM_swapImage('image','','http://www.chinesebookonline.com/images/Books_T/110812/m_cookbooks65.jpg',1)"></td>
<td><img src="../images/image_thumb02.jpg" alt="" name="thumb02" width="15" height="12" id="thumb02" onMouseOver="MM_swapImage('image','','http://www.chinesebookonline.com/images/Books_T/110812/m_jingdian.jpg',1)"></td>
<td><img src="../images/image_thumb03.jpg" alt="" name="thumb03" width="15" height="12" id="thumb03" onMouseOver="MM_swapImage('image','','http://www.chinesebookonline.com/images/Books_T/110812/m_summerend.jpg',1)"></td>
<td> <img src="../images/image_thumb04.jpg" alt="" name="thumb04" width="15" height="12" id="thumb04" onMouseOver="MM_swapImage('image','','http://www.chinesebookonline.com/images/Books_T/110805/m_weichuan.jpg',1)"></td>
<td><img src="../images/image_thumb05.jpg" alt="" name="thumb05" width="15" height="12" id="thumb05" onMouseOver="MM_swapImage('image','','http://www.chinesebookonline.com/images/Books_T/110805/m_music.jpg',1)"></td>
<td><img src="../images/image_thumb06_off.jpg" width="15" height="12" alt=""></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="http://www.chinesebookonline.com/images/Books_T/110812/m_cookbooks65.jpg" alt="" name="image" id="image" border=""></td>
</tr>
</table>
</body>
</html>
Thanks!!! Hey guys, I hope this is the right place to ask. I have searched the internet high and low for a script that does what I need, but I cant find anything! I would think it would be pretty easy to build, but I am not sure. I need it to do a couple things: -Be able the click the photo to advance to the next one -Fade into the next photo -When it reaches the end, restart with the first photo -Have a counter in text somewhere not on the photo, for example (2 of 3) underneath So does anyone know of anything? I can find tons of scripts but none of them do all these things, theres always something missing. Any advice? Hello I'm trying to setup and image slideshow with captions. I can't it to work so far. Can someone help me. Here is a code snippet: Javascript var crossFadeDuration = 3 var Pic = new Array() Pic[0] = '1.gif' Pic[1] = '2.gif' var t var j = 0 var p = Pic.length var preLoad = new Array() for (i = 0; i < p; i++){ preLoad[i] = new Image() preLoad[i].src = Pic[i] } function runSlideShow(){ if (document.all){ document.images.SlideShow.style.filter="blendTrans(duration=2)" document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)" document.images.SlideShow.filters.blendTrans.Apply() } document.images.SlideShow.src = preLoad[j].src if (document.all){ document.images.SlideShow.filters.blendTrans.Play() } j = j + 1 if (j > (p-1)) j=0 t = setTimeout('runSlideShow()', slideShowSpeed) } Html <body topmargin="5" leftmargin="0" marginheight="0" marginwidth="0" onload="runSlideShow()"> <img id="picture" name="SlideShow" src="1.gif" alt="" width="350" height="195" border="0" align="middle" /> I created a php and some javascript from code I found on this site. The problem is, I am not getting a slide show - only the first picture. I need to be able to slideshow everything in the Images folder - without detailing image names.... Here's what I have - I think I'm missing something simple: In the Images folder I have getimages.php: Code: <?
//PHP SCRIPT: getimages.php
Header("content-type: application/x-javascript");
//This function gets the file names of all images in the current directory
//and ouputs them as a JavaScript array
function returnimages($dirname=".") {
$pattern="(\.jpg$)|(\.png$)|(\.jpeg$)|(\.gif$)"; //valid image extensions
$files = array();
$curimage=0;
if($handle = opendir($dirname)) {
while(false !== ($file = readdir($handle))){
if(eregi($pattern, $file)){ //if this file is a valid image
//Output it as a JavaScript array element
echo 'galleryarray['.$curimage.']="'.$file .'";';
$curimage++;
}
}
closedir($handle);
}
return($files);
}
echo 'var galleryarray=new Array();'; //Define array in JavaScript
returnimages() //Output the array elements containing the image file names
?>
In my page, I put these in the <head> section: Code: <script src="Images/getimages.php"></script>
<script type="text/javascript">
var curimg=0
function rotateimages(){
document.getElementById("slideshow").setAttribute("src", "Images/"+galleryarray[curimg])
curimg=(curimg<galleryarray.length-1)? curimg+1 : 0
}
window.onload=function(){
setInterval("rotateimages()", 2500)
}
</script>
Then, in the body where I want the slideshow I have:
<div style="width: 170px; height: 160px">
<img id="slideshow" src="Images/beer.jpg" />
</div>
This is a image background slideshow im trying to incorp into a DIV instead of the <body>. Ive tried getElementById. But im still having trouble getting it to work. Also the crossfade only works in Internet explorer, i looked up the code to try and fix it for Firefox but i think it only works with CSS3. Any input would be great, i dont know a lot about Javascript most of this is self taut with a little experience using C++. Code: <script language="JavaScript">
<!----------------------------------------------------------------------------
var speed = 3000;
var crossFadeDuration = 3;
var Pic = new Array();
Pic[0] = 'drawing1.jpg';
Pic[1] = 'drawing2.jpg';
Pic[2] = 'drawing1.jpg';
Pic[3] = 'drawing2.jpg';
Pic[4] = 'drawing1.jpg';
Pic[5] = 'drawing2.jpg';
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++)
{
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
function runSlideShow()
{
if (document.MozOpacity!=null)
{
/*trying to fix crossfade for Firefox*/
obj.style.MozOpacity = (opacity/100) - .001;
}
else if (document.all)
{
document.body.style.filter="blendTrans(duration=crossFadeDuration)";
document.body.filters.blendTrans.Apply();
document.body.filters.blendTrans.Play();
}
if (document.body)
{
document.body.background = Pic[j];
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runSlideShow()', speed)
}
}
//--------------------------------------------------------------------------------
</script>
</head>
<body onload="runSlideShow()" bgcolor="#000000">
Forgive me if this is in the wrong forum as I am unsure as to whether this should be PHP or Java, or a WP plugin. Basically I need to have a slideshow that picks images from a folder without the need to use arrays as there will be a large amount of images and I need to literally be able to drop images in a folder and they appear in a random order within the slideshow. As you can appreciate with a large amount of images, the code needs to call them as and when needed rather than loading them in at the beginning. I have been using Wordpress's nextgen gallery and have been hacking away at a few plugins etc, and the closest I have come is to make WP select a different post with gallery each time creating the illusion that the images are in a different order, however this isn't going to be ideal as its not truly random, and breeds duplicates. If I have to stay away from WP that's fine, uploading to an ftp would be ok. Hope someone can point me in the right direction! Thank You A http://www.javascriptkit.com/script/...2/3slide.shtml Hi i have the above image slideshow script running fine on a webpage can anybody tell me how i can get it to run a second time to show a second different slideshow on the same page? Ive tried editing variables but i cant work it out. would be much appreciated Ta Hello there - I have been trying all morning to put a basic slideshow into my site from the below link http://www.javascriptkit.com/script/...bleslide.shtml I am pretty new to this and having to host my images on Photobucket as I use Big Cartel. I cannot figure out where to put the image links and do they need - <a href=" " ></a> or just direct links? I would greatly appreciate any help as my eyes are now hurting!!! Thanks Alice Here is a simple slideshow with an on-off button. The images (7 defined) are numbered 01-07.jpg and in the same folder. My question. How to call the images from a different folder with the script. I can change the <img scr> HTML tag to include a directory where the images are but how do I tell the script? Thanks in advance! ---page code below--- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <script type="text/javascript"> var Start = 1 var Timer3 function SlideShow() { if (document.all.ShowButton.value == "Stop Show") { clearInterval(Timer3) document.all.ShowButton.value = "Start Show" } else { document.all.ShowButton.value = "Stop Show" Timer3 = setInterval("NextPic()" ,3000) } } function NextPic() { Start += 1 if (Start > 7) { Start = 1 } document.all.Pic.src = "0" + Start + ".jpg" } </script> <body> <img id="Pic" src="01.jpg"></p> <input id="ShowButton" type="button" value="Start Show" style="font-size:9pt" onclick="SlideShow()"/><br> </body> </html> Hi, I am using a slideshow and want to basically have an 'image loading' whilst all the images load before the slideshow. Is there a way to do this? So far I have figured the best way around this is to have a GIF as a background image that says the loading message, and then once the slideshow loads over the top its fine, however im guessing this is'nt the right way to do this. I am using this slideshow set to just loop: http://www.dynamicdrive.com/dynamici...lslideshow.htm I am open to using other similar slideshows if there is one more suited. Thanks Alrighty so here's what I have. Live example: http://www.thestrikeforum.com/ex/ It's a image slideshow that dynamically gets all the images (via php) in the current directory and puts them into the slideshow array. The array then randomly displays the images in the slideshow (via javascript). There are 5 images in the folder rotateimage which also has the php script getimages.php in it. Currently only the first image fades in however I want all the images to fade in as the first one does. Codes: Php script that gets all the images for the array: PHP Code: <? //PHP SCRIPT: getimages.php Header("content-type: application/x-javascript"); //This function gets the file names of all images in the current directory //and ouputs them as a JavaScript array function returnimages($dirname=".") { $pattern="(\.jpg$)|(\.png$)|(\.jpeg$)|(\.gif$)"; //valid image extensions $files = array(); $curimage=0; if($handle = opendir($dirname)) { while(false !== ($file = readdir($handle))){ if(eregi($pattern, $file)){ //if this file is a valid image //Output it as a JavaScript array element echo 'galleryarray['.$curimage.']="'.$file .'";'; $curimage++; } } closedir($handle); } return($files); } echo 'var galleryarray=new Array();'; //Define array in JavaScript returnimages() //Output the array elements containing the image file names ?> Main html page with the javascript: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="rotateimage/getimages.php"></script>
<script type="text/javascript">
var curimg=0
var max=galleryarray.length
var random=Math.floor(Math.random()*max)
function rotateimages(){
document.getElementById("slideshow").setAttribute("src", "rotateimage/"+galleryarray[random])
//curimg=(curimg<galleryarray.length-1)? curimg+1 : 0
random=Math.floor(Math.random()*max)
}
function initImage() {
imageId = 'slideshow';
image = document.getElementById(imageId);
setOpacity(image, 0);
image.style.visibility = 'visible';
fadeIn(imageId,0);
}
function setOpacity(obj, opacity) {
opacity = (opacity == 100)?99.999:opacity;
// IE/Win
obj.style.filter = "alpha(opacity:"+opacity+")";
// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = opacity/100;
// Older Mozilla and Firefox
obj.style.MozOpacity = opacity/100;
// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = opacity/100;
}
function fadeIn(objId,opacity) {
if (document.getElementById) {
obj = document.getElementById(objId);
if (opacity <= 100) {
setOpacity(obj, opacity);
opacity += 10;
window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
}
}
}
window.onload=function(){
setInterval("rotateimages()", 2500)
initImage()
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
</head>
<body>
<img src="rotateimage/pic1.jpg" name="slideshow" width="350" height="350" id="slideshow"/>
</body>
</html>
If anyone could assist me in doing so or can help me find a better way to do the fading images for the slideshow feel free to share.. here's the main page code WITHOUT the fading code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="rotateimage/getimages.php"></script>
<script type="text/javascript">
var curimg=0
var max=galleryarray.length
var random=Math.floor(Math.random()*max)
function rotateimages(){
document.getElementById("slideshow").setAttribute("src", "rotateimage/"+galleryarray[random])
//curimg=(curimg<galleryarray.length-1)? curimg+1 : 0
random=Math.floor(Math.random()*max)
}
window.onload=function(){
setInterval("rotateimages()", 2500)
initImage()
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
</head>
<body>
<img src="rotateimage/pic1.jpg" name="slideshow" width="350" height="350" id="slideshow"/>
</body>
</html>
|
|||||||