 [jquery][PHP] Dynamiczna zmiana grafik bez przeładowania strony |
  |
| [jquery][PHP] Dynamiczna zmiana grafik bez przeładowania strony |
 13.03.2011, 15:14:25
Post
#1
|
|
|
Grupa: Zarejestrowani Postów: 144 Pomógł: 1 Dołączył: 22.11.2007 Skąd: lbn Ostrzeżenie: (0%) 
 |
Witam.
Chciałem zrobić sobie dynamiczny pokaz slajdów bez przeładowania strony. Np co 5 sekund zmienia grafikę na kolejną losową. Chciałem użyć biblioteki jquery.cycle.all.min.js http://jquery.malsup.com/cycle/ ma dość ciekawe możliwości. Przykładowo używa się jej tak: Kod <html> <head> <title>JQuery Cycle Plugin - Example Slideshow</title> <!-- include jQuery library --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <!-- include Cycle plugin --> <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"></script> <!-- initialize the slideshow when the DOM is ready --> <script type="text/javascript"> $(document).ready(function() { $('.slideshow').cycle({ fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc... }); }); </script> </head> <body> <div class="slideshow"> <img src="1.jpg" alt="" /> <img src="2.jpg" alt="" /> <img src="3.jpg" alt="" /> <img src="4.jpg" alt="" /> <img src="5.jpg" alt="" /> <img src="6.jpg" alt="" /> <img src="7.jpg" alt="" /> </div> </body> </html> Nie ma problemu gdy grafik jest mało.. ale ja potrzebuje wrzucić 140 graficzek w formacie 400x300px które ważą 1,54MB (już po maksymalnym zmniejszeniu ich jakości względem wagi pliku.. więcej nie mogę bo pxeloza.. wcześniej ważyły prawie 6MB) Podzieliłem je na 3 foldery po 46 sztuk w każdym i zrobiłem sobie tak: Kod <script type="text/javascript"> $(document).ready(function() { $('#slideshow').cycle({ fx: 'fade', random: 1, timeout: 5000, speed: 2500 }); }); </script> <?php $fol = array('01', '02', '03'); $los = rand(0, 2); $dir = 'plix/los_jpg/'.$fol[$los]; $file_types = array('jpg','jpeg','gif','png'); if($handle = opendir($dir)) { while (false !== ($file = readdir($handle))) { if ($file != "." && $file != ".." && $file != "index.php") { $roz = explode(".",$file); foreach($roz as $key => $value){ if(in_array($value,$file_types)){ $image .= '<img src="'.$dir.'/'.$file.'" width="400px" height="300px" alt="tofx">'; } } } } closedir($handle); } echo'<div id="slideshow" style="height:310px; margin-left:220px;">'. $image .'</div>'; Co prawa po przeładowaniu strony wyświetla mi tylko 1/3 grafik na raz ale to przecierpię. Nieco lepiej ale i tak jeszcze zamula.. w końcu musi załadować 46 grafik.. Zapewne dało by się prościej i może bez udziału php w tym procederze?? Może gdyby w jquery losować np liczbę od 001 do 140 (tak są nazwane pliki) i potem użyć tej wylosowanej liczby do wyświetlenia danej graficzki..  Tylko nie wiem jak się do tego zabrać.. dopiero zaczynam przygodę z jquery. Oczywiście nie musi to być z użyciem tej biblioteki może być inny sposób byle działał sprawniej od moich wypocin. Ten post edytował tofik1778983 13.03.2011, 15:47:15
Powód edycji: [wookieb]: Zmiana tytułu
-------------------- |
 |
 
|
|
13.03.2011, 15:33:25
Post
#2
|
|
 Grupa: Moderatorzy Postów: 8 989 Pomógł: 1550 Dołączył: 8.08.2008 Skąd: Słupsk/Gdańsk |
Czekam na PW z poprawną nazwą tematu.
// otwieram
Powód edycji: [wookieb]:
-------------------- |
|
|
|
|
13.03.2011, 16:35:31
Post
#3
|
|
|
Grupa: Zarejestrowani Postów: 782 Pomógł: 153 Dołączył: 21.07.2010 Ostrzeżenie: (0%)
|
Przeczytałeś chociaż dokumentację tego? Tutaj masz przykładowe rozwiązanie jak dynamicznie dodawać dodatkowe obrazki w tle. Przy tym u mnie skrypt rozkłada się na Operze, weź to pod uwagę.
-------------------- Już mi się ani wiedzieć, ani tym bardziej myśleć nie chce.
[Think different]! |
|
|
|
|
15.03.2011, 14:32:42
Post
#4
|
|
|
Grupa: Zarejestrowani Postów: 144 Pomógł: 1 Dołączył: 22.11.2007 Skąd: lbn Ostrzeżenie: (0%)
|
Wszystkiego nie czytałem przyznaje musiałem ominąć. Dzięki sprawdzę jutro dziś już z tylko spać.
Przykład u mnie działa elegancko pod każdą przeglądarką jaką sprawdzałem ALE... Mam katalog w nim 140 grafik. Mój skrypt wygląda tak: Kod <script type="text/javascript"> $(document).ready(function() { $('#slideshow').cycle({ fx: 'fade', //random: 1, timeout: 1500, speed: 1400, before: onBefore }); var totalSlideCount = 30; function onBefore(curr, next, opts) { if (!opts.addSlide) return; var currentImageNum = parseInt(next.src.match(/img(\d)/)[1]); if (currentImageNum == totalSlideCount) { opts.addSlide = null; return; } opts.addSlide('<img src="tmpz/img'+(currentImageNum+1)+'.jpg" width="400" height="300" />'); }; }); </script> <div id="slideshow" class="pics"> <img src="tmpz/img1.jpg" width="400" height="300" /> <img src="tmpz/img2.jpg" width="400" height="300" /> </div> Katalog fot: /tempz Skrypt wyświetla tylko od img1 do img10 nie chce więcej ile bym nie podał w var totalSlideCount = 30; Czy tyle może maksymalnie wyświetlić czy co everth co miałeś na myśli pisząc że nie działał poprawnie?? Ehh nie zauważyłem że w Kod var currentImageNum = parseInt(next.src.match(/img(\d)/)[1]); jest wyrażenie regularne.już wyświetla ile trzeba. Jednak chciałbym żeby wyświetlało losując nr obrazka, a nie leciało po kolei. ----------------- Jednak to było prstsze niż myślałem.. Może się komuś przyda. Oto kod: Kod $(document).ready(function() { $('#slideshow').cycle({ fx: 'fade', //random: 1, timeout: 500, speed: 90, before: onBefore }); var totalSlideCount = 140; function onBefore(curr, next, opts) { if (!opts.addSlide) return; //var currentImageNum = parseInt(next.src.match(/img(\d..)/)[1]); //if (currentImageNum == totalSlideCount) { // opts.addSlide = null; // return; //} var ran=Math.floor((Math.random()*141)+1); //document.write(ran+' '); opts.addSlide('<img src="tmpz/img'+(ran)+'.jpg" width="400" height="300" />'); }; }); Ten post edytował tofik1778983 15.03.2011, 14:43:07 -------------------- |
|
|
|
|
|
Wersja Lo-Fi | Aktualny czas: 24.07.2025 - 21:23 |
