如何让采集来的文章内容里的第一张图作为缩略图[复制链接]


  

Rank: 7Rank: 7Rank: 7

火车车厢
10 节
活跃度
86 点
注册时间
2006-6-7
帖子
54
UID
3139
跳转到指定楼层
1
发表于 2010-9-21 16:56:16 | 只看该作者 | 倒序浏览
采集发布到phpcms的文章里有图片,虽然开启了“是否获取内容第一张图片作为标题图片”,但是缩略图那块还是空的
大家怎么解决的?
分享分享0 收藏收藏0 转发到微博
 

举报

  

Rank: 7Rank: 7Rank: 7

火车车厢
10 节
活跃度
86 点
注册时间
2006-6-7
帖子
54
UID
3139
2
发表于 2010-9-21 18:15:28 | 只看该作者
解决了。。。

简单的说就是不要让火车头下载图片,勾选“将相对地址补全为绝对地址”。
确定phpcms开启了“是否获取内容第一张图片作为标题图片”
这样利用phpcms本身的远程图片本地化功能,就能获得缩略图。
 

举报

  

Rank: 6Rank: 6

火车车厢
0 节
活跃度
89 点
注册时间
2009-3-1
帖子
41
UID
108401
3
发表于 2010-9-23 17:46:31 | 只看该作者
解决了。。。

简单的说就是不要让火车头下载图片,勾选“将相对地址补全为绝对地址”。
确定phpcms开启 ...
hotwow 发表于 2010-9-21 18:15



    这样的话,图片还是在源网站的服务器上吧,只是远程读取了这个图片而已,是不是这样
 

举报

  

Rank: 7Rank: 7Rank: 7

火车车厢
10 节
活跃度
86 点
注册时间
2006-6-7
帖子
54
UID
3139
4
发表于 2010-9-23 18:56:22 | 只看该作者
图片会自动保存到服务器上
 

举报

  

Rank: 5Rank: 5

火车车厢
43 节
活跃度
152 点
注册时间
2008-2-24
帖子
97
UID
80547
5
发表于 2010-10-13 01:30:34 | 只看该作者
将相对地址补全为绝对地址

这个在哪设置的?
 

举报

  

Rank: 7Rank: 7Rank: 7

火车车厢
10 节
活跃度
86 点
注册时间
2006-6-7
帖子
54
UID
3139
6
发表于 2010-10-13 20:30:50 | 只看该作者
内容页标签编辑框里

以下是一个基本的jQuery轮播示例,包括一个大和五张缩略图: HTML代码: ```html <div class="slider-wrapper"> <div class="slider"> <div class="slide"><img src="image1.jpg"></div> <div class="slide"><img src="image2.jpg"></div> <div class="slide"><img src="image3.jpg"></div> <div class="slide"><img src="image4.jpg"></div> <div class="slide"><img src="image5.jpg"></div> <div class="slide"><img src="image6.jpg"></div> <div class="slide"><img src="image7.jpg"></div> <div class="slide"><img src="image8.jpg"></div> </div> <div class="thumbnail-wrapper"> <div class="thumbnail"><img src="image1.jpg"></div> <div class="thumbnail"><img src="image2.jpg"></div> <div class="thumbnail"><img src="image3.jpg"></div> <div class="thumbnail"><img src="image4.jpg"></div> <div class="thumbnail"><img src="image5.jpg"></div> </div> </div> ``` CSS代码: ```css .slider-wrapper { position: relative; width: 800px; height: 500px; } .slider { position: absolute; top: 0; left: 0; width: 800px; height: 500px; } .slide { position: absolute; top: 0; left: 0; width: 800px; height: 500px; display: none; } .slide:first-child { display: block; } .thumbnail-wrapper { position: absolute; bottom: 0; left: 0; width: 800px; height: 100px; background-color: #ccc; } .thumbnail { float: left; width: 20%; height: 100px; cursor: pointer; } .thumbnail img { display: block; max-width: 100%; max-height: 100%; margin: 0 auto; } ``` jQuery代码: ```javascript $(document).ready(function() { var slider = $(".slider"); var slides = slider.find(".slide"); var thumbnails = $(".thumbnail-wrapper").find(".thumbnail"); var currentSlide = 0; var autoPlay = true; var autoPlayInterval = 5000; function showSlide(index) { if (index >= slides.length) { index = 0; } else if (index < 0) { index = slides.length - 1; } slides.hide(); slides.eq(index).fadeIn(); thumbnails.removeClass("active"); thumbnails.eq(index).addClass("active"); currentSlide = index; } function autoPlaySlides() { if (autoPlay) { showSlide(currentSlide + 1); } } thumbnails.click(function() { var index = $(this).index(); showSlide(index); autoPlay = false; }); $(".prev-btn").click(function() { showSlide(currentSlide - 1); autoPlay = false; }); $(".next-btn").click(function() { showSlide(currentSlide + 1); autoPlay = false; }); setInterval(autoPlaySlides, autoPlayInterval); }); ``` 说明: 1. HTML代码中,轮播的大缩略图都放在一个包装器(`slider-wrapper`)中,大使用`slider`类,缩略图使用`thumbnail-wrapper`类。 2. CSS代码中,大缩略图都使用绝对定位进行布局,大中每个片都使用`slide`类,其中第一张片默认显示,缩略图中每个片都使用`thumbnail`类,使用`float`进行布局。 3. jQuery代码中,使用`showSlide`函数显示指定的片,该函数接受一个参数,即要显示的片的索引,如果索引超出了片的范围,会自动循环。 4. 缩略图的点击事件会调用`showSlide`函数,并将`autoPlay`变量设置为`false`,停止自动播放。 5. 上一张和下一张按钮的点击事件同样会调用`showSlide`函数,并将`autoPlay`变量设置为`false`,停止自动播放。 6. 使用`setInterval`函数每隔一段时间自动播放轮播,调用`autoPlaySlides`函数,该函数会判断`autoPlay`变量是否为`true`,如果是则自动播放下一张片。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值