Jump to content

Problems with Gallery Slider


Nightray
 Share

Recommended Posts

Hi there, I'm new here and I'm bilingual (Spanish as a main language, English as my secondary), so if you notice some errors on my grammar or sintaxis, excuse me. I'm a student and right now I'm making my practice class (that class where you need to find a job for a semestrer / trimester / depends on your University). I'm in charge of design the webpage of a handbag's shop. But I'm having some situations in here. I finded out that two Galleries of the webpage were made in JavaScript. I didn't take JavaScript on the University (just a course in webpage design and another one of webpage development on Dreamweaver). I understand the code a little because I took two courses of C++ and I remember how to read some things of the code (note: Read, not write it from my mind). I looked for reference on how to make a Gallery Slider and I finded out that JavaScript was allways there, so I'm reading the JavaScript's tutorials of this page to learn more about it... BUT... ...I'm having problems with my Gallery Slider. -I did the Gallery following this Tutorial:http://www.youtube.com/watch?v=2d4LxfU3fQQ -I re-made the Webpage in AP Div's.-I want a Gallery like the original webpage (The Home Gallery and the Collection's Gallery) but right now I'm concentrating in the Home Gallery. This is the webpage I need to fix (check it out to see what Gallery I'm trying to do).http://canelacollection.com/PD: I didn't make the design nor the page. What type of Problems I'm having?? FotoError1.jpg?t=1335546941FotoError2.jpg?t=1335546944 The first two or three loops, the Gallery runs just fine. But in the fourth, five, etc... loop, the pictures of the Gallery start to move up and move down revealing part of the picture that is behind. -The pictures are all of the same size and I already change the code (saving the original code first, or course) to see what it happens but I'm still having that errors and I don't know why. I will be very gratefull if you guys can help me to solve the situation. I will be trying to solve it by myself while I'm waiting for your answer (but honestly, I don't know what to do anymore). Thaaaaanks !!! PD: Here's the code of the Index Page. PD Edit: Sorry ... The Spoiler Tags wasn't opening. <!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>index</title><style type="text/css">#mainContainer { position:absolute; left:620px; width:1262px; height:680px; z-index:1; margin-left: -631px; top: 0px; background-color: #000000;}#apDiv1 { position:absolute; width:200px; height:71px; z-index:4; left: 169px; top: 22px;}#rolloversbtns { position:absolute; width:346px; height:65px; z-index:4; left: 407px; top: 5px;}#CanelaLogo { position:absolute; width:134px; height:104px; z-index:4; left: 394px; top: 7px;}#divGallerySlider { position:absolute; width:781px; height:464px; z-index:5; left: 180px; top: 113px;}.bggris { background-color: #FFF; background-repeat: repeat-y;}.bgafuera { background-color: #000; background-repeat: repeat-y; background-image: url(images/templatecanelasite/images/bg1-tail.jpg);}#gris { position:absolute; width:955px; height:346px; z-index:2; left: 169px; top: 71px;}#bggris { position:absolute; width:949px; height:680px; z-index:1; left: 1px; top: -73px;}#footer { position:absolute; width:946px; height:66px; z-index:1; left: -1px; top: 615px;}#secondGallery { position:absolute; width:729px; height:485px; z-index:6; left: 191px; top: 109px;}#SliderGallery { position:absolute; width:707px; height:471px; z-index:2; left: 130px; top: 126px;}</style><script type="text/javascript">function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;}function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}} function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document); if(!x && d.getElementById) x=d.getElementById(n); return x;} function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}}</script> <!-- Usually in the <head> section --><link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" /><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script><script src="jquery.nivo.slider.pack.js" type="text/javascript"></script> <!-- End of Code --> <!--Script del Slider--> <script type="text/javascript">$(window).load(function() { $('#slider').nivoSlider();});</script> <!--Fin del Script del Slider--> <!--Posiciones y Atributos del Slider (para cambiar).--> <script type="text/javascript">$(window).load(function() { $('#slider').nivoSlider({ effect: 'random', // Specify sets like: 'fold,fade,sliceDown' slices: 15, // For slice animations boxCols: 8, // For box animations boxRows: 4, // For box animations animSpeed: 500, // Slide transition speed pauseTime: 3000, // How long each slide will show startSlide: 0, // Set starting Slide (0 index) directionNav: true, // Next & Prev navigation directionNavHide: true, // Only show on hover controlNav: true, // 1,2,3... navigation <-------------- Esta cosa originalmente estaba en "true". controlNavThumbs: false, // Use thumbnails for Control Nav controlNavThumbsFromRel: false, // Use image rel for thumbs controlNavThumbsSearch: '.jpg', // Replace this with... controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src keyboardNav: true, // Use left & right arrows pauseOnHover: true, // Stop animation while hovering manualAdvance: false, // Force manual transitions captionOpacity: 0.8, // Universal caption opacity prevText: 'Prev', // Prev directionNav text nextText: 'Next', // Next directionNav text randomStart: true, // Start on a random slide beforeChange: function(){}, // Triggers before a slide transition afterChange: function(){}, // Triggers after a slide transition slideshowEnd: function(){}, // Triggers after all slides have been shown lastSlide: function(){}, // Triggers when last slide is shown afterLoad: function(){} // Triggers when slider has loaded });});</script> <!--Fin de las Posiciones y Atributos del Slider--> <style type="text/css">#apDiv2 { position:absolute; width:200px; height:115px; z-index:3; left: 23px; top: 152px;}</style></head> <body onload="MM_preloadImages('images/home_on.jpg','images/about_on.jpg','images/collections_on.jpg','images/contactus_on.jpg')"><div id="mainContainer"> <div id="apDiv1"><img src="images/barraheader.jpg" width="950" height="70" alt="barraheader" /> <div id="rolloversbtns"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Homebtn','','images/home_on.jpg',1)"><img src="images/home_of.jpg" name="Homebtn" width="64" height="65" border="0" id="Homebtn" /></a><a href="about.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('aboutbtn','','images/about_on.jpg',1)"><img src="images/about_off.jpg" name="aboutbtn" width="80" height="65" border="0" id="aboutbtn" /></a><a href="collections.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Collectionsbtn','','images/collections_on.jpg',1)"><img src="images/collections_of.jpg" name="Collectionsbtn" width="99" height="65" border="0" id="Collectionsbtn" /></a><a href="contactus.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contactbtn','','images/contactus_on.jpg',1)"><img src="images/contactus_off.jpg" name="Contactbtn" width="102" height="65" border="0" id="Contactbtn" /></a></div> </div> <div id="CanelaLogo"><img src="images/CanelaCollectionWhite.png" width="132" height="109" alt="CanelaLogo" /></div> <div id="gris"> <div class="bgafuera" id="bggris"> <div id="footer"><img src="images/barrafooter.jpg" width="950" height="65" alt="footer" /></div> <div id="SliderGallery"> <!-- Then somewhere in the <body> section --><div id="slider" class="nivoSlider"> <img src="images/nivosliderimages/canelacollection7.jpg" alt="" border="0" width="706" height="470" /><a href="http://dev7studios.com"> <img src="images/nivosliderimages/canelacollection6.jpg" alt="" border="0" width="706" height="470" title="" /></a> <img src="images/nivosliderimages/canelacollection5.jpg" alt="" border="0" width="706" height="470" title="" /> <img src="images/nivosliderimages/canelacollection8.jpg" alt="" name="indexgallery" width="706" height="470" border="0" /></div><div id="htmlcaption" class="nivo-html-caption"> <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. </div> <!--End of Code--> </div> </div> </div></div></body></html>

Edited by Nightray
Link to comment
Share on other sites

Hello! What country are you from? I was in a bilingual school as well! Well know getting to the topic at hand, first of all dreamweaver per se is not a compiler to program, its just a good program with some pros and cons to build entire websites.. So let's start getting firefox where you will test all your work and then a proper compiler that works wonderfully with firefox which you can download from here. Also, did they teach you how to export stylesheets to a different document? a .css document and how to link it to your html page? That way your html page will only contain html code and make it less messy. In your code you are using jquery (represented by the '$' symbol) so you need to also load the jquery library from here. jquery is a framework from javascript, it's per se javascript but you need the library to make it work! Just like using cout<< and cin>> on c++ requires the iostream library same happens with jquery. Try getting that nivo slider plugin script into a separate .js file as well so your html code looks more clean, that can be easily done by copying all the script and passing it into a new .js file and just putting a <script type="text/javascript" src="url_of_the_script"> in the head of the html document. then all you need is another script this time in the html document that calls the nivo slider plugin to do the job in the html document. Hope this helps a bit.

  • Like 1
Link to comment
Share on other sites

Hiiiii thereeeeeeeee!!! Thaaaaaanks for the help omg !!!! Yay !!!

Hello! What country are you from? I was in a bilingual school as well!
I'm from Puerto Rico. :D
jquery
tumblr_m0v2s7JKqd1qgzsew.jpg Mother of God... One language leads to another one. I'm gonna cryyyy ... !!! Well... This is the starting point.
Well know getting to the topic at hand' date=' first of all dreamweaver per se is not a compiler to program' date=' its just a good program with some pros and cons to build entire websites.. [/quote''] Downloaded!! Thaaanks !!!
Also' date=' did they teach you how to export stylesheets to a different document? a .css document and how to link it to your html page? That way your html page will only contain html code and make it less messy.[/quote'] I forgot about that part. So the thing here is to create .html documents, .css documents and so of all the sections I will put in my webpage?? Just like in C++ that you got variables in a documents, functions in another document and so on...? If it's like that then this is what I did: ------------.CSS CODE-------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>index</title><style type="text/css"> <!-- Usually in the <head> section. --> <link rel="stylesheet" type="text/css" href="index.html" /> <link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" /><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script><script src="jquery.nivo.slider.pack.js" type="text/javascript"></script> <!-- End of Code --> #mainContainer { position:absolute; left:620px; width:1262px; height:680px; z-index:1; margin-left: -631px; top: 0px; background-color: #000000;}#apDiv1 { position:absolute; width:200px; height:71px; z-index:4; left: 169px; top: 22px;}#rolloversbtns { position:absolute; width:346px; height:65px; z-index:4; left: 407px; top: 5px;}#CanelaLogo { position:absolute; width:134px; height:104px; z-index:4; left: 394px; top: 7px;}#divGallerySlider { position:absolute; width:781px; height:464px; z-index:5; left: 180px; top: 113px;}.bggris { background-color: #FFF; background-repeat: repeat-y;}.bgafuera { background-color: #000; background-repeat: repeat-y; background-image: url(images/templatecanelasite/images/bg1-tail.jpg);}#gris { position:absolute; width:955px; height:346px; z-index:2; left: 169px; top: 71px;}#bggris { position:absolute; width:949px; height:680px; z-index:1; left: 1px; top: -73px;}#footer { position:absolute; width:946px; height:66px; z-index:1; left: -1px; top: 615px;}#secondGallery { position:absolute; width:729px; height:485px; z-index:6; left: 191px; top: 109px;}#SliderGallery { position:absolute; width:707px; height:471px; z-index:2; left: 130px; top: 126px;} #apDiv2 { position:absolute; width:200px; height:115px; z-index:3; left: 23px; top: 152px;}</style></head> --------------.HTML CODE----------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>index</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" type="text/css" href="index.css" /> <!--Intento fallido de "linkear" el .css al html. --><script type="text/javascript" src="jquery.nivo.slider.js"><script type="text/javascript" src="jquery.nivo.slider.pack.js"> </head> <body><body onload="MM_preloadImages('images/home_on.jpg','images/about_on.jpg','images/collections_on.jpg','images/contactus_on.jpg')"><div id="mainContainer"> <div id="apDiv1"><img src="images/barraheader.jpg" width="950" height="70" alt="barraheader" /> <div id="rolloversbtns"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Homebtn','','images/home_on.jpg',1)"><img src="images/home_of.jpg" name="Homebtn" width="64" height="65" border="0" id="Homebtn" /></a><a href="about.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('aboutbtn','','images/about_on.jpg',1)"><img src="images/about_off.jpg" name="aboutbtn" width="80" height="65" border="0" id="aboutbtn" /></a><a href="collections.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Collectionsbtn','','images/collections_on.jpg',1)"><img src="images/collections_of.jpg" name="Collectionsbtn" width="99" height="65" border="0" id="Collectionsbtn" /></a><a href="contactus.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contactbtn','','images/contactus_on.jpg',1)"><img src="images/contactus_off.jpg" name="Contactbtn" width="102" height="65" border="0" id="Contactbtn" /></a></div> </div> <div id="CanelaLogo"><img src="images/CanelaCollectionWhite.png" width="132" height="109" alt="CanelaLogo" /></div> <div id="gris"> <div class="bgafuera" id="bggris"> <div id="footer"><img src="images/barrafooter.jpg" width="950" height="65" alt="footer" /></div> <div id="SliderGallery"> <!-- Then somewhere in the <body> section --><div id="slider" class="nivoSlider"> <img src="images/nivosliderimages/canelacollection7.jpg" alt="" border="0" width="706" height="470" /><a href="http://dev7studios.com"> <img src="images/nivosliderimages/canelacollection6.jpg" alt="" border="0" width="706" height="470" title="" /></a> <img src="images/nivosliderimages/canelacollection5.jpg" alt="" border="0" width="706" height="470" title="" /> <img src="images/nivosliderimages/canelacollection8.jpg" alt="" name="indexgallery" width="706" height="470" border="0" /></div><div id="htmlcaption" class="nivo-html-caption"> <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. </div> <!--End of Code--> </div> </div> </div></div></body></html> ----------------------------------------------------------- The Nivo Slider brought two .js ---------------------.JAVASCRIPT CODE----------------------- /** jQuery Nivo Slider v2.7.1* http://nivo.dev7studios.com** Copyright 2011, Gilbert Pellegrom* Free to use and abuse under the MIT license.* http://www.opensourc...mit-license.php** March 2010*/ (function($) { var NivoSlider = function(element, options){ //Defaults are below var settings = $.extend({}, $.fn.nivoSlider.defaults, options); //Useful variables. Play carefully. var vars = { currentSlide: 0, currentImage: '', totalSlides: 0, running: false, paused: false, stop: false }; //Get this slider var slider = $(element); slider.data('nivo:vars', vars); slider.css('position','relative'); slider.addClass('nivoSlider'); //Find our slider children var kids = slider.children(); kids.each(function() { var child = $(this); var link = ''; if(!child.is('img')){ if(child.is('a')){ child.addClass('nivo-imageLink'); link = child; } child = child.find('img:first'); } //Get img width & height var childWidth = child.width(); if(childWidth == 0) childWidth = child.attr('width'); var childHeight = child.height(); if(childHeight == 0) childHeight = child.attr('height'); //Resize the slider if(childWidth > slider.width()){ slider.width(childWidth); } if(childHeight > slider.height()){ slider.height(childHeight); } if(link != ''){ link.css('display','none'); } child.css('display','none'); vars.totalSlides++; }); //If randomStart if(settings.randomStart){ settings.startSlide = Math.floor(Math.random() * vars.totalSlides); } //Set startSlide if(settings.startSlide > 0){ if(settings.startSlide >= vars.totalSlides) settings.startSlide = vars.totalSlides - 1; vars.currentSlide = settings.startSlide; } //Get initial image if($(kids[vars.currentSlide]).is('img')){ vars.currentImage = $(kids[vars.currentSlide]); } else { vars.currentImage = $(kids[vars.currentSlide]).find('img:first'); } //Show initial link if($(kids[vars.currentSlide]).is('a')){ $(kids[vars.currentSlide]).css('display','block'); } //Set first background slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat'); //Create caption slider.append( $('<div class="nivo-caption"><p></p></div>').css({ display:'none', opacity:settings.captionOpacity }) ); // Cross browser default caption opacity $('.nivo-caption', slider).css('opacity', 0); // Process caption function var processCaption = function(settings){ var nivoCaption = $('.nivo-caption', slider); if(vars.currentImage.attr('title') != '' && vars.currentImage.attr('title') != undefined){ var title = vars.currentImage.attr('title'); if(title.substr(0,1) == '#') title = $(title).html(); --------------------------------------------- ^ I don't know if I had to make an additional .jsI did it with what I had in the .html but it gave me errors so I discarted it. And the page looks like this now that I divided the code. =( paginaenblanco1.jpg I don't know if i'ts because I didn't knew how to "link" the pages between them or if I did something wrong besides it. PD: The other .js is more about functions and a lot of "if's" and etc. The functionality about the Slider I guess.
Edited by Nightray
Link to comment
Share on other sites

Ok first of all what you need to include in your <script> </script> is the propper jquery library.. which is basically this line..

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Then you need a function that actually calls the nivo slider to run in the container.. which you can do something like this..

$(window).load(function() {        $('#nameOfTheContainer').nivoSlider();    });

I just took a quick view at it. Later on tonight I will tell you what else you are missing. I'm working right now.

  • Like 1
Link to comment
Share on other sites

By the way for future reference when you post stuff in this forum, make sure you use the


tags so that your code is introduced in an orderly fashion. Just like my last post.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...