通过CSS定义控制Flickr的显示效果

01/10/2005

通过CSS定义控制Flickr的显示效果

Post @ 11:15 in 样式设计 - CSS

Flickr提供了一个叫Flickr Badge的功能，通过嵌入javascript将Flickr中的图片方便的显示在自己的Blog或网站上。这也是Blogger们喜欢的功能，不过Flickr默认的几种显示效果都不太好，我通过CSS重新进行了定义，缩小了图片显示的尺寸并增加了半透明效果，设置如下：（效果见下面）。

首先在Flickr Badge获得javascript代码并添加到页面html中，并添加CSS DIV "flickrimg"：（注意：下面的代码设置图片显示数目为8，raw=1）

在CSS文件中添加对"flickrimg"的定义：

div.flickrimg {
margin: 10px;
}

div.flickrimg a {
float: left;
padding: 0;
margin: 0 5px 5px 0;
opacity: .5;
}

div.flickrimg a:hover {
opacity: 1;
border: none;
}

div.flickrimg a img {
height: 40px;
width: 40px;
}

其中"div.flickrimg"控制容器的位置，边距，"div.flickring a img"控制图片大小。可根据自己的需要修改。按照上面的方法便能随心所欲的控制Flickr显示效果和半透明效果，效果如下：

14 Comments

1 | Comment from Jansen on January 11, 2005 07:45 AM

有趣，這方法的確好用。

2 | Comment from owen on January 11, 2005 08:14 AM

还需要修改一下，令半透明效果可以正确在IE上显示

3 | Comment from Chiu Yung on January 11, 2005 08:44 AM

请教owen，在css定义div的class，好像不需要用div带头吧，即 div.flickrimg { margin: 10px; } 跟 .flickrimg { margin: 10px; } 应该是一样的吧，还是有所区别？

4 | Comment from owen on January 11, 2005 08:50 AM

Chiu Yung, 两者是有区别的，你提到的两种写法效果有时候是相同的，不过Div class表示的是层次结构，而.class表示的属性（property），如果遇到和上层或下层div有附属或连带关系的定义时，.class就会出现问题。

5 | Comment from Chiu Yung on January 11, 2005 09:43 PM

Owen, 谢谢你的解释。

另外，在firefox里（不知道你是否使用），url地址不能自动换行。比如你这篇文章中的 src=”http://www.flickr.com/badge_code.gne?nsid=44124380209@N01&count=8&display=latest&name=0&size=square&raw=1”> 只能显示长长的一条。在IE里没有这个问题。我的blog中的referrers url地址总是这个样子，用firefox浏览很不好看。有没有办法解决这个问题？

不好意思，让你成了答疑专家:-)

6 | Comment from owen on January 12, 2005 02:23 PM

Chiu Yung,　我平时用mac，上面没有IE。

你提到的这个问题我解决不了，:(… 这是IE对CSS支持的不兼容问题，CSS中的ID，Class在解析时没有被IE正确优化，所以在IE中过长的link就会把页面破坏。最主要是对width的解析。

所以在非必要情况下都不放原始Link，而通过HTML来代替。在上面的文章主要是为了显示原始代码，不得已而为之，如果你在平时如果也碰到类似情况必须放上代码，除了通过〈blockquote〉外，还可以使用〈textarea〉〈/textarea〉来解决

7 | Comment from shunz on January 13, 2005 11:17 PM

to Chiu Yung: 可以用 overflow:auto; 来解决你的问题。

8 | Comment from xpoint on January 15, 2005 02:35 AM

Owen word-break:break-all; 这样也不行么？

9 | Comment from guoshuang on February 3, 2005 02:22 AM

firefox 将会解决这个问题，css 3 会添加这个ＩＥ特有属性．目前只能　　overflow-x:hidden 隐藏或者手工强制换行

10 | Comment from xuexue on February 22, 2005 01:09 AM

你好！有个问题想请教一下，如何badge某个TAG下的所有pic呢？或者我用flickr里边blog图片的功能，如何一次blog多张呢？谢谢啊！ ps：很喜欢看你的blog！both en and chn

11 | Comment from 原朴 on May 2, 2005 09:02 PM

Owen你好,根据你的指南我已经把Flickr Photo添加到了我的博客上,基本上正常,但有个问题,图片边框颜色及宽度好象不怎么受控制,我是从事GraphicsDesign的,对HTML及CSS不是很熟,希望得到解答,可访问:http://yuanpu.blogerhome.com

12 | Comment from nirvana on July 7, 2005 10:45 AM

在firefox里无法改变代码啊

13 | Comment from nirvana on July 7, 2005 11:43 AM

我添加到blogchina,可是只显示图像占位框却没有图像，另外，我该怎么设置blogthis中的自己的blog，比如blogchina,谢谢

This Info:	Remember Forget after I post
Name:
Email:
URL:
Comment:

01/10/2005