php - 如何为 jQuery PhotoStack 库中的每个图像添加描述

Question

我遇到了一点问题。我使用 php 文件打开文件夹中的照片

PHP 代码:

<?php
$location   = 'albums';
$album_name = $_GET['album_name'];
$files      = glob($location . '/' . $album_name . '/*.{jpg,gif,png}', GLOB_BRACE);
$encoded    = json_encode($files);
echo $encoded;
unset($encoded);

所有这些代码都是由 jquery 管理的:

JQUERY 代码:

$(function() {
                /**
                * navR,navL are flags for controlling the albums navigation
                * first gives us the position of the album on the left
                * positions are the left positions for each of the 5 albums displayed at a time
                */
                var navR,navL   = false;
                var first       = 1;
                var positions   = {
                    '0'     : 0,
                    '1'     : 170,
                    '2'     : 340,
                    '3'     : 510,
                    '4'     : 680
                }
                var $ps_albums      = $('#ps_albums');
                /**
                * number of albums available
                */
                var elems           = $ps_albums.children().length;
                var $ps_slider      = $('#ps_slider');

                /**
                * let's position all the albums on the right side of the window
                */
                var hiddenRight     = $(window).width() - $ps_albums.offset().left;
                $ps_albums.children('div').css('left',hiddenRight + 'px');

                /**
                * move the first 5 albums to the viewport
                */
                $ps_albums.children('div:lt(5)').each(
                    function(i){
                        var $elem = $(this);
                        $elem.animate({'left': positions[i] + 'px','opacity':1},800,function(){
                            if(elems > 5)
                                enableNavRight();
                        });
                    }
                );

                /**
                * next album
                */
                $ps_slider.find('.next').bind('click',function(){
                    if(!$ps_albums.children('div:nth-child('+parseInt(first+5)+')').length || !navR) return;
                    disableNavRight();
                    disableNavLeft();
                    moveRight();
                });

                /**
                * we move the first album (the one on the left) to the left side of the window
                * the next 4 albums slide one position, and finally the next one in the list
                * slides in, to fill the space of the first one
                */
                function moveRight () {
                    var hiddenLeft  = $ps_albums.offset().left + 163;

                    var cnt = 0;
                    $ps_albums.children('div:nth-child('+first+')').animate({'left': - hiddenLeft + 'px','opacity':0},500,function(){
                            var $this = $(this);
                            $ps_albums.children('div').slice(first,parseInt(first+4)).each(
                                function(i){
                                    var $elem = $(this);
                                    $elem.animate({'left': positions[i] + 'px'},800,function(){
                                        ++cnt;
                                        if(cnt == 4){
                                            $ps_albums.children('div:nth-child('+parseInt(first+5)+')').animate({'left': positions[cnt] + 'px','opacity':1},500,function(){
                                                //$this.hide();
                                                ++first;
                                                if(parseInt(first + 4) < elems)
                                                    enableNavRight();
                                                enableNavLeft();
                                            });
                                        }       
                                    });
                                }
                            );      
                    });
                }

                /**
                * previous album
                */
                $ps_slider.find('.prev').bind('click',function(){
                    if(first==1  || !navL) return;
                    disableNavRight();
                    disableNavLeft();
                    moveLeft();
                });

                /**
                * we move the last album (the one on the right) to the right side of the window
                * the previous 4 albums slide one position, and finally the previous one in the list
                * slides in, to fill the space of the last one
                */
                function moveLeft () {
                    var hiddenRight     = $(window).width() - $ps_albums.offset().left;

                    var cnt = 0;
                    var last= first+4;
                    $ps_albums.children('div:nth-child('+last+')').animate({'left': hiddenRight + 'px','opacity':0},500,function(){
                            var $this = $(this);
                            $ps_albums.children('div').slice(parseInt(last-5),parseInt(last-1)).each(
                                function(i){
                                    var $elem = $(this);
                                    $elem.animate({'left': positions[i+1] + 'px'},800,function(){
                                        ++cnt;
                                        if(cnt == 4){
                                            $ps_albums.children('div:nth-child('+parseInt(last-5)+')').animate({'left': positions[0] + 'px','opacity':1},500,function(){
                                                //$this.hide();
                                                --first;
                                                enableNavRight();
                                                if(first > 1)
                                                    enableNavLeft();
                                            });
                                        }                                       
                                    });
                                }
                            );
                    });
                }

                /**
                * disable or enable albums navigation
                */
                function disableNavRight () {
                    navR = false;
                    $ps_slider.find('.next').addClass('disabled');
                }
                function disableNavLeft () {
                    navL = false;
                    $ps_slider.find('.prev').addClass('disabled');
                }
                function enableNavRight () {
                    navR = true;
                    $ps_slider.find('.next').removeClass('disabled');
                }
                function enableNavLeft () {
                    navL = true;
                    $ps_slider.find('.prev').removeClass('disabled');
                }       

                var $ps_container   = $('#ps_container');
                var $ps_overlay     = $('#ps_overlay');
                var $ps_close       = $('#ps_close');
                /**
                * 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  = 'album' + parseInt($elem.index() + 1);
                    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');
                });

                /**
                * when hovering each one of the images, 
                * we show the button to navigate through them
                */
                $ps_container.live('mouseenter',function(){
                    $('#ps_next_photo').show();
                }).live('mouseleave',function(){
                    $('#ps_next_photo').hide();
                });

                /**
                * navigate through the images: 
                * the last one (the visible one) becomes the first one.
                * we also rotate 0 degrees the new visible picture 
                */
                $('#ps_next_photo').bind('click',function(){
                    var $current    = $ps_container.find('img:last');
                    var r           = Math.floor(Math.random()*41)-20;

                    var currentPositions = {
                        marginLeft  : $current.css('margin-left'),
                        marginTop   : $current.css('margin-top')
                    }
                    var $new_current = $current.prev();

                    $current.animate({
                        'marginLeft':'250px',
                        'marginTop':'-385px'
                    },250,function(){
                        $(this).insertBefore($ps_container.find('img:first'))
                               .css({
                                    '-moz-transform'    :'rotate('+r+'deg)',
                                    '-webkit-transform' :'rotate('+r+'deg)',
                                    'transform'         :'rotate('+r+'deg)'
                                })
                               .animate({
                                    'marginLeft':currentPositions.marginLeft,
                                    'marginTop' :currentPositions.marginTop
                                    },250,function(){
                                        $new_current.css({
                                            '-moz-transform'    :'rotate(0deg)',
                                            '-webkit-transform' :'rotate(0deg)',
                                            'transform'         :'rotate(0deg)'
                                        });
                               });
                    });
                });

                /**
                * close the images view, and go back to albums
                */
                $('#ps_close').bind('click',function(){
                    $ps_container.hide();
                    $ps_close.hide();
                    $ps_overlay.fadeOut(400);
                });

                /**
                * resize and center the images
                */
                function resizeCenterImage($image){
                    var theImage    = new Image();
                    theImage.src    = $image.attr("src");
                    var imgwidth    = theImage.width;
                    var imgheight   = theImage.height;

                    var containerwidth  = 660;
                    var containerheight = 430;

                    if(imgwidth > containerwidth){
                        var newwidth = containerwidth;
                        var ratio = imgwidth / containerwidth;
                        var newheight = imgheight / ratio;
                        if(newheight > containerheight){
                            var newnewheight = containerheight;
                            var newratio = newheight/containerheight;
                            var newnewwidth =newwidth/newratio;
                            theImage.width = newnewwidth;
                            theImage.height= newnewheight;
                        }
                        else{
                            theImage.width = newwidth;
                            theImage.height= newheight;
                        }
                    }
                    else if(imgheight > containerheight){
                        var newheight = containerheight;
                        var ratio = imgheight / containerheight;
                        var newwidth = imgwidth / ratio;
                        if(newwidth > containerwidth){
                            var newnewwidth = containerwidth;
                            var newratio = newwidth/containerwidth;
                            var newnewheight =newheight/newratio;
                            theImage.height = newnewheight;
                            theImage.width= newnewwidth;
                        }
                        else{
                            theImage.width = newwidth;
                            theImage.height= newheight;
                        }
                    }
                    $image.css({
                        'width'         :theImage.width,
                        'height'        :theImage.height,
                        'margin-top'    :-420,
                        'margin-left'   :-(theImage.width/2)-10+'px'    
                    });
                }
            });

效果是有一个照片堆栈。我正在使用这个插件(我修改了一些东西，但没有那么多):

http://tympanus.net/Tutorials/PhotoStack/

如何在每张照片下添加一个带有一些文字的小框？

我不懂 php 的任何内容，所以如果有人能帮助我那就太好了。

Answer 1

在index.html中:

在HTML中添加一个描述容器:(你可以根据需要在这个div上添加样式，只有里面的文本会改变)

<div id="ps_container" class="ps_container" style="display:none;">
  <a id="ps_next_photo" class="ps_next_photo" style="display:none;"></a>
  <!-- added for descriptions -->
  <div id="descriptions" style="margin-top: 410px;text-align: center">
  </div>
</div>

像这样更改ajax调用(不要忘记将出现的2个data替换为imgs):

$.get('photostack.php', {album_name:album_name} , function(data) {
  // modified for descriptions
  var imgs = data['imgs'];

加载每个图像时添加此内容:

$('<img />').load(function(){
  var $image = $(this);

  //added for descriptions
  var description = data['descriptions'][$image.attr('src').match(/[^\/]+$/)];
  $image.attr('title', description);

在图像首次显示时添加此内容:

if(cnt == items_count){
   ...
   $ps_overlay.show();
   // modified for descriptions
   $('#descriptions').text($image.attr('title'));
}

在浏览图像时会出现这种情况

...
var $new_current = $current.prev();

// modified for descriptions
$('#descriptions').text($new_current.attr('title'));

在 photostack.php 中:

添加一个$descriptions数组。您可以通过数据库中的调用来替换它:(您可以省略相册和/或照片上的描述。)

// added for descriptions
$descriptions = array(
    'album1' => array(
        '1.jpg' => 'desc1 desc1 desc1 desc1 desc1 desc1 desc1 desc1 desc1 desc1 ',
        '3.jpg' => 'desc3 desc3 desc3 desc3 desc3 desc3 desc3 ',
    ),
    'album2' => array(
        '2668815346_93d641966e.jpg' => 'smiling',
        ...
    ),
    ...
);

像这样更改ajax调用的返回:

// modified for descriptions
$desc = isset($descriptions[$_GET['album_name']]) ? $descriptions[$_GET['album_name']] : array();
$data = array('imgs' => $files, 'descriptions' => $desc);
$encoded = json_encode($data);

你已经完成了!

<小时/>

您可以在此处查看演示:http://pinouchon.com/sites_tmp/photostack_modified/demo/

如果你懒得自己修改，可以下载修改版here 。希望这会有所帮助。