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>
<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>';
$(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.