首页 > 网站建设 > emlog相关 > 给Emlog添加JS幻灯片功能的方法
2013
06-12

给Emlog添加JS幻灯片功能的方法

为了让大家及时了解emlog幻灯片的自定义修改,小编转载了秦时明月博主所写的方法:


步骤一:找到一个JS的幻灯片功能插件

    一般一个js幻灯片代码在网上都有相当多优秀的现成的,要我们自己写JS插件估计有点力不从心,下面就以本博客之前分享的一个幻灯片jQuery插件(saySlide)来演示。

步骤二:分析jQuery幻灯片插件的结构

    当然,我们所需要分析的结构仅仅是调用该插件的时候的代码结构,如下代码就是调用saySlide幻灯片插件的代码。很容易地我们可以从中提取出“<div><img src=”图片地址1″ stitle=”标题名1″ slink=”链接地址1″ /></div>”这样的代码行即是该插件需要的数据内容,其中包括了“图片地址”、“标题”、“链接”,因此,我们只要通过获取Emlog日志对应的数据进行循环即可获得多个该插件所需要的数据。

 <div id="定义ID" style="必须设置该div的宽和高,并最好加上overflow:hidden;属性">

    <div><img src="图片地址1" stitle="标题名1" slink="链接地址1" /></div>

    <div><img src="图片地址2" stitle="标题名2" slink="链接地址2" /></div>

</div> 
<script>
$("定义ID").saySlide({参数:"参数值"}); 
</script>

步骤三:获取Emlog博客上一步骤中所了解到的该插件所需要的数据

    这一步是最关键的,也是有一点点代码知识的。不过这一步对于Emlog是通用的,因此一通百通。

    我采用的是编写了一个函数放在module.php中,重点请看代码中的注释信息。

    但是如果你使用官方的“数据调用”插件实现以下功能,代码会简单无数倍,相信看完下面的内容你就会知道怎么使用“数据调用”插件配合实现幻灯片的功能了 (数据调用插件只能显示插入文中的图片,如果附件中有图片没有插入文章中是不会显示在幻灯片中的,不过一般的,使用数据调用插件实现就已经非常OK了)。

<?php
//slide数据源
        //定义函数,只有一个参数$num,即为调用的数据条数
function get_flash_data($num){
        //面向对象中静态方法实例化数据库对象(我是这么理解的)
        $db = MySql::getInstance();
        //下面是数据库语句,即获取gid,title,data,content等内容,非隐藏,时间正序,总共$num条数据
        $sql = "SELECT gid,title,date,content FROM ".DB_PREFIX."blog WHERE hide='n' ORDER BY `date` DESC LIMIT 0,$num";
	$go = $db->query($sql);
                //开始循环进行显示
                while($row = $db->fetch_array($go)){
			$img_url = '';
                        //picthumb()函数为获取文章附件图片的函数,后面会补上
                        //如果附件中含有图片,那么$img_url就等于附件图片的地址
                        if(picthumb($row['gid'])){
				$img_url = picthumb($row['gid']);
                        //pin_thumb()函数为获取文章中图片链接的函数,后面会补上
                        //如果附件中不含图片,但是文章中有外链图片,则$img_url等于外链图片的地址
                        }elseif(pic_thumb($row['content'])){
				$img_url = pic_thumb($row['content']);
                        //如果以上两种情况都没有图片,那么$img_url就等于默认图片
                        //如下默认图片的路径是模板路径下images文件夹下的default_flash.jpg文件
                        }else{
				$img_url = TEMPLATE_URL.'images/default_flash.jpg';
			}
                        //下面这一句是非常关键的,$data即为我们上面步骤所说的数据
                        //第二步骤中我们知道格式为“<b><span style="color:#e53333;"><div><img src="图片地址1" stitle="标题名1" slink="链接地址1" /></div></span></b>”
                        //如下格式必须和上面步骤中提取出来的数据格式一致。如果是不同的幻灯片插件,只需此处的格式不同而已。
                        $data = '<div><img src="'.$img_url.'" stitle="'.$row['title'].'" slink="'.Url::log($row['gid']).'" /></div>';
                        //最后打印出数据,由于当前代码的位置是在while的循环体,因此会循环$num条数据
			echo $data;
		}
}?>

    如上代码即为我们的幻灯片的数据,下面将如上代码中包含的两个函数$picthumb()和pic_thumb()的代码附带上,这两个函数分别是获取日志附件图片的单数和获取文章中图片链接的函数。这两个函数代码同样是放在Emlog模板目录的module.php中。

<?php
//get thumbs(获取附件图片)
function picthumb($blogid) {
    $db = MySql::getInstance();
    $sql = "SELECT * FROM ".DB_PREFIX."attachment WHERE blogid=".$blogid." AND (`filepath` LIKE '%jpg' OR `filepath` LIKE '%gif' OR `filepath` LIKE '%png') ORDER BY `aid` ASC LIMIT 0,1";
//    die($sql);
	$imgs = $db->query($sql);
    while($row = $db->fetch_array($imgs)){
	        $pict.= ''.BLOG_URL.substr($row['filepath'],3,strlen($row['filepath'])).'';
    }
    return $pict;
}
?>
<?php
//get thumbs(获取图片链接)
function pic_thumb($content){
    //preg_match_all全局匹配content中的图片地址,并存入$img变量
    preg_match_all("|<img[^>]+src=\"([^>\"]+)\"?[^>]*>|is", $content, $img);
    //当图片存在时,获取第一张图片,地址保存在$imgsrc中
    $imgsrc = !empty($img[1]) ? $img[1][0] : '';
	if($imgsrc):
		return $imgsrc;
	endif;
}
?>

步骤四:至此,我们的功能在理论上已经实现,接下来进行梳理。

        1.调用jquery库文件和幻灯片(saySlide)本身的js文件。如下代码为当前模板目录下面的js文件下的两个js文件,这两行代码写在模板文件header.php的<head>与</head>之间(路径务必写正确)。

<script type="text/javascript" src="<?php echo TEMPLATE_URL; ?>js/jquery.min.js" language="javascript"></script>
<script type="text/javascript" src="<?php echo TEMPLATE_URL; ?>js/jquery.saySlide.js" language="javascript"></script>

        2.引用了js库文件以后就是将该幻灯片插件的使用代码写在模板文件的任何你所设计的位置。

1 <div id=”saySlide” style=”width:400px;overflow:hidden;”>
2     <!–下面的数据替换成调用我们数据获取函数–>
3     <?php get_flash_data(10); ?>
4 </div>
5 <script>
6 //如下参数的填写方法在saySlide幻灯片插件的分享文章中有详细说明
7 $(“#saySlide”).saySlide({isTitle:true,isBottombg:true,autodir:’left’,autoTime:3000,isLink:true});
8 </script>

 

OK,至此,大功告成!【前往saySlide幻灯片插件分享页面获取该幻灯片代码

补充:使用数据调用插件实现获取幻灯片图片数据的方法:

根据上面所述的saySlide插件的数据格式:

<div><img src=”图片地址1″ stitle=”标题名1″ slink=”链接地址1″ /></div>

     我们可以这样设置“数据调用”插件:
给Emlog添加JS幻灯片功能的方法 - 第1张  | 心岛博客

    最后只需将如图中“内部调用方法”写成如下形式放在幻灯片插件的数据位置:

<div id="saySlide" style="width:400px;overflow:hidden;">
    <!--下面的数据替换成调用我们数据获取函数-->
    <!--注意里面的数字,你的不一定是5-->
     <?php kl_data_call_for_internal(5); ?>
</div>
<script>//如下参数的填写方法在saySlide幻灯片插件的分享文章中有详细说明
$("#saySlide").saySlide({isTitle:true,isBottombg:true,autodir:'left',autoTime:3000,isLink:true});
</script>

最后编辑:
作者:xindao
这个作者貌似有点懒,什么都没有留下。

给Emlog添加JS幻灯片功能的方法》有 16 条评论

留下一个回复

你的email不会被公开。