|
JavaScript - Image Slider To Activate When Images Are Clicked?!
hi,
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>
Similar TutorialsCode: <!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? /** The <a> is a list of menu items that when clicked.... a specific gallery-slider-images should been shown in relation to the galleryId....<div class"gallery" is hidden in CSS> I'd like to use jQuery to complete this task if at all possible, I know it's prob SIMPLE to U GURU's but being new i can't seem to .show() the selected 'gallery' w/o showing them all........... BEST REGARDS _ STH <div id="gallery-menu"> <?php foreach ($galleries as $gallery) : ?> <a onclick="showGallery(<?= $gallery['gallery']['id'] ?>); return false;"><?= $gallery['gallery']['name'] ?> <?php endforeach ?> </div> <?php foreach ($galleries as $gallery): ?> <div id="<?= $gallery['gallery']['id'] ?>" class="gallery"> <div class="slider" style="width; 100%; height: 100%;"> <ul> <?php foreach ($gallery['images'] as $image): ?> <li class="galleries-container"> <img src="<?= UCMVC_APP_BASE_URL ?>/gallery/retrieve-image/<?= $image['id'] ?>" alt="<?= $image['name'] ?>" title="<?= $image['name'] ?>" /> </li> <?php endforeach; ?> </ul> </div> </div> <?php endforeach; ?> // javascript // function showGallery(galleryId) { ????!?!?!?!?! } 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 Hello, I am trying to connect images to some anchor tags, but each anchor matches a specific image. The aim is that when someone clicks on a certain link it will display an image (which is some text information). I have some code from a previous thread which I gained a really good script from the help. I'm not sure how to connect these anchors to the specific image. I'm sure this code only needs tweaking slightly to give me what I need. Here is the code relevant to my issue: HTML: Code: <div id="faqBox"> <h1 id="faqHeader"><u>F.A.Q's</u></h1> <ul> <li><a href="#" onclick="">What is the purpose of this website?</a></li> <li><a href="#">What type of achievements would someone of had to do to be eligable?</a></li> <li><a href="#">Why was this award created?</a></li> <li><a href="#">How do we nominate somebody?</a></li> <li><a href="#">How are people presented with this award?</a></li> </ul> </div> <div id="faqInfoBox"> <img src="images/content1.png" name="allimage" id="allimage" alt="content1" border="0" /> </div> CSS: Code: #faqInfoBox {width: 40%;
border: 5px ridge;
height: 310px;
background: #606626;
float: right;
margin-right: 3%;}
#faqBox ul li{font-family: trebuchet ms;
line-height: 30px;
list-style-type: square;}
JS: Code: var imgArray = new Array(4);
imgArray[0] = 'images/content1.png';
imgArray[1] = 'images/content2.png';
imgArray[2] = 'images/content3.png';
imgArray[3] = 'images/content4.png';
imgArray[4] = 'images/content5.png';
var currIndex = 0;
function imgChange(that)
{
if(currIndex < myImages.length - 1) {
that.src = myImages[++currIndex];
}else {
currIndex = 0;
that.src = myImages[currIndex];
}
}
The JavaScript is what needs tweaking. I also have it uploaded to my free domain which you can find the site he http://abjava.host22.com/Site1/ if you would care to take a look. I don't want to be fed the answer but just some pointers/tips on what I could do. I was thinking of connecting the function to the anchor tags onclick event. But because I need the specific images to display when their relative link is clicked I know it could be harder to do this. I want to stack the images on top of each other and hide their display then when a link is clicked show it, when another is clicked, hide the first and show that one. (Please note,the last 4 images have not yet been created). I can figure out to do the CSS for this so just any help on the JS side will be very helpful to me. Thank you very much in advance if anyone can help. Regards, LC. hi everyone, firstly to call myself a noob would be inflating my ego. I have done one project in javascript so far and have had no schooling on the topic, however I have learned quite a lot in the last few months from this thing called the 'internet'. So far I managed to make an html image map that has various tooltips which will appear onmouseover, and the tooltip disappears onmouseout. Each point of coords that i have defined has a hyperlink to a different page on the internet. It works just like i wanted it to and i couldn't be happier, that is, when i'm using a mouse... When i am using a touchscreen device it is a different story. specifically i'm trying to port my html page to android as i figured it would be easy with the android sdk and webview (it was, but read on). What i found when i used the 'app' on my phone was that onmouseover works when you touch the screen, however it also registers as a click, so pop goes the tooltip, and i'm whisked away to my webpage. not the desired result. Ideally I would like to hold down the screen for 3 seconds and then the hyperlink would activate, but i decided that just getting the thing functional would suffice for the time beaing so i tried to include some 'ondblclick' that would trigger a document.location. This worked fine on a web browser again, but had no result on the touchscreen. I decided to abandon this half step because I have read that ondblclick doesn't work in an image map and it isn't my intended result anyway. I have found a lot of javascript and jquery samples that emulate the onHold event that i'm trying to achieve, both on this forum and all over the internet, however these samples are overly complex and are focused on looping an action, such as incrementally increasing a value or zooming or whatever. I just want to redirect the user to another page if they trigger 'onmousedown' for 3 seconds. anybody want to trade some help for a thankyou? 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 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! Hi, I have a table with 2 colums, the left column is to preview image and the right column is for 4 small thumbnails. Iwant the preview picture to change when clicked on the individual thumbnail. Can someone please help me on this? Code: <table width="816" height="303" border="1">
<tr>
<td width="396" height="297"> </td>
<td width="404" valign="top"><table width="100%" border="1">
<tr>
<td width="52%" height="166"><img src="../Avizhome/images/calendar1.jpg" width="200" height="200"/> </td>
<td width="48%"><img src="../Avizhome/images/calendar1.jpg" width="200" height="200" /></td>
</tr>
<tr>
<td height="174"><img src="../Avizhome/images/calendar1.jpg" width="200" height="200" /></td>
<td><img src="../Avizhome/images/calendar1.jpg" width="200" height="200" /></td>
</tr>
</table></td>
</tr>
</table>
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 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. 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?
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! 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.
does anyone know if there is a jquery image gallery/slider plugin that can be used multiple time on one page?
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.. 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? I have used an excellent template which uses JS to display background images. However while this works locally it doesn't when published. The site structure is sound and I notice this happens with the source files I downloaded also so it's nothing I have done in my build which could have caused this. This is the link to my site, everything is fine except the background image not showing. http://www.khawkinsdesign.com Any ideas, as I say fine locally, not fine when published? |
|||||||