+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: [JS][CSS] Problem z nivo sliderem. (/thread-js-css-problem-z-nivo-sliderem)
[JS][CSS] Problem z nivo sliderem. - michu - 31-08-2010
Witam,
zajmuję się tworzeniem stron i internetowych, ale moje zadanie kończy się na pliku .psd. Teraz chcę wstawić do portfolia nivo slidera i mam z tym duży problem. Mianowicie moje osiągnięcie kończy się, kiedy wyświetlane są 4 obrazki (jeden po drugim), tworzy się drabinka z obrazów.
http://nivo.dev7studios.com/
Robię wszystko według instrukcji, ale zacinam się na
Kod:
$(window).load()Kod:
<!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>DreamTemplate</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<script src="js/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
</head>
<body>
<div class="main">
<div class="blok_header">
<div class="header">
<div class="logo"> <a href="index.html"><img src="images/logo.jpg" width="206" height="106" border="0" alt="logo" class="one" /></a> </div>
<div class="menu">
<ul>
<li><a href="index.html"><span>ĄĘ </span></a></li>
<li><a href="portfolio.html"><span>Services</span></a></li>
<li><a href="portfolio.html" class="active"><span>Portfolio</span></a></li>
<li><a href="about.html"><span> About Us </span></a></li>
<li><a href="contact.html"><span> Contact Us</span></a></li>
</ul>
</div>
<div class="clr"></div>
<h2>Portfolio</h2>
</div>
</div>
<div class="clr"></div>
<div class="FBG_blog">
<div class="FBG_blog_resize"> <a href="#"><img src="images/readmore.gif" alt="contact" width="159" height="48" border="0" /></a>
<div class="recent"> <img src="images/tests.gif" alt="tests" width="28" height="23" class="floated" />
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar dolor in urna lacinia sit amet interdum ipsum suscipit. Donec adipisin lacinia adipiscing. </span></p>
</div>
<div class="clr"></div>
</div>
<div class="clr"></div>
</div>
<div class="body_resize">
<div class="body">
<div class="full">
<h2>Portfolio Our Website<br />
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</span></h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium mque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<script type="text/javascript">
$(window).load(function() {
$('#slider3').nivoSlider({
effect: 'sliceDown',
directionNavHide: false
});
$('#slider3').data('nivo:vars').stop = true;
});
</script>
<div id="slider">
<img src="images/about_1.jpg" alt="" />
<a href="http://dev7studios.com"><img src="images/about_1.jpg" alt="" /></a>
<img src="images/about_1.jpg" alt="" title="OOOpis" />
<img src="images/about_1.jpg" alt="" />
</div>
<div class="port">
<h2>Project item</h2>
<img src="images/port_2.jpg" alt="picture" width="304" height="146" />
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec scelerisque dictum turpis accumsan adipiscing.</p>
<p><a href="#">view more »</a></p>
</div>
<div class="port">
<h2>Project item</h2>
<img src="images/port_3.jpg" alt="picture" width="304" height="146" />
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec scelerisque dictum turpis accumsan adipiscing.</p>
<p><a href="#">view more »</a></p>
</div>
<div class="port">
<h2>Project item</h2>
<img src="images/port_4.jpg" alt="picture" width="304" height="146" />
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec scelerisque dictum turpis accumsan adipiscing.</p>
<p><a href="#">view more »</a></p>
</div>
<div class="port">
<h2>Project item</h2>
<img src="images/port_6.jpg" alt="picture" width="304" height="146" />
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec scelerisque dictum turpis accumsan adipiscing.</p>
<p><a href="#">view more »</a></p>
</div>
<div class="port">
<h2>Project item</h2>
<img src="images/port_5.jpg" alt="picture" width="304" height="146" />
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec scelerisque dictum turpis accumsan adipiscing.</p>
<p><a href="#">view more »</a></p>
</div>
<div class="clr"></div>
</div>
<div class="clr"></div>
</div>
</div>
</div>
<div class="footer">
<div class="footer_resize">
<p class="leftt">© Copyright websitename . All Rights Reserved. <a href="#">Home</a> | <a href="#">Contact</a> | <a href="#">RSS </a></p>
<p class="right">(DT) <a href="http://www.dreamtemplate.com">Website Templates</a></p>
<div class="clr"></div>
</div>
<div class="clr"></div>
</div>
</body>
</html>P.S.
Szablon jest ściągnięty.
RE: [JS][CSS] Problem z nivo sliderem. - Sheken - 31-08-2010
Jeśli miałbym Ci pomóc to moja sugestia: wyrzuć ten plugin i użyj jquery cycle http://www.malsup.com/jquery/cycle/. Podpięcie zajmuje max 10 minut.
Nie znam lepszego pluginu. Dodatkowo zawiera większość efektów jakie powinna mieć galeria.