March 2, 200917 yr please check the below link first http://www.efectorelativo.net/laboratory/noobSlide/ here some nice and beautiful and attractive slider, but there is no documantion for using it can any one help me that i can implement the sliders on a site or how can use it??
March 2, 200917 yr The site is in spanish lol Basically what you need to do is download mootools which is a javascript library. Then download the plugin which creates the slide animation *PS: Mootools comes with the .zip file from the spanish site. (link above) so you dont need to download it again. Then when you download, there will be a .html file there. Look at the source, and find which sample you want to add to your site. Lets say you like sample 1, if thats the case, add this to your html: <script type="text/javascript" src="mootools-1.2-core.js"></script> <script type="text/javascript" src="_class.noobSlide.packed.js"></script> <script type="text/javascript"> window.addEvent('domready',function(){ //SAMPLE 1 (auto, every 5 sec) var nS1 = new noobSlide({ box: $('box1'), items: [0,1,2,3], size: 480, autoPlay: true }); //SAMPLE 2 (transition: Bounce.easeOut) var nS2 = new noobSlide({ box: $('box2'), items: [0,1,2,3,4,5,6,7], interval: 3000, fxOptions: { duration: 1000, transition: Fx.Transitions.Bounce.easeOut, wait: false }, addButtons: { previous: $('prev1'), play: $('play1'), stop: $('stop1'), next: $('next1') } }); </script> In the body tag: <!-- SAMPLE 1 --> <h2>Sample 1</h2> <div class="sample"> <div class="mask1"> <div id="box1"> <span><img src="img1.jpg" alt="Photo" /></span> <span><img src="img2.jpg" alt="Photo" /></span> <span><img src="img3.jpg" alt="Photo" /></span> <span><img src="img4.jpg" alt="Photo" /></span> <span><img src="img5.jpg" alt="Photo" /></span> <span><img src="img6.jpg" alt="Photo" /></span> <span><img src="img7.jpg" alt="Photo" /></span> <span><img src="img8.jpg" alt="Photo" /></span> </div> </div> </div> Make sure the following files are in the same directory as your page: mootools-1.2-core.js _class.noobSlide.packed.js Hope this works
March 4, 200917 yr Author The site is in spanish lol Basically what you need to do is download mootools which is a javascript library. Then download the plugin which creates the slide animation *PS: Mootools comes with the .zip file from the spanish site. (link above) so you dont need to download it again. Then when you download, there will be a .html file there. Look at the source, and find which sample you want to add to your site. Lets say you like sample 1, if thats the case, add this to your html: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"> <head> <title>noobSlide - mootools</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="_web.css" type="text/css" media="screen" /> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> <script type="text/javascript" src="mootools-1.2-core.js"></script> <script type="text/javascript" src="_class.noobSlide.packed.js"></script> <script type="text/javascript"> window.addEvent('domready',function(){ //SAMPLE 1 (auto, every 5 sec) var nS1 = new noobSlide({ box: $('box1'), items: [0,1,2,3], size: 480, autoPlay: true }); //SAMPLE 2 (transition: Bounce.easeOut) var nS2 = new noobSlide({ box: $('box2'), items: [0,1,2,3,4,5,6,7], interval: 3000, fxOptions: { duration: 1000, transition: Fx.Transitions.Bounce.easeOut, wait: false }, addButtons: { previous: $('prev1'), play: $('play1'), stop: $('stop1'), next: $('next1') } }); //SAMPLE 3 (play, stop, playback) var nS3 = new noobSlide({ box: $('box3'), items: [0,1,2,3,4,5,6,7], interval: 1000, startItem: 4, addButtons: { playback: $('playback3'), stop: $('stop3'), play: $('play3') } }); //SAMPLE 4 (walk to item) var nS4 = new noobSlide({ box: $('box4'), items: $$('#box4 div'), size: 480, handles: $$('#handles4 span'), onWalk: function(currentItem,currentHandle){ $('info4').set('html',currentItem.getFirst().innerHTML); this.handles.removeClass('active'); currentHandle.addClass('active'); } }); //SAMPLE 5 (mode: vertical, using "onWalk" ) var info5 = $('info5').set('opacity',0.5); var sampleObjectItems =[ {title:'Morbi elementum', autor:'Lorem', date:'5 Jun 2007', link:'http://www.link1.com'}, {title:'Mollis leo', autor:'Ipsum', date:'6 Dic 2007', link:'http://www.link2.com'}, {title:'Nunc adipiscing', autor:'Dolor', date:'9 Feb 2007', link:'http://www.link3.com'}, {title:'Phasellus volutpat pharetra', autor:'Sit', date:'22 Jul 2007', link:'http://www.link4.com'}, {title:'Sed sollicitudin diam', autor:'Amet', date:'30 Set 2007', link:'http://www.link5.com'}, {title:'Ut quis magna vel', autor:'Consecteur', date:'5 Nov 2007', link:'http://www.link6.com'}, {title:'Curabitur et ante in', autor:'Adipsim', date:'12 Mar 2007', link:'http://www.link7.com'}, {title:'Aliquam commodo', autor:'Colom', date:'10 Abr 2007', link:'http://www.link8.com'} ]; var nS5 = new noobSlide({ mode: 'vertical', box: $('box5'), size: 180, items: sampleObjectItems, addButtons: { previous: $('prev5'), play: $('play5'), stop: $('stop5'), next: $('next5') }, onWalk: function(currentItem){ info5.empty(); new Element('h4').set('html','<a href="'+currentItem.link+'">link</a>'+currentItem.title).inject(info5); new Element('p').set('html','<b>Autor</b>: '+currentItem.autor+' <b>Date</b>: '+currentItem.date).inject(info5); } }); //SAMPLE 6 (on "mouseenter" walk) var info6 = $('box6').getNext().set('opacity',0.5); var nS6 = new noobSlide({ mode: 'vertical', box: $('box6'), items: sampleObjectItems, size: 180, handles: $$('#handles6_1 div').extend($$('#handles6_2 div')), handle_event: 'mouseenter', addButtons: { previous: $('prev6'), play: $('play6'), stop: $('stop6'), playback: $('playback6'), next: $('next6') }, button_event: 'click', fxOptions: { duration: 1000, transition: Fx.Transitions.Back.easeOut, wait: false }, onWalk: function(currentItem,currentHandle){ info6.empty(); new Element('h4').set('html','<a href="'+currentItem.link+'">link</a>'+currentItem.title).inject(info6); new Element('p').set('html','<b>Autor</b>: '+currentItem.autor+' <b>Date</b>: '+currentItem.date).inject(info6); this.handles.set('opacity',0.3); currentHandle.set('opacity',1); } }); //walk to next item nS6.next(); //SAMPLE 7 var startItem = 3; //or 0 or any var thumbs_mask7 = $('thumbs_mask7').setStyle('left',(startItem*60-568)+'px').set('opacity',0.; var fxOptions7 = {property:'left',duration:1000, transition:Fx.Transitions.Back.easeOut, wait:false} var thumbsFx = new Fx.Tween(thumbs_mask7,fxOptions7); var nS7 = new noobSlide({ box: $('box7'), items: [0,1,2,3,4,5,6,7], handles: $$('#thumbs_handles7 span'), fxOptions: fxOptions7, onWalk: function(currentItem){ thumbsFx.start(currentItem*60-568); }, startItem: startItem }); //walk to first with fx nS7.walk(0); //SAMPLE 8 var handles8_more = $$('#handles8_more span'); var nS8 = new noobSlide({ box: $('box8'), items: $$('#box8 h3'), size: 480, handles: $$('#handles8 span'), addButtons: {previous: $('prev8'), play: $('play8'), stop: $('stop8'), playback: $('playback8'), next: $('next8') }, onWalk: function(currentItem,currentHandle){ //style for handles $$(this.handles,handles8_more).removeClass('active'); $$(currentHandle,handles8_more[this.currentIndex]).addClass('active'); //text for "previous" and "next" default buttons $('prev8').set('html','<< '+this.items[this.previousIndex].innerHTML); $('next8').set('html',this.items[this.nextIndex].innerHTML+' >>'); } }); //more "previous" and "next" buttons nS8.addActionButtons('previous',$$('#box8 .prev')); nS8.addActionButtons('next',$$('#box8 .next')); //more handle buttons nS8.addHandleButtons(handles8_more); //walk to item 3 witouth fx nS8.walk(3,false,true); }); </script> </head> <body> <div id="cont"> <h1>noobSlide - mootools</h1> <div class="description"> <p>noobSlide es una ligera "clase" escrita con la librería <a href="http://mootools.net" title="a super lightweight web2.0 javascript framework">mootools</a> con la que se puede construir "slides" desde simples hasta complejos, claro que para sacarle el máximo provecho necesitas aprender <a href="http://clientside.cnet.com/wiki/mootorial/" title="A Mootools Tutorial">cómo trabajar con mootools</a>.</p> <h4>Descargar:</h4> <p> - <a href="class.noobSlide.js_[mootools_1.2].zip">noobSlide (rev.19-06-08) para mootools 1.2</a> <br /> - <a href="class.noobSlide.js.zip">noobSlide (rev.17-04-08) para mootools 1.11</a> <br /> - <a href="CHANGELOG">changelog</a> </p> </div> <!-- SAMPLE 1 --> <h2>Sample 1</h2> <div class="sample"> <div class="mask1"> <div id="box1"> <span><img src="img1.jpg" alt="Photo" /></span> <span><img src="img2.jpg" alt="Photo" /></span> <span><img src="img3.jpg" alt="Photo" /></span> <span><img src="img4.jpg" alt="Photo" /></span> <span><img src="img5.jpg" alt="Photo" /></span> <span><img src="img6.jpg" alt="Photo" /></span> <span><img src="img7.jpg" alt="Photo" /></span> <span><img src="img8.jpg" alt="Photo" /></span> </div> </div> </div> <!-- SAMPLE 2 --> <h2>Sample 2</h2> <div class="sample"> <div class="mask2"> <div id="box2"> <span><img src="img1.jpg" alt="Photo" /></span> <span><img src="img2.jpg" alt="Photo" /></span> <span><img src="img3.jpg" alt="Photo" /></span> <span><img src="img4.jpg" alt="Photo" /></span> <span><img src="img5.jpg" alt="Photo" /></span> <span><img src="img6.jpg" alt="Photo" /></span> <span><img src="img7.jpg" alt="Photo" /></span> <span><img src="img8.jpg" alt="Photo" /></span> </div> </div> <p class="buttons"> <span id="prev1"><< Previous</span> <span id="play1">Play ></span> <span id="stop1">Stop</span> <span id="next1">Next >></span> </p> </div> <!-- SAMPLE 3 --> <h2>Sample 3</h2> <div class="sample"> <div class="mask2"> <div id="box3"> <span><img src="img1.jpg" alt="Photo" /></span> <span><img src="img2.jpg" alt="Photo" /></span> <span><img src="img3.jpg" alt="Photo" /></span> <span><img src="img4.jpg" alt="Photo" /></span> <span><img src="img5.jpg" alt="Photo" /></span> <span><img src="img6.jpg" alt="Photo" /></span> <span><img src="img7.jpg" alt="Photo" /></span> <span><img src="img8.jpg" alt="Photo" /></span> </div> </div> <p class="buttons"> <span id="playback3">< Playback</span> <span id="stop3">Stop</span> <span id="play3">Play ></span> </p> </div> <!-- SAMPLE 4 --> <h2>Sample 4</h2> <div class="sample"> <div class="mask3"> <div id="box4"> <div> <h3>1. Lorem ipsum dolor sit amet</h3> <img src="img1.jpg" alt="Photo" /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p> <p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem. Nulla lobortis, leo elementum fringilla mollis, magna neque rhoncus lorem, vitae venenatis tellus felis vitae lacus. Nunc ante. Cras sodales. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi. Praesent at lacus. Aenean tincidunt. In hac habitasse platea dictumst.</p> </div> <div> <h3>2. Nullam porttitor tortor et sem</h3> <img src="img2.jpg" alt="Photo" /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p> <p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem. Nulla lobortis, leo elementum fringilla mollis, magna neque rhoncus lorem, vitae venenatis tellus felis vitae lacus.</p> <p>Nunc ante. Cras sodales. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi. Praesent at lacus. Aenean tincidunt. In hac habitasse platea dictumst.</p> </div> <div> <h3>3. Aenean consectetuer nibh sedt</h3> <img src="img3.jpg" alt="Photo" /> <ul> <li>Duis consequat laoreet libero.</li> <li>Nullam scelerisque porta arcu.</li> <li>Praesent ut tortor quis nunc vehicula interdum.</li> <li>Cras ultrices venenatis justo.</li> <li>Duis eu ligula at justo tempus varius.</li> <li>Vivamus mattis ante et arcu.</li> <li>Nulla eleifend dignissim neque.</li> <li>Donec ut elit vel nisi mollis volutpat.</li> </ul> </div> <div> <h3>4. Pellentesque ac dolor</h3> <img src="img4.jpg" alt="Photo" /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p> <p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem. Nulla lobortis, leo elementum fringilla mollis, magna neque rhoncus lorem, vitae venenatis tellus felis vitae lacus. Nunc ante. Cras sodales. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi. Praesent at lacus. Aenean tincidunt. In hac habitasse platea dictumst.</p> </div> <div> <h3>5. Pellentesque ac dolor</h3> <img src="img5.jpg" alt="Photo" /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p> <p>Cras sodales. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi. Praesent at lacus. Aenean tincidunt. In hac habitasse platea dictumst.</p> </div> <div> <h3>6. Lorem ipsum dolor sit amet</h3> <img src="img6.jpg" alt="Photo" /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p> <p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem. Nulla lobortis, leo elementum fringilla mollis, magna neque rhoncus lorem, vitae venenatis tellus felis vitae lacus. Nunc ante. Cras sodales. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi. Praesent at lacus. Aenean tincidunt. In hac habitasse platea dictumst.</p> </div> <div> <h3>7. Nullam porttitor tortor et sem</h3> <img src="img7.jpg" alt="Photo" /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p> <p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem. Nulla lobortis, leo elementum fringilla mollis, magna neque rhoncus lorem, vitae venenatis tellus felis vitae lacus.</p> <p>Nunc ante. Cras sodales. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi. Praesent at lacus. Aenean tincidunt. In hac habitasse platea dictumst.</p> </div> <div> <h3>8. Aenean consectetuer nibh sedt</h3> <img src="img8.jpg" alt="Photo" /> <ul> <li>Duis consequat laoreet libero.</li> <li>Nullam scelerisque porta arcu.</li> <li>Praesent ut tortor quis nunc vehicula interdum.</li> <li>Cras ultrices venenatis justo.</li> <li>Duis eu ligula at justo tempus varius.</li> <li>Vivamus mattis ante et arcu.</li> <li>Nulla eleifend dignissim neque.</li> <li>Donec ut elit vel nisi mollis volutpat.</li> </ul> </div> </div> </div> <h4>Show: <span id="info4"></span></h4> <p class="buttons" id="handles4"> <span>1. Uno</span> <span>2. Dos</span> <span>3. Tres</span> <span>4. Cuatro</span> <span>5. Cinco</span> <span>6. Seis</span> <span>7. Siete</span> <span>8. Ocho</span> </p> </div> <!-- SAMPLE 5 --> <h2>Sample 5</h2> <div class="sample"> <div class="mask2"> <div id="box5"> <span><img src="img1.jpg" alt="Photo" /></span> <span><img src="img2.jpg" alt="Photo" /></span> <span><img src="img3.jpg" alt="Photo" /></span> <span><img src="img4.jpg" alt="Photo" /></span> <span><img src="img5.jpg" alt="Photo" /></span> <span><img src="img6.jpg" alt="Photo" /></span> <span><img src="img7.jpg" alt="Photo" /></span> <span><img src="img8.jpg" alt="Photo" /></span> </div> <div id="info5" class="info"></div> </div> <p class="buttons"> <span id="prev5"><< Previous</span> <span id="play5">Play ></span> <span id="stop5">Stop</span> <span id="next5">Next >></span> </p> </div> <!-- SAMPLE 6 --> <h2>Sample 6</h2> <div class="sample sample6"> <div class="thumbs" id="handles6_1"> <div><img src="img1.jpg" alt="Photo Thumb" /></div> <div><img src="img2.jpg" alt="Photo Thumb" /></div> <div><img src="img3.jpg" alt="Photo Thumb" /></div> <div><img src="img4.jpg" alt="Photo Thumb" /></div> </div> <div class="mask6"> <div id="box6"> <span><img src="img1.jpg" alt="Photo" /></span> <span><img src="img2.jpg" alt="Photo" /></span> <span><img src="img3.jpg" alt="Photo" /></span> <span><img src="img4.jpg" alt="Photo" /></span> <span><img src="img5.jpg" alt="Photo" /></span> <span><img src="img6.jpg" alt="Photo" /></span> <span><img src="img7.jpg" alt="Photo" /></span> <span><img src="img8.jpg" alt="Photo" /></span> </div> <div class="info"></div> </div> <div class="thumbs" id="handles6_2"> <div><img src="img5.jpg" alt="Photo Thumb" /></div> <div><img src="img6.jpg" alt="Photo Thumb" /></div> <div><img src="img7.jpg" alt="Photo Thumb" /></div> <div><img src="img8.jpg" alt="Photo Thumb" /></div> </div> <p class="buttons"> <span id="prev6"><< Previous</span> <span id="playback6"><Playback</span> <span id="stop6">Stop</span> <span id="play6">Play ></span> <span id="next6">Next >></span> </p> </div> <!-- SAMPLE 7 --> <h2>Sample 7</h2> <div class="sample"> <div class="mask6"> <div id="box7"> <span><img src="img1.jpg" alt="Photo" /></span> <span><img src="img2.jpg" alt="Photo" /></span> <span><img src="img3.jpg" alt="Photo" /></span> <span><img src="img4.jpg" alt="Photo" /></span> <span><img src="img5.jpg" alt="Photo" /></span> <span><img src="img6.jpg" alt="Photo" /></span> <span><img src="img7.jpg" alt="Photo" /></span> <span><img src="img8.jpg" alt="Photo" /></span> </div> </div> <div id="thumbs7"> <div class="thumbs"> <div><img src="img1.jpg" alt="Photo Thumb" /></div> <div><img src="img2.jpg" alt="Photo Thumb" /></div> <div><img src="img3.jpg" alt="Photo Thumb" /></div> <div><img src="img4.jpg" alt="Photo Thumb" /></div> <div><img src="img5.jpg" alt="Photo Thumb" /></div> <div><img src="img6.jpg" alt="Photo Thumb" /></div> <div><img src="img7.jpg" alt="Photo Thumb" /></div> <div><img src="img8.jpg" alt="Photo Thumb" /></div> </div> <div id="thumbs_mask7"></div> <p id="thumbs_handles7"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </p> </div> </div> <!-- SAMPLE 8 --> <h2>Sample 8</h2> <div class="sample sample8"> <p class="buttons" id="handles8"> <span>Pane 1</span> <span>Pane 2</span> <span>Pane 3</span> <span>Pane 4</span> </p> <div class="mask1"> <div id="box8"> <div> <p class="buttons"><span class="prev"><< Previous</span> <span class="next">Next >></span></p> <h3>1. Lorem ipsum dolor sit amet</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p> <p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem.</p> </div> <div> <p class="buttons"><span class="prev"><< Previous</span> <span class="next">Next >></span></p> <h3>2. Quisque aliquet accumsan</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p> <p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi.</p> </div> <div> <p class="buttons"><span class="prev"><< Previous</span> <span class="next">Next >></span></p> <h3>3. Duis consequat laoreet</h3> <ul> <li>Duis consequat laoreet libero.</li> <li>Nullam scelerisque porta arcu.</li> <li>Praesent ut tortor quis nunc vehicula interdum.</li> <li>Cras ultrices venenatis justo.</li> </ul> </div> <div> <p class="buttons"><span class="prev"><< Previous</span> <span class="next">Next >></span></p> <h3>4. Aenean consectetuer</h3> <p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p> </div> </div> </div> <p class="buttons"> <span id="prev8"><< Previous</span> | <span id="next8">Next >></span> </p> <p class="buttons"> <span id="playback8"><Playback</span> <span id="stop8">Stop</span> <span id="play8">Play ></span> </p> <p class="buttons" id="handles8_more"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> </p> </div> <div class="links"> <a href="class.noobSlide.js_[mootools_1.2].zip">download noobSlide (rev.19-06-08) for mootools 1.2</a> <br /> <a href="class.noobSlide.js.zip">download noobSlide (rev.17-04-08) for mootools 1.11</a> </div> </div> </body> </html> now i am not understanding where i put the codes that provided by you or ihave to make a fresh .html file and the code will be <!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=iso-8859-1" /> <title>Untitled Document</title> </head> <body> </body> </html> and where should i put the codes provided by you, advance thank for you...p lease help me .. abeer
March 4, 200917 yr Author now i write this code and two image with a box appear but no slide show.... <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"> <head> <title>noobSlide - mootools</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="_web.css" type="text/css" media="screen" /> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> <script type="text/javascript" src="mootools-1.2-core.js"></script> <script type="text/javascript" src="_class.noobSlide.packed.js"></script> <script type="text/javascript"> window.addEvent('domready',function(){ //SAMPLE 1 (auto, every 5 sec) var nS1 = new noobSlide({ box: $('box1'), items: [0,1,2,3], size: 480, autoPlay: true }); </script> </head> <body> <div id="cont"> <!-- SAMPLE 1 --> <h2>Sample 1</h2> <div class="sample"> <div class="mask1"> <div id="box1"> <span><img src="img1.jpg" alt="Photo" /></span> <span><img src="img2.jpg" alt="Photo" /></span> <span><img src="img3.jpg" alt="Photo" /></span> <span><img src="img4.jpg" alt="Photo" /></span> <span><img src="img5.jpg" alt="Photo" /></span> <span><img src="img6.jpg" alt="Photo" /></span> <span><img src="img7.jpg" alt="Photo" /></span> <span><img src="img8.jpg" alt="Photo" /></span> </div> </div> </div> </body> </html>
March 4, 200917 yr items: [0,1,2,3] Needs to list the amount of slides, so if you've got 8 slides, then you need to go up to 7 (because it starts with 0 not 1) items: [0,1,2,3,4,5,6,7], Have you got a live link to what you've created? it's hard to work out just looking at code.
March 4, 200917 yr Author i just followed this link http://www.efectorelativo.net/laboratory/noobSlide/ then i tried to follow mr Pedros code, but its not working may be its my fault... but i am not finding the problem, i tried to several hours to fix it but i failed, can you please help me??? by downloading all the files that mr pedro give us
March 4, 200917 yr mootools and the noobslide js files are linked correctly right? (they are in the location stated?). Same as above for the css files, make sure they're all in the correct place. By the sounds of it, i think it's just a problem with the js, and you are using actual image files (that are different)? (i've used placeholder images before, and sometimes it's working, but you just can't see, so i've learnt to use atleast 4 differing image files for stuff like this).
March 4, 200917 yr Author http://www.lyricsfort.com/tetx.html please check this link,here is my work all are in actual plaece and css is ok and images are ok
March 4, 200917 yr Everthings linked ok, change this window.addEvent('domready',function(){ //SAMPLE 1 (auto, every 5 sec) var nS1 = new noobSlide({ box: $('box1'), items: [0,1,2,3], size: 480, autoPlay: true });//SAMPLE 2 (transition: Bounce.easeOut) var nS2 = new noobSlide({ box: $('box2'), items: [0,1,2,3,4,5,6,7], interval: 3000, fxOptions: { duration: 1000, transition: Fx.Transitions.Bounce.easeOut, wait: false }, addButtons: { previous: $('prev1'), play: $('play1'), stop: $('stop1'), next: $('next1') } }); to this window.addEvent('domready',function(){ //SAMPLE 1 (auto, every 5 sec) var nS1 = new noobSlide({ box: $('box1'), items: [0,1,2,3,4,5,6,7], size: 480, autoPlay: true }); }); I don't think that'll fix it, but it's worth a shot I'll have a look at it, it's always something obvious that i can never ever see. EDIT: you've also got an unclosed div, so add </div> before you </body> tag to fix that (it causes 4 errors in the validator, best to fix that so it can be ruled out).
March 4, 200917 yr verry easy to built a slide like this in flash with a xml document! dont know if you master flash?
March 4, 200917 yr Author wowwwwwwwwwwwwwwwwwwwwwwwwwwww thats great ,its working nowwwwwwwwww is the same process for sample 4 and 6???? thank you very much thanku angain
March 4, 200917 yr Similar, the content is marked up a little different (have a look in the html). With the js in the header bit there, you've got a few variables to play with, but it's mostly the same. You can apply the principles, any problems just post. I'm glad you fixed it, back in the day when i used mootools (i'd just started with js libraries) i remember using this script, i couldn't get it to work Then i converted to jquery and i've been mostly ok.
March 4, 200917 yr Author here is the code for sample 4 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"> <head> <title>noobSlide - mootools</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="_web.css" type="text/css" media="screen" /> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> <script type="text/javascript" src="mootools-1.2-core.js"></script> <script type="text/javascript" src="_class.noobSlide.packed.js"></script> <script type="text/javascript"> window.addEvent('domready',function(){ //SAMPLE 4 (walk to item) var nS4 = new noobSlide({ box: $('box4'), items: $$('#box4 div'), size: 480, handles: $$('#handles4 span'), onWalk: function(currentItem,currentHandle){ $('info4').set('html',currentItem.getFirst().innerHTML); this.handles.removeClass('active'); currentHandle.addClass('active'); } }); </script> </head> <body> <div id="cont"> <!-- SAMPLE 4 --> <h2>Sample 4</h2> <div class="sample"> <div class="mask3"> <div id="box4"> <div> <h3>1. Lorem ipsum dolor sit amet</h3> <img src="img1.jpg" alt="Photo" /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p> <p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem. Nulla lobortis, leo elementum fringilla mollis, magna neque rhoncus lorem, vitae venenatis tellus felis vitae lacus. Nunc ante. Cras sodales. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi. Praesent at lacus. Aenean tincidunt. In hac habitasse platea dictumst.</p> </div> <div> <h3>2. Nullam porttitor tortor et sem</h3> <img src="img2.jpg" alt="Photo" /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p> <p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem. Nulla lobortis, leo elementum fringilla mollis, magna neque rhoncus lorem, vitae venenatis tellus felis vitae lacus.</p> <p>Nunc ante. Cras sodales. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi. Praesent at lacus. Aenean tincidunt. In hac habitasse platea dictumst.</p> </div> <div> <h3>3. Aenean consectetuer nibh sedt</h3> <img src="img3.jpg" alt="Photo" /> <ul> <li>Duis consequat laoreet libero.</li> <li>Nullam scelerisque porta arcu.</li> <li>Praesent ut tortor quis nunc vehicula interdum.</li> <li>Cras ultrices venenatis justo.</li> <li>Duis eu ligula at justo tempus varius.</li> <li>Vivamus mattis ante et arcu.</li> <li>Nulla eleifend dignissim neque.</li> <li>Donec ut elit vel nisi mollis volutpat.</li> </ul> </div> <div> <h3>4. Pellentesque ac dolor</h3> <img src="img4.jpg" alt="Photo" /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p> <p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem. Nulla lobortis, leo elementum fringilla mollis, magna neque rhoncus lorem, vitae venenatis tellus felis vitae lacus. Nunc ante. Cras sodales. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi. Praesent at lacus. Aenean tincidunt. In hac habitasse platea dictumst.</p> </div> <div> <h3>5. Pellentesque ac dolor</h3> <img src="img5.jpg" alt="Photo" /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p> <p>Cras sodales. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi. Praesent at lacus. Aenean tincidunt. In hac habitasse platea dictumst.</p> </div> <div> <h3>6. Lorem ipsum dolor sit amet</h3> <img src="img6.jpg" alt="Photo" /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p> <p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem. Nulla lobortis, leo elementum fringilla mollis, magna neque rhoncus lorem, vitae venenatis tellus felis vitae lacus. Nunc ante. Cras sodales. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi. Praesent at lacus. Aenean tincidunt. In hac habitasse platea dictumst.</p> </div> <div> <h3>7. Nullam porttitor tortor et sem</h3> <img src="img7.jpg" alt="Photo" /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p> <p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem. Nulla lobortis, leo elementum fringilla mollis, magna neque rhoncus lorem, vitae venenatis tellus felis vitae lacus.</p> <p>Nunc ante. Cras sodales. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi. Praesent at lacus. Aenean tincidunt. In hac habitasse platea dictumst.</p> </div> <div> <h3>8. Aenean consectetuer nibh sedt</h3> <img src="img8.jpg" alt="Photo" /> <ul> <li>Duis consequat laoreet libero.</li> <li>Nullam scelerisque porta arcu.</li> <li>Praesent ut tortor quis nunc vehicula interdum.</li> <li>Cras ultrices venenatis justo.</li> <li>Duis eu ligula at justo tempus varius.</li> <li>Vivamus mattis ante et arcu.</li> <li>Nulla eleifend dignissim neque.</li> <li>Donec ut elit vel nisi mollis volutpat.</li> </ul> </div> </div> </div> <h4>Show: <span id="info4"></span></h4> <p class="buttons" id="handles4"> <span>1. Uno</span> <span>2. Dos</span> <span>3. Tres</span> <span>4. Cuatro</span> <span>5. Cinco</span> <span>6. Seis</span> <span>7. Siete</span> <span>8. Ocho</span> </p> </div> </body> </html> but its not working.... can you please help me again???? i am sorry that i am knocking you again and again
March 4, 200917 yr Try this //SAMPLE 4 (walk to item) var nS4 = new noobSlide({ box: $('box4'), items: $$('#box4 div'), size: 480, handles: $$('#handles4 span'), onWalk: function(currentItem,currentHandle){ $('info4').set('html',currentItem.getFirst().innerHTML); this.handles.removeClass('active'); currentHandle.addClass('active'); }); }); Pat
March 4, 200917 yr You need to add a closing </div> at the end before the </body> tag (to close your #cont div). Have you got a linky?
March 4, 200917 yr Author <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"><head> <title>noobSlide - mootools</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="_web.css" type="text/css" media="screen" /> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> <script type="text/javascript" src="mootools-1.2-core.js"></script> <script type="text/javascript" src="_class.noobSlide.packed.js"></script> <script type="text/javascript"> window.addEvent('domready',function(){ //SAMPLE 4 (walk to item) var nS4 = new noobSlide({ box: $('box4'), items: $$('#box4 div'), size: 480, handles: $$('#handles4 span'), onWalk: function(currentItem,currentHandle){ $('info4').set('html',currentItem.getFirst().innerHTML); this.handles.removeClass('active'); currentHandle.addClass('active'); } }); </script></head><body><div id="cont"><!-- SAMPLE 4 --><h2>Sample 4</h2><div class="sample"> <div class="mask3"> <div id="box4"> <div> <h3>1. Lorem ipsum dolor sit amet</h3> <img src="img1.jpg" alt="Photo" /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p> <p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem. Nulla lobortis, leo elementum fringilla mollis, magna neque rhoncus lorem, vitae venenatis tellus felis vitae lacus. Nunc ante. Cras sodales. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi. Praesent at lacus. Aenean tincidunt. In hac habitasse platea dictumst.</p> </div> <div> <h3>2. Nullam porttitor tortor et sem</h3> <img src="img2.jpg" alt="Photo" /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p> <p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem. Nulla lobortis, leo elementum fringilla mollis, magna neque rhoncus lorem, vitae venenatis tellus felis vitae lacus.</p> <p>Nunc ante. Cras sodales. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi. Praesent at lacus. Aenean tincidunt. In hac habitasse platea dictumst.</p> </div> <div> <h3>3. Aenean consectetuer nibh sedt</h3> <img src="img3.jpg" alt="Photo" /> <ul> <li>Duis consequat laoreet libero.</li> <li>Nullam scelerisque porta arcu.</li> <li>Praesent ut tortor quis nunc vehicula interdum.</li> <li>Cras ultrices venenatis justo.</li> <li>Duis eu ligula at justo tempus varius.</li> <li>Vivamus mattis ante et arcu.</li> <li>Nulla eleifend dignissim neque.</li> <li>Donec ut elit vel nisi mollis volutpat.</li> </ul> </div> <div> <h3>4. Pellentesque ac dolor</h3> <img src="img4.jpg" alt="Photo" /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p> <p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem. Nulla lobortis, leo elementum fringilla mollis, magna neque rhoncus lorem, vitae venenatis tellus felis vitae lacus. Nunc ante. Cras sodales. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi. Praesent at lacus. Aenean tincidunt. In hac habitasse platea dictumst.</p> </div> <div> <h3>5. Pellentesque ac dolor</h3> <img src="img5.jpg" alt="Photo" /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p> <p>Cras sodales. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi. Praesent at lacus. Aenean tincidunt. In hac habitasse platea dictumst.</p> </div> <div> <h3>6. Lorem ipsum dolor sit amet</h3> <img src="img6.jpg" alt="Photo" /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p> <p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem. Nulla lobortis, leo elementum fringilla mollis, magna neque rhoncus lorem, vitae venenatis tellus felis vitae lacus. Nunc ante. Cras sodales. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi. Praesent at lacus. Aenean tincidunt. In hac habitasse platea dictumst.</p> </div> <div> <h3>7. Nullam porttitor tortor et sem</h3> <img src="img7.jpg" alt="Photo" /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p> <p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem. Nulla lobortis, leo elementum fringilla mollis, magna neque rhoncus lorem, vitae venenatis tellus felis vitae lacus.</p> <p>Nunc ante. Cras sodales. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi. Praesent at lacus. Aenean tincidunt. In hac habitasse platea dictumst.</p> </div> <div> <h3>8. Aenean consectetuer nibh sedt</h3> <img src="img8.jpg" alt="Photo" /> <ul> <li>Duis consequat laoreet libero.</li> <li>Nullam scelerisque porta arcu.</li> <li>Praesent ut tortor quis nunc vehicula interdum.</li> <li>Cras ultrices venenatis justo.</li> <li>Duis eu ligula at justo tempus varius.</li> <li>Vivamus mattis ante et arcu.</li> <li>Nulla eleifend dignissim neque.</li> <li>Donec ut elit vel nisi mollis volutpat.</li> </ul> </div> </div> </div> <h4>Show: <span id="info4"></span></h4> <p class="buttons" id="handles4"> <span>1. Uno</span> <span>2. Dos</span> <span>3. Tres</span> <span>4. Cuatro</span> <span>5. Cinco</span> <span>6. Seis</span> <span>7. Siete</span> <span>8. Ocho</span> </p></div></div></body></html> i closed the tag but its not workinggg
March 4, 200917 yr Author <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"> <head> <title>noobSlide - mootools</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="_web.css" type="text/css" media="screen" /> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> <script type="text/javascript" src="mootools-1.2-core.js"></script> <script type="text/javascript" src="_class.noobSlide.packed.js"></script> <script type="text/javascript"> window.addEvent('domready',function(){ //SAMPLE 4 (walk to item) var nS4 = new noobSlide({ box: $('box4'), items: $$('#box4 div'), size: 480, handles: $$('#handles4 span'), onWalk: function(currentItem,currentHandle){ $('info4').set('html',currentItem.getFirst().innerHTML); this.handles.removeClass('active'); currentHandle.addClass('active'); } }); </script> </head> <body> <div id="cont"> <!-- SAMPLE 4 --> <h2>Sample 4</h2> <div class="sample"> <div class="mask3"> <div id="box4"> <div> <h3>1. Lorem ipsum dolor sit amet</h3> <img src="img1.jpg" alt="Photo" /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p> <p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem. Nulla lobortis, leo elementum fringilla mollis, magna neque rhoncus lorem, vitae venenatis tellus felis vitae lacus. Nunc ante. Cras sodales. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi. Praesent at lacus. Aenean tincidunt. In hac habitasse platea dictumst.</p> </div> <div> <h3>2. Nullam porttitor tortor et sem</h3> <img src="img2.jpg" alt="Photo" /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p> <p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem. Nulla lobortis, leo elementum fringilla mollis, magna neque rhoncus lorem, vitae venenatis tellus felis vitae lacus.</p> <p>Nunc ante. Cras sodales. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi. Praesent at lacus. Aenean tincidunt. In hac habitasse platea dictumst.</p> </div> <div> <h3>3. Aenean consectetuer nibh sedt</h3> <img src="img3.jpg" alt="Photo" /> <ul> <li>Duis consequat laoreet libero.</li> <li>Nullam scelerisque porta arcu.</li> <li>Praesent ut tortor quis nunc vehicula interdum.</li> <li>Cras ultrices venenatis justo.</li> <li>Duis eu ligula at justo tempus varius.</li> <li>Vivamus mattis ante et arcu.</li> <li>Nulla eleifend dignissim neque.</li> <li>Donec ut elit vel nisi mollis volutpat.</li> </ul> </div> <div> <h3>4. Pellentesque ac dolor</h3> <img src="img4.jpg" alt="Photo" /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p> <p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem. Nulla lobortis, leo elementum fringilla mollis, magna neque rhoncus lorem, vitae venenatis tellus felis vitae lacus. Nunc ante. Cras sodales. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi. Praesent at lacus. Aenean tincidunt. In hac habitasse platea dictumst.</p> </div> <div> <h3>5. Pellentesque ac dolor</h3> <img src="img5.jpg" alt="Photo" /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p> <p>Cras sodales. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi. Praesent at lacus. Aenean tincidunt. In hac habitasse platea dictumst.</p> </div> <div> <h3>6. Lorem ipsum dolor sit amet</h3> <img src="img6.jpg" alt="Photo" /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p> <p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem. Nulla lobortis, leo elementum fringilla mollis, magna neque rhoncus lorem, vitae venenatis tellus felis vitae lacus. Nunc ante. Cras sodales. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi. Praesent at lacus. Aenean tincidunt. In hac habitasse platea dictumst.</p> </div> <div> <h3>7. Nullam porttitor tortor et sem</h3> <img src="img7.jpg" alt="Photo" /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p> <p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem. Nulla lobortis, leo elementum fringilla mollis, magna neque rhoncus lorem, vitae venenatis tellus felis vitae lacus.</p> <p>Nunc ante. Cras sodales. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi. Praesent at lacus. Aenean tincidunt. In hac habitasse platea dictumst.</p> </div> <div> <h3>8. Aenean consectetuer nibh sedt</h3> <img src="img8.jpg" alt="Photo" /> <ul> <li>Duis consequat laoreet libero.</li> <li>Nullam scelerisque porta arcu.</li> <li>Praesent ut tortor quis nunc vehicula interdum.</li> <li>Cras ultrices venenatis justo.</li> <li>Duis eu ligula at justo tempus varius.</li> <li>Vivamus mattis ante et arcu.</li> <li>Nulla eleifend dignissim neque.</li> <li>Donec ut elit vel nisi mollis volutpat.</li> </ul> </div> </div> </div> <h4>Show: <span id="info4"></span></h4> <p class="buttons" id="handles4"> <span>1. Uno</span> <span>2. Dos</span> <span>3. Tres</span> <span>4. Cuatro</span> <span>5. Cinco</span> <span>6. Seis</span> <span>7. Siete</span> <span>8. Ocho</span> </p> </div> </div> </body> </html> the code again, its not working, any help for me???
March 4, 200917 yr try changing this at the end of your js } }); to this } }); }); P.S i edited that code because i got it wrong, make sure you are trying the new copy
Create an account or sign in to comment