Witam! To znowu ja, Daroi, z kolejnym problemem. Czy wujek Ukaszf9, byłby w stanie napisać dla mnie skrypt w języku jQuery? Chodzi mi o taki jakby pokaz slajdów, np.:
http://maoria.pun.pl/ (ogłoszenie)
http://www.ninjaclanwars.pun.pl/forums.php (ogłoszenie)
Offline
Jest na tyle dużo poradników w internecie, że pisanie od zera kodu byłoby co najmniej głupie i bezsensu. W szczególności, że podałeś dwa identyczne ogłoszenia ( fakt, że na Maorię to robiłem/przerobiłem tak by działało ).
- http://www.queness.com/post/152/simple- … nt-caption
Wskazówki dla lik'a:
-Gdzie jest sekcja javascript dajesz na początku <script> i na końcu </script>
-Dodatkowo do ogłoszenia wklej kod z jQuery:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
Offline
Dzięki, jednak mam problem. Powklejałem skrypty, niby wszystko świetnie, ładnie, ale na stronie głównej tekst się nie pokazuje i obrazki się nie zmieniają. A wszędzie indziej, na każdej podstronie działa.
Ogłoszenie:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script> <div id="gallery"> <a href="http://www.pokemon-valley.pun.pl/viewtopic.php?pid=322#p322" class="show"> <img src="http://i.imgur.com/aMKa4.png" alt="Redakcja" alt="" title="" width="787" height="221" rel="<h3>Redakcja</h3>Na forum pojawiła się gazetka forumowa! Oprócz mnie (Daroi'ego) oraz Yoshi'ego, redaktorem jest Kaimi! Gratulujemy. Będzie on, razem z nami pisał gazetkę, artykuły będą podpisywane, więc będziecie powiadomieni o jego autorstwie.<br> Nabór do redakcji jest ciągle otwarty, zgłoszenia prosimy przysyłać na E-mail: pokemon-valley@o2.pl."/></a> </a> <a href="http://www.daroi.pun.pl/forums.php"> <img src="http://i.imgur.com/feoV2.jpg" alt="Po remoncie!" alt="" title="" width="787" height="221" rel="<h3>Po remoncie!</h3>Remont zakończyliśmy pomyślnie! Ostatnie poprawki zostały wprowadzone dnia DD.MM.YYYYr. Dziękujemy wszystkim za wsparcie i pomoc!<br> Pokemon Valley powróciło w wersji 2.0, widać zmiany. Dodaliśmy: obrazki pod fora, slajdy, nowe logo, menu oraz tło. A z rzeczy, w których wy możecie uczestniczyć, nasza strona jest na Twitterze."/> </a> <div class="caption"><div class="content"></div></div> </div> <div class="clear"></div> <script>$(document).ready(function() { //Execute the slideShow slideShow(); }); function slideShow() { //Set the opacity of all images to 0 $('#gallery a').css({opacity: 0.0}); //Get the first image and display it (set it to full opacity) $('#gallery a:first').css({opacity: 1.0}); //Set the caption background to semi-transparent $('#gallery .caption').css({opacity: 0.7}); //Resize the width of the caption according to the image width $('#gallery .caption').css({width: $('#gallery a').find('img').css('width')}); //Get the caption of the first image from REL attribute and display it $('#gallery .content').html($('#gallery a:first').find('img').attr('rel')) .animate({opacity: 0.7}, 400); //Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds setInterval('gallery()',6000); } function gallery() { //if no IMGs have the show class, grab the first image var current = ($('#gallery a.show')? $('#gallery a.show') : $('#gallery a:first')); //Get next image, if it reached the end of the slideshow, rotate it back to the first image var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first')); //Get next image caption var caption = next.find('img').attr('rel'); //Set the fade in effect for the next image, show class has higher z-index next.css({opacity: 0.0}) .addClass('show') .animate({opacity: 1.0}, 1000); //Hide the current image current.animate({opacity: 0.0}, 1000) .removeClass('show'); //Set the opacity to 0 and height to 1px $('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 }); //Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect $('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '136px'},500 ); //Display the content $('#gallery .content').html(caption); }</script>
CSS:
body{ font-family:arial } .clear { clear:both } #gallery { position:relative; height:360px } #gallery a { float:left; position:absolute; } #gallery a img { border:none; } #gallery a.show { z-index:500 } #gallery .caption { z-index:600; background-color:#000; color:#ffffff; height:100px; width:100%; position:absolute; bottom:0; } #gallery .caption .content { margin:5px } #gallery .caption .content h3 { margin:0; padding:0; color:#1DCCEF; }
Offline
Wszystko co jest pomiędzy <script>a jego zakończeniem </script> wstaw na osobny hosting np. cba.pl gdyż występuje konflikt pomiędzy biblioteką jQuery, a biblioteką Prototype z której korzysta chatbox. Następnie się do tego odnieść np. poprzez css
@import url('adres do strony ze skryptem');
Do modyfikacji css.
Offline