MVC3.0图片滚动和相册展示(下)

首先：加上js文件和css样式文件jquery.ad-gallery.css，参照(MVC3.0图片上传的js 文件)。

其次:在view层套用相应的div样式，即可实现滚动。可以选择滚动方式，左右，垂直，渐进，动态，还可以选择使用幻灯片方式进行预览

     使用jquery 相应控制，即:  

               //滚动方式
                <select id="switch-effect">
                    <option value="slide-hori">水平滚动</option>
                    <option value="slide-vert">垂直滚动</option>
                    <option value="resize">动态变化</option>
                    <option value="fade">渐进渐出</option>
                </select>
                &nbsp; <a href="#" id="toggle-slideshow">显示/隐藏幻灯片开关</a> &nbsp;



            // jquery代码
 $(function ()
    {
        $(".thumb").LoadThumImage(true, 60);
        var galleries = $('.ad-gallery').adGallery();
        $('#switch-effect').change(
                function ()
                {
                    galleries[0].settings.effect = $(this).val();
                    return false;
                }
            );
        $('#toggle-slideshow').click(
                function ()
                {
                    galleries[0].slideshow.toggle();
                    return false;
                }
        );
    });

 在view层套用相应div

<div id="gallery" class="ad-gallery">
                <div class="ad-image-wrapper">
                    <img class="showPhoto" />
                </div>
                <div class="ad-controls">
                </div>
                <div class="ad-nav">
                    <div class="ad-thumbs">
                        <ul class="ad-thumb-list">
                            图片循环遍历显示，记住：样式！！<img src="" class="thumb" alt="" />
                        </ul>
                    </div>
                </div>
            </div>

当加载的相册图片不显示的时候，温馨提示一张封面”相册暂无图片“！

最后，有关的相册的分类和编辑，就直接对DB的操作。

总结：关键在于搜索相应的相册模式，有些网上的代码存在兼容性或者js报错的情况。同事经筛选选择此模板，感谢同事！

        在嵌套相应的div的时候要仔细。