Php 修改Jquery Photostack脚本以使用图像数据库
我一直在使用下面的脚本,我试图修改它,从我的mysql数据库中提取图像细节。它似乎可以工作,并加载所有相册以及相册缩略图和标题,当我单击相册缩略图时,它会从图库中加载第一张图像,但除此之外,我只能看到下一张图像图标 这是原始脚本: Iv修改了这部分代码以从数据库中提取相册:Php 修改Jquery Photostack脚本以使用图像数据库,php,jquery,json,Php,Jquery,Json,我一直在使用下面的脚本,我试图修改它,从我的mysql数据库中提取图像细节。它似乎可以工作,并加载所有相册以及相册缩略图和标题,当我单击相册缩略图时,它会从图库中加载第一张图像,但除此之外,我只能看到下一张图像图标 这是原始脚本: Iv修改了这部分代码以从数据库中提取相册: <div id="ps_slider" class="ps_slider"> <a class="prev disabled"></a> <a cl
<div id="ps_slider" class="ps_slider">
<a class="prev disabled"></a>
<a class="next disabled"></a>
<div id="ps_albums">
<?php
include("../connect.php");
$sql = <<<SQL
SELECT *
FROM `albums`
WHERE isalbum='yes'
SQL;
if(!$result = $db->query($sql)){
die('There was an error running the query [' . $db->error . ']');
}
while($row = $result->fetch_assoc()){
echo '<div id="'.$row['albumid'].'" class="ps_album" style="opacity:0;"><img src="../albums/'.$row['albumid'].'/albumthumbnail/'.$row['albumthumbnail'].'" alt=""/><div class="ps_desc"><h2>'.$row['albumname'].'</h2><span></span></div></div>';
}
?>
</div>
</div>
这部分代码应该加载下一个图像:
/**
* when we click on an album,
* we load with AJAX the list of pictures for that album.
* we randomly rotate them except the last one, which is
* the one the User sees first. We also resize and center each image.
*/
$ps_albums.children('div').bind('click',function(){
var $elem = $(this);
var album_name = $(this).attr('id');
var $loading = $('<div />',{className:'loading'});
$elem.append($loading);
$ps_container.find('img').remove();
$.get('photostack.php', {album_name:album_name} , function(data) {
var items_count = data.length;
for(var i = 0; i < items_count; ++i){
var item_source = data[i];
var cnt = 0;
$('<img />').load(function(){
var $image = $(this);
++cnt;
resizeCenterImage($image);
$ps_container.append($image);
var r = Math.floor(Math.random()*41)-20;
if(cnt < items_count){
$image.css({
'-moz-transform' :'rotate('+r+'deg)',
'-webkit-transform' :'rotate('+r+'deg)',
'transform' :'rotate('+r+'deg)'
});
}
if(cnt == items_count){
$loading.remove();
$ps_container.show();
$ps_close.show();
$ps_overlay.show();
}
}).attr('src',item_source);
}
},'json');
});
/**
*当我们点击相册时,
*我们使用AJAX加载该相册的图片列表。
*我们随机旋转它们,但最后一个除外,即
*用户首先看到的那个。我们还调整每个图像的大小并使其居中。
*/
$ps_albums.children('div').bind('click',function(){
变量$elem=$(本);
var album_name=$(this.attr('id');
var$loading=$('',{className:'loading'});
$elem.append($loading);
$ps_container.find('img').remove();
$.get('photostack.php',{album\u name:album\u name},函数(数据){
var items_count=data.length;
对于(变量i=0;i
<?php
$location = '../albums';
$location2 = '800x600';
$album_name = $_GET['album_name'];
$files = glob($location . '/' . $album_name . '/' . $location2 . '/*. {jpg,gif,png}', GLOB_BRACE);
$encoded = json_encode($files);
echo $encoded;
unset($encoded);
好的,我解决了这个问题!由于某种原因,相册中的照片的扩展名是.jpeg而不是.jpg,所以我不知道为什么我从哪里下载了这些照片来获得扩展名。无论如何,我改变了
$files = glob($location . '/' . $album_name . '/' . $location2 . '/*.{jpg,gif,png}', GLOB_BRACE);
并添加了jpeg
$files = glob($location . '/' . $album_name . '/' . $location2 . '/*.{jpg,gif,png,jpeg}', GLOB_BRACE);
现在它工作得很好!是php还是js出了问题?我不确定,php文件似乎至少从相册目录中提取了一个文件,但由于某些原因,它不再提取任何文件。下面是一行$files=glob($location./'.$album\u name./'.$location2./*.{jpg,gif,png}',glob u-BRACE);$encoded=json\u-encode($files);在photostack.php中,我认为它是通过Ajax拉入的,但我不确定如何检查$files中包含的内容,因为理论上它应该是相册目录中的所有文件名