现在位置: 首页 > 程序设计 > 正文
A+

主题幻灯片和滑动解锁以及部署fancybox

2个月前 程序设计 424 14

幻灯片

fengsay的幻灯片功能我前后换了四次,记得早期的时候用的好像是一个插件,什么名字我忘了。话说我是很排斥使用插件的,最后经过我和百度不懈的努力,fengsay已经开始零插件了。

先来说说power-slider吧,简单的说它可以让你网站的任何图片和文字滚动起来,且随着你参数的变动可以随意控制滚动的方向。部署非常的简单,总的来说是一款不错的jquery。但无论什么产品都有好的一面和不足的地方,power-slider好的一面是部署简单,不好的地方就是功能不足。

我自己的看法是power-slider不能支持触控滑动是很致命的,这是我最终跟它分手的直接原因,其次的一个小问题是不能无缝滚动,听说作者已经弥补了这个小问题,但我是回不去了。目前触控功能这一块还是一片空白。

我说的归我说的,但你还是要了解了之后才知道适不适合你,点击下面的链接进去看看就知道了。

至于我现在用的JS框架就非常牛逼了。它的名字叫swiper,相信很多朋友都有听说过这个名字并且已经使用很久了。我为什么选择它原因很简单,这玩意儿是中文的且免费开源,你懂我是什么意思。有兴趣的朋友不妨百度搜索一下,它的强大你可以直接在官方网站上看到,我就不啰嗦了。

swiper使用起来其实也蛮简单,官网有详细的中文说明,我们可以试着部署一下。

首先要做的还是老样子,在head头部或者是footer尾部添加swiper.min.js,wordpress用户可以直接加到functions.php里去,你可以这样添加:

  1. wp_enqueue_script( 'swiper', get_template_directory_uri() . '/js/swiper.min.js', array(), '5.2.0', false );

官网的教程是还需要加载一个css的样式表,我并没有添加,因为我是直接部署到style.css里去的,所以自己选择吧,但我还是会告诉你在functions.php的代码:

  1. wp_enqueue_style( 'swiper', get_template_directory_uri() . '/css/swiper.min.css', array(), '5.2.0');

接下来就是开始部署html了,先看一下官方给的格式:

  1. <div class="swiper-container">
  2.     <div class="swiper-wrapper">
  3.         <div class="swiper-slide">Slide 1</div>
  4.         <div class="swiper-slide">Slide 2</div>
  5.         <div class="swiper-slide">Slide 3</div>
  6.     </div>
  7.     <!-- 如果需要分页器 -->
  8.     <div class="swiper-pagination"></div>
  9.     <!-- 如果需要导航按钮 -->
  10.     <div class="swiper-button-prev"></div>
  11.     <div class="swiper-button-next"></div>
  12.     <!-- 如果需要滚动条 -->
  13.     <div class="swiper-scrollbar"></div>
  14. </div>

使用的是class类,我们需要做的就是在这个基础上加以改动,不过前提是你后台的幻灯片是怎么获取的,这种还是要因主题而异。

比如说你用的是阿树框架,那就是这样的:

  1. <?php
  2. $args = array(
  3.     'post_type'=>'slider_type',
  4.     'orderby'=>'menu_order',
  5.     'showposts'=>6
  6. );
  7. query_posts($args);
  8. ?>
  9. <?php if(have_posts()): ?>
  10. <div id="slider" class="slider swiper-container">
  11.     <div class="slider-wrapper swiper-wrapper">
  12.         <?php
  13.         while(have_posts()): the_post();
  14.             $slider_title = get_post_meta($post->ID, "slider_title", true);
  15.             $slider_pic = get_post_meta($post->ID,'slider_pic',true);
  16.             $slider_link = get_post_meta($post->ID,'slider_link',true);
  17.         ?>
  18.         <div class="slider-info swiper-slide">
  19.             <a href="<?php echo $slider_link; ?>"><img src="<?php echo $slider_pic; ?>" alt="" /><span class="slider-title"><?php echo $slider_title; ?></span></a>
  20.         </div>
  21.         <?php endwhile; ?>
  22.     </div>
  23.     <div class="swiper-pagination slider-pagination"></div>
  24.     <div class="swiper-button-prev slider-prev"><a href="javascript:void(0);"><i id="al" class="arrow yao yao-zuojiantou"></i></a></div>
  25.     <div class="swiper-button-next slider-next"><a href="javascript:void(0);"><i id="ar" class="arrow yao yao-youjiantou"></i></a></div>
  26. </div>
  27. <?php endif; wp_reset_query(); ?>

看不懂也没有关系,给我留言就行。

虽然刚刚添加了js文件,但我们还是要去初始化swiper的,这玩意儿在官方网站有一个API文档,按照你自己的要求增加所需要的参数,这个我就不多聊了,每个人的喜好不同所以代码也不一样,我的代码是这样的:

  1. $(document).ready(function () {
  2.     var mySwiper = new Swiper ('.slider', {
  3.         speed:1000,
  4.         autoplay: {
  5.             delay: 10000,
  6.             stopOnLastSlide: false,
  7.             disableOnInteraction: false,
  8.         },
  9.         simulateTouch:false,
  10.         direction: 'horizontal',
  11.         loop: true,
  12.         pagination: {
  13.         el: '.swiper-pagination',
  14.         clickable:true,
  15.         },
  16.         navigation: {
  17.         nextEl: '.swiper-button-next',
  18.         prevEl: '.swiper-button-prev',
  19.         },
  20.     })
  21. });

最后就是要看你要把这个幻灯片做成什么样子了,你可以选择使用官方的css样式,这样简单,但后果是在后来的维护当中你会多了很多的麻烦,比如说不能在同一个页面使用多个swiper等等,自己想要什么样式自己去写css就可以了,毕竟这不是一件很难得事。

  1. .slider {position:relative;overflow:hidden;width:100%;height:320px;max-height:320px;margin-bottom:10px;border:1px solid #ddd;border-radius:4px;z-index:1;}
  2. .slider-wrapper{width: 100%;height: 100%;z-index: 1;display: flex;transition-property: transform;}
  3. .slider-info {position:relative;width: 100%;height: 100%;flex-shrink: 0;transition-property: transform;}
  4. .slider-info a {display:black;}
  5. .slider-info img {width:100%;height:100%;-webkit-transition:0.4s;-webkit-transition:-webkit-transform 0.4s ease-out;transition:transform 0.4s ease-out;-moz-transition:-moz-transform 0.4s ease-out;}
  6. .slider-info:hover > a img {transform:scale(1.02);-ms-transform:scale(1.02);-webkit-transition:0.4s;-webkit-transition:-webkit-transform 0.4s ease-out;transition:transform 0.4s ease-out;-moz-transition:-moz-transform 0.4s ease-out;}
  7. .slider-pagination {position:absolute;left:0;rightright:0;bottombottom:10px;text-align:center;z-index:3;}
  8. .slider-pagination .swiper-pagination-bullet {display:inline-block;outlinenone;width:10px;height:8px;margin:0 4px;text-indent:-999em;background:#fff;border-radius:6px;cursor:pointer;opacity:.8;-webkit-transition:background .5s,opacity .5s;-moz-transition:background .5s,opacity .5s;transition:background .5s,opacity .5s}
  9. .slider-pagination .swiper-pagination-bullet-active {background:#2291f7;width:26px;opacity:1;}
  10. .slider-info .slider-title {position:absolute;left:0px;top:0px;padding:5px 10px;text-align:left;color:#fff;background:rgba(51,51,51,0.5);border-bottom-rightright-radius:4px;overflow:hidden;}
  11. .slider .arrow {position:absolute;top:50%;margin-top:-30px;border:none;background:rgba(51,51,51,0.8);padding:15px 8px;color:#fff;font-size:18px;font-weight:bolder;z-index:2;}
  12. .slider-prev #al {left:-35px;transition:transform 0.3s ease-out;}
  13. .slider-next #ar {rightright:-35px;transition:transform 0.3s ease-out;}
  14. .slider-prev #al:hover {background:#2291f7;}
  15. .slider-next #ar:hover {background:#2291f7;}
  16. .slider:hover > .slider-prev a #al {transform:translateX(95%);transition:transform 0.3s ease-out;}
  17. .slider:hover > .slider-next a #ar {transform:translateX(-95%);transition:transform 0.3s ease-out;}

以上的CSS仅供参考!

myQaptcha

这个插件的开发者是一个博客名字叫三十岁的人开发了,中国人,应该是男的,这是他的博客,可以去观摩一下。http://blog.30c.org/2906.html

我得到这个插件的途径不是来自于原创作者,而是从知更鸟的博客下载的,据说有做修改,而我使用的是基于他修改的基础上再次修改!

提取码:79my

你需要做的就是把它下载下来,然后放到你主题的任意位置,然后在functions.php里添加:

  1. require get_template_directory() . '/js/myqaptcha/myQaptcha.php';

注意的是路径一定要对,否则就是无法预测的错误。

接下来就是一想说的一些修改心得,开始在部署的时候我就在想一个问题,这东西不能宽度自适应要怎么解决,现在很多人的主题都是自适应框架,难道就没办法解决吗?

。。。。。。这是不可能的。

需要修改原始的myqaptcha.jquery.js文件,比如。。。就不比如了,自己去下一个原始文件来对照一下吧。

接下来在你主题需要的地方添加:

  1. <div class="QapTcha comment-qaptcha"></div>

本来它默认是一个类的,我自己添加了一个类进去,这样的好处是你可以在不同的页面区分这个插件,使不同的页面做到自适应。

CSS样式是必不可少的,这个需要发挥你的想象力,你想做成什么样的都可以,我的只能提供给你参考。

  1. .comment-qaptcha {position:relative;width:32.5%;}
  2. .comment-qaptcha .clr{clear:both}
  3. .comment-qaptcha .bgSlider {width:100%;height:37px;line-height:37px;background:#f1f1f1;float:left;border-radius:4px;border:1px solid #ddd;z-index:1;margin-bottom:10px;}
  4. .comment-qaptcha .Slider {width:35px;height:35px;background:#fff;cursor:e-resize;border-radius:4px;border:1px solid #ddd;z-index:3}
  5. .comment-qaptcha .Slider .yao-double-arro-rightright {font-size:16px;line-height:35px;color:#FF0000;text-align:center;display:block}
  6. .comment-qaptcha .Slider .yao-gou {font-size:16px;line-height:35px;color:#00CD00;text-align:center;display:block}
  7. .comment-qaptcha .dropError {position:absolute;left:25%;z-index:2;line-height:37px;color:#999;}
  8. .comment-qaptcha .dropSuccess {position:absolute;left:40%;z-index:2;line-height:37px;color:#999;}

fancybox

fancybox是一个弹出式的图片插件,之前我用的是weisay.com的Auto Highslide修改版,挺好用的,但还是那句话,不能自适应和滑动。

关于它怎么使用我其实也不想多说,就是下载下来之后放到主题的任意目录,在functions.php里引用它就可以了。

然后你需要做的事情就是在图片的<img>里添加一个data-fancybox="gallery"的标签属性,可以在functions.php里直接写入:

  1. //fancybox自动添加暗箱标签属性
  2. add_filter('the_content', 'pirobox_gall_replace');
  3. function pirobox_gall_replace ($content){
  4.     global $post;
  5.     $pattern = "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>(.*?)<\/a>/i";
  6.     $replacement = '<a$1href=$2$3.$4$5 data-fancybox="gallery"$6>$7</a>';
  7.     $content = preg_replace($pattern$replacement$content);
  8.     return $content;
  9. }

另外如果你部署好之后打开弹窗图片发现你的页面有偏移现象的话,需要在它的js里删除一些代码。

  1. if (
  2.   !$.fancybox.getInstance() &&
  3.   firstItemOpts.hideScrollbar !== false &&
  4.   !$.fancybox.isMobile &&
  5.   document.body.scrollHeight > window.innerHeight
  6. ) {
  7.   $("head").append(
  8.     '<style id="fancybox-style-noscroll" type="text/css">.compensate-for-scrollbar{margin-right:' +
  9.     (window.innerWidth - document.documentElement.clientWidth) +
  10.     "px;}</style>"
  11.   );
  12.   $("body").addClass("compensate-for-scrollbar");
  13. }

我不知道它为什么要增加这个类样式,且给这个类样式增加了margin-right,反正我的主题不需要它多此一举,所以我删除掉了。

前面一篇文章我说过要做一个企业的幻灯片的,但后来就提不起兴趣了,因为没人给钱,哈哈,不说这个,其实能耐心的看完我这篇文章写一个企业网站的幻灯片就不难了。

发表评论

评论列表 ( 有 424 次浏览 和 14 条评论 其中 访客有 9 条 博主有 5 条 )
搜索