Надо показывать картинки в определенном порядке (001.jpg, 002.jpg, 003.jpg ...) вот так:
Portraits.JPG.html
Картинки не показываются по порядку, а каждый раз вразброс, например, так: 002.jpg, 001.jpg, 004.jpg, 003.jpg, 005.jpg, 006.jpg, 007.jpg, 008.jpg, 009.jpg, 010.jpg и т.д.
Во вложении находятся все необходимые файлы.
Есть такой код html:
<head>
<link rel="stylesheet" href="css/style_f.css" type="text/css" media="screen"/>
</head>
<body>
<div class="menubar">
<div id="albumSelect" class="albumSelect">
<div class="title_down"><?php $firstAlbum = 'album1'; echo $firstAlbum;?></div>
</div>
</div>
<div id="thumbsWrapper"></div>
<!-- The JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.gallery_f.js"></script>
</body>
И вот такой код JQUERY:
$(function() {
var album = $('#albumSelect div').html();
var current = 0;
buildThumbs();
/*
function to build the thumbs container
An AJAX request is made to retrieve the
photo locations of the selected album
*/
function buildThumbs(){
current=1;
$.get('ajax/thumbs.php?album='+album, function(data) {
var countImages = data.length;
var count = 0;
var $tContainer = $('<div/>',{
id : 'thumbsContainer',
style : 'visibility:hidden;'
})
for(var i = 0; i < countImages; ++i){
try{
var description = data[i].desc[0];
}catch(e){
description='';
}
if(description==undefined)
description='';
$('<img title="'+description+'" alt="'+data[i].alt+'" height="75" />').load(function(){
var $this = $(this);
$tContainer.append($this);
++count;
if(count == countImages){
$('#thumbsWrapper').empty().append($tContainer);
thumbsDim($tContainer);
makeScrollable($('#thumbsWrapper'),$tContainer,15);
}
}).attr('src',data[i].src);
}
},'json');
}
/* adjust the size (width) of the scrollable container
- this depends on all its images widths
*/
function thumbsDim($elem){
var finalW = 0; var centrW = 0;
$elem.find('img').each(function(i){
var $img = $(this);
finalW+=$img.width()+5;
//plus 5 -> 4 margins + 1 to avoid rounded calculations
});
centrW= ($(window).width()-finalW)/2;
if (centrW<0) centrW = 0;
$elem.css('width',finalW+'px').css('visibility','visible').css('margin-left',centrW+'px');
}
//Get our elements for faster access and set overlay width
function makeScrollable($wrapper, $container, contPadding){
//Get menu width
var divWidth = $wrapper.width();
//Remove scrollbars
$wrapper.css({
overflow: 'hidden'
});
//Find last image container
var lastLi = $container.find('img:last-child');
$wrapper.scrollLeft(0);
//When user move mouse over menu
$wrapper.unbind('mousemove').bind('mousemove',function(e){
//As images are loaded ul width increases,
//so we recalculate it each time
var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + contPadding;
var left = (e.pageX - $wrapper.offset().left) * (ulWidth-divWidth) / divWidth;
$wrapper.scrollLeft(left);
});
}
});
К этим файлам есть еще файл thumbs.php:
<?php
$album = $_GET['album'];;
$imagesArr = array();
$i = 0;
/* read the descriptions xml file */
if(file_exists('../thumbs/'.$album.'/desc.xml')) {
$xml = simplexml_load_file('../thumbs/'.$album.'/desc.xml');
}
/* read the images from the album and get the
* description from the XML file:
*/
if(file_exists('../thumbs/'.$album)) {
$files = array_slice(scandir('../thumbs/'.$album), 2);
if(count($files)) {
foreach($files as $file) {
if($file != '.' && $file != '..' && $file!='desc.xml') {
if($xml) {
$desc = $xml->xpath('image[name="'.$file.'"]/text');
$description = $desc[0];
if($description=='')
$description = '';
}
$imagesArr[] = array('src' => 'thumbs/'.$album.'/'.$file,
'alt' => 'images/'.$album.'/'.$file,
'desc' => $description
);
}
}
}
}
$json = $imagesArr;
$encoded = json_encode($json);
echo $encoded;
unset($encoded);
?>
Почему не работает порядок - не понятно. При чем в разных браузерах порядок свой. В Опере (Opera) при обновлении страницы два раза - порядок становится правильным, а в Firefox - все время путаются файлы.
