jarv Posted June 7, 2011 Share Posted June 7, 2011 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?! <!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', before: onBefore }); $('#slideshow2').after('<div id="nav2" class="nav">').cycle({ fx: 'fade', speed: 'fast', timeout: 0, pager: '#nav2', before: onBefore }); $('#slideshow3').after('<div id="nav3" class="nav">').cycle({ fx: 'fade', speed: 'fast', timeout: 0, pager: '#nav3', before: onBefore }); $('#slideshow4').after('<div id="nav4" class="nav">').cycle({ fx: 'fade', speed: 'fast', timeout: 0, pager: '#nav4', before: onBefore }); $('#slideshow5').after('<div id="nav5" class="nav">').cycle({ fx: 'fade', speed: 'fast', timeout: 0, pager: '#nav5', before: 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> Quote Link to comment Share on other sites More sharing options...
JustLikeIcarus Posted June 8, 2011 Share Posted June 8, 2011 I tested this and it worked for what you want. All i added was the "next" attribute. $('#slideshow1').after('<div id="nav1" class="nav">').cycle({ fx: 'fade', speed: 'fast', timeout: 0, pager: '#nav1', before: onBefore next: $('#slideshow1 img') }); Quote Link to comment Share on other sites More sharing options...
jarv Posted June 8, 2011 Author Share Posted June 8, 2011 thankyou very much! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.