|
JavaScript - Js Image Slider Problem In Firefox 4 (works Well In Ie8))
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? Similar TutorialsI'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? Solved
Hi, This code uses the getElementById to change the background of certain <tr>'s. In a nutshell there are two buttons, the code checks which one has been clicked, then checks the background colour of a relevant <tr> and depending what it finds changes the colours of the cells. Works fine in Chrome and Firefox but not in IE and I'm now sorely vexed by it. Can anyone shed light on the solution please? Code: <script language="javascript" type="text/javascript">
function changeBackgroundColor(objDivID)
{
var backColor = new String();
if ( objDivID == "lifesciences" )
{
backColor = document.getElementById('claire').style.backgroundColor;
}
if ( objDivID == "healthcare" )
{
backColor = document.getElementById('adrienne').style.backgroundColor;
}
if(backColor.toLowerCase()=='#ffffff' || backColor.toLowerCase()=='rgb(255, 255, 255)')
// IE works with hex code of color e.g.: #eeeeee
// Firefox works with rgb color code e.g.: rgb(238, 238, 238)
// Thats why both types are used in If-condition below
{
if ( objDivID == "lifesciences" )
{
document.getElementById('david').style.backgroundColor = '#c0c0c0';
document.getElementById('claire').style.backgroundColor = '#c0c0c0';
document.getElementById('adrienne').style.backgroundColor = '#ffffff';
document.getElementById('karen').style.backgroundColor = '#c0c0c0';
document.getElementById('alice').style.backgroundColor = '#c0c0c0';
document.getElementById('kelly').style.backgroundColor = '#ffffff';
document.getElementById('sarah').style.backgroundColor = '#c0c0c0';
document.getElementById('carolyn').style.backgroundColor = '#c0c0c0';
document.getElementById('paul').style.backgroundColor = '#c0c0c0';
document.getElementById('kayleigh').style.backgroundColor = '#c0c0c0';
document.getElementById('tim').style.backgroundColor = '#c0c0c0';
document.getElementById('chantal').style.backgroundColor = '#c0c0c0';
document.getElementById('lee').style.backgroundColor = '#c0c0c0';
document.getElementById('lisa').style.backgroundColor = '#c0c0c0';
}
else
{
document.getElementById('david').style.backgroundColor = '#c0c0c0';
document.getElementById('claire').style.backgroundColor = '#ffffff';
document.getElementById('adrienne').style.backgroundColor = '#c0c0c0';
document.getElementById('karen').style.backgroundColor = '#c0c0c0';
document.getElementById('alice').style.backgroundColor = '#c0c0c0';
document.getElementById('kelly').style.backgroundColor = '#c0c0c0';
document.getElementById('sarah').style.backgroundColor = '#c0c0c0';
document.getElementById('carolyn').style.backgroundColor = '#ffffff';
document.getElementById('paul').style.backgroundColor = '#ffffff';
document.getElementById('kayleigh').style.backgroundColor = '#ffffff';
document.getElementById('tim').style.backgroundColor = '#c0c0c0';
document.getElementById('chantal').style.backgroundColor = '#c0c0c0';
document.getElementById('lee').style.backgroundColor = '#c0c0c0';
document.getElementById('lisa').style.backgroundColor = '#c0c0c0';
}
}
else
{
document.getElementById('david').style.backgroundColor = '#ffffff';
document.getElementById('claire').style.backgroundColor = '#ffffff';
document.getElementById('adrienne').style.backgroundColor = '#ffffff';
document.getElementById('karen').style.backgroundColor = '#ffffff';
document.getElementById('alice').style.backgroundColor = '#ffffff';
document.getElementById('kelly').style.backgroundColor = '#ffffff';
document.getElementById('sarah').style.backgroundColor = '#ffffff';
document.getElementById('carolyn').style.backgroundColor = '#ffffff';
document.getElementById('paul').style.backgroundColor = '#ffffff';
document.getElementById('kayleigh').style.backgroundColor = '#ffffff';
document.getElementById('tim').style.backgroundColor = '#ffffff';
document.getElementById('chantal').style.backgroundColor = '#ffffff';
document.getElementById('lee').style.backgroundColor = '#ffffff';
document.getElementById('lisa').style.backgroundColor = '#ffffff';
}
}
</script>
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! 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? 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 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! Hey. I am looking for a gallery/image slider script that looking like this image/or does the same as the image below: Something like that or similar if anyone knows a link to one or knows the code please help. Thanks for reading. Mark. 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 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? 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?
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? 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>
if you look on my website here you will see a slider on the front page. works fine on all browsers except for internet explorer. on IE, when each picture scrolls, the page will scroll itself down to the bottom. also, after about 4 pictures are scrolled, the slider stops and is just a white box for the rest of the time. does anyone have any ideas??? thanks (if you check the validator it says something about not understanding the value "allowTransparency") thanks again! |
|||||||