|
JavaScript - Images Stored In Js Array (clonenode) Do Not Work In The Image Slider
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>Slayeroffice Image Slider (altered)</title>
<script>
var img = new Array();
img[0] = "http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png";
img[1] = "http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png";
img[2] = "http://www.techlifeweb.com/facebook_logo.jpg";
img[3] = "http://hackingarticles.com/wp-content/uploads/gmail_logo_stylized.png";
for(var image=[], p=0; p<img.length; p++){
image[p] = new Image();
image[p].src = img[p];
}
var current = 0;
window.onload = function so_init() {
if(!document.getElementById || !document.createElement){
return;
}
for(var q=0; q<img.length; q++){
imgs = document.createElement("img");
imgs.src = img[q];
img[q].style.display = "none";
document.getElementById("imageContainer").appendChild(imgs.cloneNode(true));
}
for(i=1;i<img.length;i++){
img[i].xOpacity = 0;
}
img[0].style.display = "block";
img[0].xOpacity = .99;
setTimeout(so_xfade,1000);
}
function so_xfade() {
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1] ? current+1 : 0;
nOpacity = imgs[nIndex].xOpacity;
cOpacity-=.05;
nOpacity+=.05;
img[current].xOpacity = cOpacity;
img[nIndex].xOpacity = nOpacity;
img[nIndex].style.display = "block";
setOpacity(img[current]);
setOpacity(img[nIndex]);
if(cOpacity<=0) {
img[current].style.display = "none";
current = nIndex;
setTimeout(so_xfade,1000);
}
else {
setTimeout(so_xfade,100);
}
}
function setOpacity(obj) {
if(obj.xOpacity>.99) {
obj.xOpacity = .99;
return;
}
obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
}
</script>
<style>
#imageContainer {
height:309px;
}
#imageContainer img {
width:500px;
height:309px;
position:absolute;
top:0; left:0;
}
</style>
</head>
<body>
<div id="imageContainer">
<!--
<img src="http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png" alt="Swimming Pool Water" />
<img src="http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png" alt="Notebook" />
<img src="http://www.techlifeweb.com/facebook_logo.jpg" alt="Bottle Neck" />
<img src="http://hackingarticles.com/wp-content/uploads/gmail_logo_stylized.png" alt="Nail in a Board" />
-->
</div>
</body>
</html>
The script works if the images are stored within the HTML but when I try to store them in the JS array, it fails. Is there any way to store the images in JS with this script? Similar Tutorialshi, on my site: http://helix3d.previewsite.co.uk/marketing.html the images slide onto the next when the numbers are clicked, I would like to have this functionality on the actual image... need a bit of help here?! Code: <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Helix</title>
<link type="text/css" rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/style.css" title="default" /><!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>
<script type="text/javascript">
$(function() {
$('#slideshow1').after('<div id="nav1" class="nav">').cycle({
fx: 'fade',
speed: 'fast',
timeout: 0,
pager: '#nav1',
befo onBefore
});
$('#slideshow2').after('<div id="nav2" class="nav">').cycle({
fx: 'fade',
speed: 'fast',
timeout: 0,
pager: '#nav2',
befo onBefore
});
$('#slideshow3').after('<div id="nav3" class="nav">').cycle({
fx: 'fade',
speed: 'fast',
timeout: 0,
pager: '#nav3',
befo onBefore
});
$('#slideshow4').after('<div id="nav4" class="nav">').cycle({
fx: 'fade',
speed: 'fast',
timeout: 0,
pager: '#nav4',
befo onBefore
});
$('#slideshow5').after('<div id="nav5" class="nav">').cycle({
fx: 'fade',
speed: 'fast',
timeout: 0,
pager: '#nav5',
befo onBefore
});
function onBefore() {
$('#title').html(this.alt);
}
});
</script>
</head>
<body>
<div id="top">
<div id="topwrapper">
<a href="index.html"><div id="logo">
</div></a>
<ul id="rightnav">
<li><a href="index.html" title="Home">Home</a></li>
<li><a href="news.html" title="News">News</a></li>
<li><a href="services.html" title="Services">Services</a></li>
<li><a href="archive.html" title="Archives">Archive</a></li>
<li><a href="finishes.html" title="Finishes">Finishes</a></li>
<li><a href="showreel.html" title="Showreel">Showreel</a></li>
<li><a href="contact.html" title="Contact">Contact</a></li>
</ul>
<nav>
<ul>
<li><a href="events.html" title="HELIX EVENTS">HELIX EVENTS</a></li>
<li><a href="marketing.html" title="HELIX EXPERIENTIAL MARKETING" class="menuselected">HELIX EXPERIENTIAL MARKETING</a></li>
<li><a href="film.html" title="HELIX FILM & TV SET CONSTRUCTION">HELIX FILM & TV SET CONSTRUCTION</a></li>
<li><a href="exhibitions.html" title="HELIX EXHIBITIONS">HELIX EXHIBITIONS</a></li>
<li><a href="interiors.html" title="HELIX COMMERCIAL INTERIORS">HELIX COMMERCIAL INTERIORS</a></li>
</ul>
</nav>
<div class="line"> </div>
</div>
</div>
<div id="content">
<section id="slider">
<div id="viewport">
<div id="container">
<div id="section-1" class="section">
<img src="images/hero_experiential.jpg">
</div>
</div>
</div>
</section>
<div class="line"> </div>
<div id="left">
<h1>HELIX MARKETING</h1>
<p>We help brands and agencies create experiences that excite, surprise and delight. Our attention to detail and fast-paced production bring your experiential marketing to life and ensure memorable, positive brand connections.</p>
</div>
<div id="right">
<img src="images/quote-marketing.gif" alt="Marketing quote" />
<ul>
<li class="youtube"><a href="#"><img src="images/yt.png" alt="youtube" /></a></li>
<li class="twitter"><a href="#"><img src="images/twit.png" alt="Twitter" /></a></li>
<li class="facebook"><a href="#"><img src="images/fb.png" alt="Facebook" /></a></li>
</ul>
</div>
<div class="clear"> </div>
<div class="dashedlinetop"> </div>
<div id="box1">
<h1>01</h1>
<h2>V Hand</h2>
<p>We were contracted by Speed Communications PR to turn ideas from the creative team at The Game Changer into reality. The concept was a giant hand over 30 ft tall making the V for Virgin sign, designed to look as if it had burst up through the ground.</p>
<ul>
<li><strong>Key people:</strong></li>
<li>Client: Virgin Business Media.<br>
Agency : Speed Communications.<br>
Creative : The Game Changer<br>
Location : Canary Wharf</li>
</ul>
<div id="casestudy1"><a href="case-study-virgin.html">CASE STUDY</a></div>
<div id="slideshow1" class="pics">
<img src="images/marketing/virgin1.jpg" alt="1"/>
<img src="images/marketing/virgin2.jpg" alt="2"/>
<img src="images/marketing/virgin3.jpg" alt="3"/>
<img src="images/marketing/virgin4.jpg" alt="4"/>
<img src="images/marketing/virgin5.jpg" alt="5"/> </div>
</div>
<div class="dashedlinebottom"> </div>
<div class="dashedlinetop"> </div>
<div id="box2">
<h1>02</h1>
<h2>Cat Walk</h2>
<p>We were commissioned by Mischief PR to design, manufacture and project manage the installation of the world's first car mounted fashion catwalk. We scoured London for priceless shoot locations normally off limits and organised logistics to enable a super fast, film shoot set up.</p>
<ul>
<li><strong>Key people:</strong></li>
<li>Client : Vauxhall.<br>
Agency : Mischief PR.<br>
Creative : Dan Glover.<br>
Location : St Paul's Cathedral</li>
</ul>
<div id="slideshow2" class="pics">
<img src="images/marketing/carwalk1.jpg" alt="1"/>
<img src="images/marketing/carwalk2.jpg" alt="2"/>
<img src="images/marketing/carwalk3.jpg" alt="3"/>
<img src="images/marketing/carwalk4.jpg" alt="4"/>
<img src="images/marketing/carwalk5.jpg" alt="5"/> </div>
</div>
<div class="dashedlinebottom"> </div>
<div class="dashedlinetop"> </div>
<div id="box3">
<h1>03</h1>
<h2>Tower of Terror</h2>
<p>As the centre piece of the European launch of the Disney's new Tower Of Terror ride in Paris, Cow PR commissioned us to design and build a full seized replica model of a lift car from the ride. The twist was that the lift had to look as if it had crash landed!</p>
<ul>
<li><strong>Key people:</strong></li>
<li>Client : Disney<br>
Agency : Cow PR<br>
Creative : Claire Myddleton<br>
Location : Leicester Square</li>
</ul>
<div id="slideshow3" class="pics">
<img src="images/marketing/tot1.jpg" alt="1"/>
<img src="images/marketing/tot2.jpg" alt="2"/>
<img src="images/marketing/tot3.jpg" alt="3"/>
<img src="images/marketing/tot4.jpg" alt="4"/>
<img src="images/marketing/tot5.jpg" alt="5"/> </div>
</div>
<div class="dashedlinebottom"> </div>
<div class="dashedlinetop"> </div>
<div id="box4">
<h1>04</h1>
<h2>Ice Age 3</h2>
<p>The set for this experiential brief; for 20th Century Century Fox's Ice 3 movie launch, was designed in house by Brian Dowling. The experience included an chilled Ice Cave and a jungle equipped with rock faces, real plants, a bridge, a lake and heated humidified air. </p>
<ul>
<li><strong>Key people:</strong></li>
<li>Client.: 20th Century Fox.<br>
Agency : Designwerk<br>
Creative : Scott and Ed<br>
Location : CWOA</li>
</ul>
<div id="slideshow4" class="pics">
<img src="images/marketing/ice1.jpg" alt="1"/>
<img src="images/marketing/ice2.jpg" alt="2"/>
<img src="images/marketing/ice3.jpg" alt="3"/>
<img src="images/marketing/ice4.jpg" alt="4"/>
<img src="images/marketing/ice5.jpg" alt="5"/> </div>
</div>
<div class="dashedlinebottom"> </div>
<div class="dashedlinetop"> </div>
<div id="box5">
<h1>05</h1>
<h2>Hanging gardens of paddington</h2>
<p>When Mischief PR wanted to create "The Hanging Gardens of Paddington" for the launch of boutique Hotel Indigo there was only one company on the call sheet. We devised a plan to cantilever the giant basket 40ft above the street, the story went global, the launch was a huge success.</p>
<ul>
<li><strong>Key people:</strong></li>
<li>Client : International Hotel Group<br>
Agency : Mischief PR<br>
Creative : Dan Glover<br>
Location : Paddington</li>
</ul>
<div id="slideshow5" class="pics">
<img src="images/marketing/basket1.jpg" alt="1"/>
<img src="images/marketing/basket2.jpg" alt="2"/>
<img src="images/marketing/basket3.jpg" alt="3"/>
<img src="images/marketing/basket4.jpg" alt="4"/>
<img src="images/marketing/basket5.jpg" alt="5"/> </div>
</div>
<div class="dashedlinebottom"> </div>
<footer>
<ul>
<li><a href="index.html" title="Home">Home</a></li>
<li><a href="events.html" title="Events Design">Events Design</a></li>
<li><a href="marketing.html" title="Marketing Design">Marketing Design</a></li>
<li><a href="film.html" title="Film & Set Design">Film & Set Design</a></li>
<li><a href="exhibitions.html" title="Exhibition Design">Exhibition Design</a></li>
<li><a href="interiors.html" title="Commercial Interior Design">Commercial Interior Design</a></li>
<li><a href="#" title="Sitemap">Sitemap</a></li>
<li><a href="contact.html" title="Contact Helix Ltd">Contact Helix Ltd</a></li>
<li><a href="news.html" title="Latest Helix News">Latest Helix News</a></li>
<li><a href="careers.html" title="Careers">Careers</a></li>
</ul>
<!--<div class="copyright">©2011 Helix </div> -->
</footer>
</div> <!-- end content -->
</body>
</html>
Hey everyone im using nivo slider and I want to have 5 images instead of the general 4 it uses. However I have added my 5th image as the last on to be display. Once it has shown this image it doesn't loop back to the first image again. It loops to the 2nd one. Has anyone got any idea what I need to change so that it loops to the first slide again? Ive tried adding HTML captions to see if this is what it uses to see how many slides there is, ive tried editing the total slides from 0 to 4 & 5. But still no luck Heres the link to the slider : http://cp2.chunkychips.net/~arcsyste/index.php Thanks everyone Megan So when the page loads the thumbnails cycle through using setInterval. When the user clicks on one of the thumbnails, it is supposed to open a new window and show the enlarged version of that thumbnail stored in bigpics. However it only comes up with a broken image link. Any ideas why this is not working? Here is the code: <html> <head> <title>Untitled</title> </head> <script language="JavaScript" type="text/javascript"> <!-- var pics = new Array() pics[0]="pict1.gif" pics[1]="pict2.gif" pics[2]="pict3.gif" pics[3]="pict4.gif" pics[4]="pict5.gif" pics[5]="pict6.gif" var bigpics = new Array() bigpics[0]="pict12.gif" bigpics[1]="pict22.gif" bigpics[2]="pict32.gif" bigpics[3]="pict42.gif" bigpics[4]="pict52.gif" bigpics[5]="pict62.gif" i=0 setInterval("slide()",500) function slide(){ if (i<pics.length) i++ if (i==pics.length) i=0 document.images[0].src=pics[i] } function enlarge(x){ w=window.open() x=bigpics[i] w.document.write("<img src='x'>") } //--> </script> <body> <img src="pict1.gif" alt="" onclick="enlarge(this)"> </body> </html> I am looking to have the user input a word into a textbox then when the user hits an "Add" button, the word is stored to an array and then is displayed in a table. I also want the textbox to clear after the "Add" button is pressed. Next, I want the user to be able to input another word into the textbox and when the "Add" button is pressed, have that word stored to same array as the first word but just to a different number. e.g. ingredient(0)=first word; ingredient(1)=second word. Then I want the second word to be displayed right below the first word in the table, in the next line down.This is what I have so far. You can also see at http://www.stuffedpantry.com/startsearch.html <code> <html> <head> <title>Stuffed Pantry~Recipe Search (Under Construction)</title> <link rel="stylesheet" type="text/css" href="main.css"> </head> <body> <script type="text/javascript"> var ingredients=new Array(); </script> <div id="lftBar"> </div> <div id="level0"> <div id="level1"> <div id="level3"> <div id="rgtBar"> <script type="text/javascript"><!-- google_ad_client = "pub-1493036398028662"; /* 160x600, created 3/15/10 */ google_ad_slot = "0764917859"; google_ad_width = 160; google_ad_height = 600; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div> <div id="topBar"> <img class="displayed" src="logo.jpg"> <div id="advBar"> <p align="center"><font font size="6" color="darkblue"><b><i>A recipe search engine.</i></b></font></p> </div> </div> <div id="level2"> <div id="main"> <p align="center"><font font size="4">Welcome to the search engine of stuffedpantry.com! This page is designed to to help you search our database of recipes to find the perfect recipe for you! So to begin, type in an ingredient. Any ingredient will work! You could put in a type of seasoning, like paprika. Or you can put in a type of soup, like chicken noodle soup! Anything that is considered food will work! And if there isn't a recipe containing the ingredient(s) you have chosen, then submit one to us! You can submit one <a href="recipesubmit.html">here!</font></a> <div id="level4"> <form > <table border="0" cellpadding="0" cellspacing="0" align="center"> <tr><td align="center"><label for="ingredient"><b>Enter Ingredient: </b></label><input type="text" name="ingredient" id="textbox1" style="width:200px;"><div style="clear:left;height:20px;"></div></td><td> <tr><td align="center"><input type="button" value=" Add " onclick="getElementById('ing').innerHTML = getElementById('textbox1').value"></td></tr> <tr><td> </td></tr> <tr><td id="ing"</td></tr> <tr><td> </td></tr> <tr><td align="center"><input type="radio" name="choose" value="only" checked>Search recipes that have <b>ONLY</b> these ingredients<br/><input type="radio" name="choose" value="including">Search recipes that <b>INCLUDE</b> these ingredients</td></tr> <tr><td> </td></tr> <tr><td align="center"><input id="button1" type="submit" value=" Search! "</td></tr> </form> </div> </div> </div> </div> </div> </div> </body> </html> </code> Hello, My site has an image gallery with a row of pictures at the bottom. When I load up the page it should show image 1 in the main gallery window, but instead it's showing image in position #10 (the one to the left of #1). You can see what I'm talking about here. When you load the page it's showing the White House, but it should be showing the Green House (position #1 in slider). The White House can't be seen in the slider since it's in position #10, but shows up first int the main window. Is this a javascript issue or what? All JS files can be found here Can anybody help me debug this?? I'm going nuts Thank you I'm using a image of the day script and my pictures will not be located at the site where the code will be. Code: images[0] = "<img src='yourimage.jpg'>" Do I/can I use the link such as <a href="http://www.sample.com/mphases.htm"> right where (yourimage) is, in between the quotes to link to an offsite picture? Could someone retype this snippet of code showing how it would look for me? Thanks Hey What do I need to do, for this to work both ways without all the bugs? http://kaspernordkvist.dk/slider/ Thanks Zoom Slider - A Javascript Slideshow I've been looking for some tutorials on how to make a zoom image slider like the one I posted as a link. Does anyone have any examples that I can use to help me. Thanks!
I followed this tutorial to create a clickable image slideshow with javascript on a site's homepage. However, it appears that the javascript:slidelink() is still running beyond the intended area as some of my content below the container is now underlined as if it were a link, when it should not be. I can tell that the script is the issue because when hovering over the content it shows "javascript:slidelink()" but will not go to anything when clicked. Here is the code I'm using, which is placed in a Wordpress theme container: Code: <html>
<head>
<script type="text/javascript">
<!--
//preload images
var image1=new Image()
image1.src="image1.png"
var image2=new Image()
image2.src="image2.png"
var image3=new Image()
image3.src="image3.png"
var image4=new Image()
image4.src="image4.png"
var image5=new Image()
image5.src="image5.png"
var image6=new Image()
image6.src="image6.png"
//-->
</script>
</head>
<body>
<a href="javascript:slidelink()">
<img src="image1.png" name="slide" width="100" />
<script type="text/javascript">
<!--
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<3)
step++
else
step=1
setTimeout("slideit()",1800)
}
slideit()
function slidelink(){
if (whichimage==1)
window.location="link1.htm"
else if (whichimage==2)
window.location="link2.htm"
else if (whichimage==3)
window.location="link3.htm"
else if (whichimage==4)
window.location="link4.htm"
else if (whichimage==5)
window.location="link5.htm"
else if (whichimage==6)
window.location="link6.htm"
}
//-->
</script>
</body>
</html>
Can anyone spot what might be causing the issue? Thanks in advance! I have a drop down menu and an image slider that both use javascript code to function. The image slider appears right below the menu but when the actual menu drops down, the drop down part of the menu goes behind the image slider. How do I make it so that the menu drops above the image slider and not behind it? I just need something that rotates/slides a few images when a page loads. I'd guess Jquery would work best? But it needs to work in all browsers, and I have read some horror stories about ones that don't. Any good recommendations?
Hello, I'm trying to find an image slider and gallery script that will let me do this: http://www.7dma.com/clients/poncecol...er_gallery.jpg When clicked, the bottom product thumbnails change the large product image. Smaller, right-side thumbnails let you change different color versions of the large product image. Also, the text to the left and right will be updated in a CMS (I mention this just FYI). If you know how to accomplish this and what script(s) to use, I'll forever be in your debt. Thank you for taking the time to read this post. Hi, I ve recently come across the Advanced jQuery background image slideshow by Marco Folio. I have implemented it fine but when it goes to load an image I get a black screen for a second or two. I have about 15 images and reading around I found out that it has to do with the loading of images and that it would be better adding an image preloader to it. I have tried several pre loaders and have got the to work on their own, but not with this slider. This is the script.js Code: var slideshowSpeed = 6000;
// Variable to store the images we need to set as background
// which also includes some text and url's.
var photos = [
{
"title" : "",
"image" : "1.jpg",
"url" : "#",
"firstline" : "",
"secondline" : ""
}, {
"title" : "",
"image" : "2.jpg",
"url" : "#",
"firstline" : "",
"secondline" : ""
}, {
"title" : "",
"image" : "3.jpg",
"url" : "#",
"firstline" : "",
"secondline" : ""
}, {
"title" : "",
"image" : "4.jpg",
"url" : "#",
"firstline" : "",
"secondline" : ""
}, {
"title" : "",
"image" : "5.jpg",
"url" : "#",
"firstline" : "",
"secondline" : ""
},{
"title" : "",
"image" : "6.jpg",
"url" : "#",
"firstline" : "",
"secondline" : ""
}, {
"title" : "",
"image" : "7.jpg",
"url" : "#",
"firstline" : "",
"secondline" : ""
}, {
"title" : "",
"image" : "8.jpg",
"url" : "#",
"firstline" : "",
"secondline" : ""
}, {
"title" : "",
"image" : "9.jpg",
"url" : "#",
"firstline" : "",
"secondline" : ""
}, {
"title" : "",
"image" : "10.jpg",
"url" : "#",
"firstline" : "",
"secondline" : ""
},
{
"title" : "",
"image" : "11.jpg",
"url" : "#",
"firstline" : "",
"secondline" : ""
},
{
"title" : "",
"image" : "12.jpg",
"url" : "#",
"firstline" : "",
"secondline" : ""
},
{
"title" : "",
"image" : "13.jpg",
"url" : "#",
"firstline" : "",
"secondline" : ""
},
{
"title" : "",
"image" : "14.jpg",
"url" : "#",
"firstline" : "",
"secondline" : ""
}
];
$(document).ready(function() {
// Backwards navigation
$("#back").click(function() {
stopAnimation();
navigate("back");
});
// Forward navigation
$("#next").click(function() {
stopAnimation();
navigate("next");
});
var interval;
$("#control").toggle(function(){
stopAnimation();
}, function() {
// Change the background image to "pause"
$(this).css({ "background-image" : "url(images/btn_pause.png)" });
// Show the next image
navigate("next");
// Start playing the animation
interval = setInterval(function() {
navigate("next");
}, slideshowSpeed);
});
var activeContainer = 1;
var currentImg = 0;
var animating = false;
var navigate = function(direction) {
// Check if no animation is running. If it is, prevent the action
if(animating) {
return;
}
// Check which current image we need to show
if(direction == "next") {
currentImg++;
if(currentImg == photos.length + 1) {
currentImg = 1;
}
} else {
currentImg--;
if(currentImg == 0) {
currentImg = photos.length;
}
}
// Check which container we need to use
var currentContainer = activeContainer;
if(activeContainer == 1) {
activeContainer = 2;
} else {
activeContainer = 1;
}
showImage(photos[currentImg - 1], currentContainer, activeContainer);
};
var currentZindex = -400;
var showImage = function(photoObject, currentContainer, activeContainer) {
animating = true;
// Make sure the new container is always on the background
currentZindex--;
// Set the background image of the new active container
$("#headerimg" + activeContainer).css({
"background-image" : "url(images/" + photoObject.image + ")",
"display" : "block",
"z-index" : currentZindex
});
// Hide the header text
$("#headertxt").css({"display" : "none"});
// Set the new header text
$("#firstline").html(photoObject.firstline);
$("#secondline")
.attr("href", photoObject.url)
.html(photoObject.secondline);
$("#pictureduri")
.attr("href", photoObject.url)
.html(photoObject.title);
// Fade out the current container
// and display the header text when animation is complete
$("#headerimg" + currentContainer).fadeOut(function() {
setTimeout(function() {
$("#headertxt").css({"display" : "block"});
animating = false;
}, 500);
});
};
var stopAnimation = function() {
// Change the background image to "play"
$("#control").css({ "background-image" : "url(images/btn_play.png)" });
// Clear the interval
clearInterval(interval);
};
// We should statically set the first image
navigate("next");
// Start playing the animation
interval = setInterval(function() {
navigate("next");
}, slideshowSpeed);
});
and this is the part of the html where it is added: Code: <div id="header_top"> <div id="headerimgs"> <div id="headerimg1" class="headerimg"></div> <div id="headerimg2" class="headerimg"></div> </div> </div> I would like to load 2 images on page load and then while it is displaying the 2 images to download to the browser cache the rest. Could you point me in the right direction. Thanks I am using a JQuery Slider function in one of my forms that has the folowing code: Code: <script>
$(function() {
$( "#slider" ).slider({
value:100,
min: 0,
max: 100,
step: 1,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value + "% Clear" );
}
});
$( "#amount" ).val( $( "#slider" ).slider( "value" ) + "% Clear" );
});
</script>
And the form looks like: Code: <form method=POST etc...>
<div id="slider"></div>
<span><input type="text" id="amount" name="Percentage" style="border:0; color:#f6931f; font-weight:bold;" /></span>
</form>
Now, in the php, I have an error system set up, so that if one of the items in the form are left blank etc., an error will generate without posting the form. However, I am using <?php echo ?> in the form to repopulate the fields that were entered, so user does not have to fill them again. However, the slider always resets back to 100%... How can I fix this so that if the form does not POST, the slider will keep the value that the user set it at. Is this possible, I am having trouble figuring it out. Thanks! HI friends., i am having a problem with using image slider script and pretty photo in one page. i have hosting website at two diffrent places. it is working fine here...http://codersonline.co.cc/sgreens-de...hp?option=unit but giving problem at http://www.savitrygreens.com/DeMo/index.php?option=unit really frustrated... don't know how to use noconflict method please help.. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css">
#imgSlides {
display: none;
width: 500px;
height: 500px;
}
</style>
<script type="text/javascript">
var img = [];
img[0] = {src: "http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png",
cap: "",
url: "",
des: ""
};
img[1] = {src: "http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png",
cap: "",
url: "",
des: ""
};
img[2] = {src: "http://www.techlifeweb.com/facebook_logo.jpg",
cap: "",
url: "",
des: ""
};
img[3] = {src: "http://www.thetechherald.com/media/images/201115/Adobe_2.jpg",
cap: "",
url: "",
des: ""
};
for (var imgs=[], i=0; i<img.length; i++){
imgs[i] = new Image();
imgs[i].src = img[i].src;
}
var curPic = 0;
var fadeTimer;
var speed = 50;
var opacStep = 0.5;
var dirn = -1;
var curOpac = 10;
function fade(){
if(fadeTimer){clearInterval(fadeTimer);}
fadeTimer = setInterval(setOpacity,speed);
}
function setOpacity() {
curOpac += opacStep * dirn;
if (curOpac < 0){
swapImage();
curOpac = 0;
document.getElementById("autoPic").onclick = function(){
dirn = (dirn==1) ? 0 : 1 ;
}
dirn = 1;
fade();
return;
}
if (curOpac > 10){
curOpac = 10;
clearInterval(fadeTimer);
document.getElementById("autoPic").onclick = function(){
dirn = (dirn==-1) ? 0 : -1 ;
}
dirn = -1;
setTimeout(fade,1000);
return;
}
if (imgSlider.style.opacity=="string"){
imgSlider.style.opacity = curOpac/10;
}
else {
imgSlider.style.filter = 'alpha(opacity=' + curOpac*10 + ')';
imgSlider.style.MozOpacity = curOpac/10;
}
}
function swapImage(){
curPic = (++curPic > img.length-1) ? 0 : curPic;
imgSlider.src = img[curPic].src;
}
function prevImage(){
document.getElementById("prevImage").onclick = function fade(){
if(fadeTimer){clearInterval(fadeTimer);}
fadeTimer = setInterval(setOpacity,speed);
}
function setOpacity() {
curOpac += opacStep * dirn;
if (curOpac < 0){
swapImage();
curOpac = 0;
dirn = 1;
fade();
return;
}
if (curOpac > 10){
curOpac = 10;
clearInterval(fadeTimer);
dirn = -1;
document.getElementById("prevImage").onclick = function(){setTimeout(fade,1000);}
return;
}
if (imgSlider.style.opacity=="string"){
imgSlider.style.opacity = curOpac/10;
}
else {
imgSlider.style.filter = 'alpha(opacity=' + curOpac*10 + ')';
imgSlider.style.MozOpacity = curOpac/10;
}
}
function swapImage(){
curPic = (--curPic < 0)? img.length-1 : curPic;
imgSlider.src = img[curPic].src;
}
}
window.onload = function(){
imgSlider = document.getElementById('imgSlides');
imgSlider.src = img[curPic].src;
imgSlider.style.display = 'inline';
document.getElementById("autoPic").onclick = fade;
prevImage();
}
</script>
</head>
<body>
<img id="imgSlides" src="" alt="" />
<br />
<a id="prevImage" href="#">PREV</a>
<a id="autoPic" href="#" title="Play / Pause">AUTO</a>
</body>
</html>
I've taken reference of this code from this forum and altered it a bit to achieve the effect that an image will be changed once the prev button is pressed. Image by image fading works well in IE8 (press the button once, the image is changed once; when pressed again, it changes again; step by step) But in Firefox 4, it just auto fades into another image. I tried to debug it in the Firefox console but due to my lack of knowledge in JS, I could not find the root of the problem. Can anyone explain a bit why it works in IE but not in Firefox? Something similar to the navigation menu on http://www.gamewearteamsports.com/. You hover over a link and a box appears below that spreads the width of the menu itself. Friend of mine told me it was using actionscript but I have no idea how to create a drop down box (not menu). Any ideas? My friend told me Dreamweaver has the ability t create a drop down box but I have no idea. Also does anyone know how to create an image slider similar to the one on that site? A slider that fades from one image to the next with the navigation arrows on the left and right side and the dots on top left? I'm working on a website. Basic layout is up at http://adamnerland.com/onestudent/ The layout looks perfect and the image slider I'm using works in every browser I've tested except for IE 7.0 and earlier. I'm not a JavaScript programmer, so I'm not really sure how to debug this. Is it due to conflicts with my dropdown menu JavaScript? Anyone have any ideas? does anyone know if there is a jquery image gallery/slider plugin that can be used multiple time on one page?
Does anyone know the code/script that is used for the image slider and the category switcher (where it says Our Games) as seen on http://en.popmog.com/games? I have no idea how to create something similar on my own site.
|
|||||||