首页 code

ubergallery custom

发布时间:2018年10月20日 评论数：抢沙发 阅读数：144

1.　默认 ubergallery 只有一个相册，多相册在官网 git 上有一个参考 patch，改的是根目录下的 index.php.　不过那个看起来是老的 ubergallery 版本，没有使用　themes,　这边把多相册的 patch port 到了我使用的 theme 下面．




/****** ubergallery/resources/themes/uber-responsive/index.php ******/




                            <img src="<?php echo $image['thumb_path']; ?>" alt="<?php echo $image['file_title']; ?>" />
                        </a>
                    </li>
                <?php endforeach; ?>
            </ul>
        <?php endif; ?>

<!-- my-images start-->
	<?php $my_dirs = scandir('my-images'); ?>
	<?php $my_gallery = new UberGallery(); ?>
	<?php $my_galleryArray = array(); ?>
	<?php foreach (array_reverse($my_dirs) as $file): ?>
		<?php $dir = 'my-images/' . $file; ?>
		<?php if (is_dir($dir) && $file != '.' && $file != '..'): ?>

	<div class="navbar navbar-inverse">
		<div class="navbar-inner">
			<div class="container">
				<div class="brand"><?php echo ucwords(iconv('gb2312','utf-8',$file)); ?></div>
			</div>
		</div>
	</div>

		<?php $my_galleryArray = $my_gallery->readImageDirectory($dir); ?>

	<?php if (!empty($my_galleryArray) && $my_galleryArray['stats']['total_images'] > 0): ?>
            <ul class="gallery-wrapper thumbnails">
                <?php foreach ($my_galleryArray['images'] as $image): ?>
           	         <li class="">
           	             <a href="<?php echo html_entity_decode($image['file_path']); ?>" title="<?php echo $image['file_title']; ?>" class="thumbnail" rel="colorbox">
           	                 <img class="lazy" data-original="<?php echo $image['thumb_path']; ?>" alt="<?php echo $image['file_title']; ?>" />
           	             </a>
          	          </li>
                <?php endforeach; ?>
            </ul>
	<?php endif; ?>
            <?php endif; ?>

        <?php endforeach; ?>
<!-- my-images end -->

        <!-- End UberGallery - Distributed under the MIT license: http://www.opensource.org/licenses/mit-license.php -->

        <hr/>

        <?php if ($galleryArray['stats']['total_pages'] > 1): ?>

            <div class="pagination pagination-centered">
                <ul>
                    <?php foreach ($galleryArray['paginator'] as $item): ?>







２.　paginator 分页功能是针对单相册有效，改多相册后无法使用，所有图片在一页上，加载缓慢，阅读 paginator 实现代码感觉不太容易改动，遂改成图片慢加载的实现．　最后使用 jquery 的 lazyload 插件，使用非常简单而且有效．







/****** ubergallery/resources/themes/uber-responsive/index.php ******/










    <script type="text/javascript" src="<?php echo THEMEPATH; ?>/js/jquery.lazyload.js"></script>
    <script type="text/javascript">$(function(){ $("img.lazy").lazyload({threshold: "50", effect: "fadeIn"}); });</script>
    ......
    ......
    ......
                <?php foreach ($my_galleryArray['images'] as $image): ?>
                        <li class="">
                            <a href="<?php echo html_entity_decode($image['file_path']); ?>" title="<?php echo $image['file_title']; ?>" class="thumbnail" rel="colorbox">
                                <img class="lazy" data-original="<?php echo $image['thumb_path']; ?>" alt="<?php echo $image['file_title']; ?>" />
                            </a>
                        </li>
                <?php endforeach; ?>







3.　中文目录的相册名不能正常显示，有中文目录路径的超链接失效




相册名中文解决办法：

/****** ubergallery/resources/themes/uber-responsive/index.php ******/




	<div class="navbar navbar-inverse">
		<div class="navbar-inner">
			<div class="container">
				<div class="brand"><?php echo ucwords(iconv('gb2312','utf-8',$file)); ?></div>
			</div>
		</div>
	</div>







图片链接中文路径解决办法：

/****** ubergallery/resources/UberGallery.php ******/




                $galleryArray['images'][htmlentities(pathinfo($image['real_path'], PATHINFO_BASENAME))] = array(
                    'file_title'   => str_replace('_', ' ', pathinfo($image['real_path'], PATHINFO_FILENAME)),
                    'file_path'    => htmlentities(iconv('gb2312','utf-8',$relativePath)),
                    'thumb_path'   => $this->_createThumbnail($image['real_path'])
                );



########################################
仍有问题：在 IE 内核下不能点开图片，查看原图．