`
xxj
  • 浏览: 426609 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

让你的相册炫起来

阅读更多
首先,请先浏览http://www.piclens.com/,安装Firefox或IE的插件

默认已经支持了很多的网站。


怎么使用?
http://www.piclens.com/site/firefox/tutorial_pl_ff.php

看完之后也许你也会和我有一样的想法,我能不能给自己的网站上加上呢? 我们每个会员都有自己的 JavaEye的相册的?

很幸运,目前PicLens已经提供相应的支持。
http://piclens.com/lite/webmasterguide.php

文档已经很详细了,这个没啥好说的,这也不是我们今天要说的重点。我们的目的是新建个插件,让其他的用户不需要再过问这些繁琐的东西,直接拿来用就行了。


=============================不想看过程,直接跳到下个分割线=================================

新建插件
ruby script/generate plugin pic_lens_lite_helper


这里主要的就是图片的rss,参照piclens上的文档,uuid和link是必须的,这个难不倒我们,一个builder而已。

module PicLensLiteHelper
    module ActionController
        def piclens_rss(photos=[], options={})
            xml = Builder::XmlMarkup.new(:indent =>2)
            xml.instruct! :xml, :version=>"1.0", :encoding=>"UTF-8", :standalone=>"yes"
            xml.rss 'version'=>'2.0', 'xmlns:media' => 'http://search.yahoo.com/mrss' do
                xml.channel do
                    xml.title  options[:title]||''
                    xml.link  options[:link]||''
                    xml.description  options[:description]||''
                    photos.each do |photo|
                        xml.item do
                            xml.title  photo.title if photo.respond_to?(:title)
                            xml.link   photo.link #必须的参数
                            xml.guid   UUID.random_create.to_s
                            xml.media  :thumbnail, :url=>photo.thumbnail  if photo.respond_to?(:thumbnail)
                            xml.media  :content,   :url=>photo.url  if photo.respond_to?(:url)
                        end
                    end

                    yield xml if block_given?
                end
            end
        end

        def render_piclens_rss_for(photos=[], options={})
            render :text=> piclens_rss(photos, options), :content_type => Mime::XML
        end
    end

    module ActionView
        #一个helper而已,代码有点丑,呵呵
        def piclens_includes(url, options={})
            if options[:local]
                %Q{<link rel="alternate" href="#{url}" type="application/rss+xml" title="" id="gallery"/>
                  <script type="text/javascript" src="/javascripts/piclens.js"/>}
            else
                %Q{<link rel="alternate" href="#{url}" type="application/rss+xml" title="" id="gallery"/>
                <script type="text/javascript" src="http://lite.piclens.com/current/piclens.js"/>}
            end
        end
    end
end


include 这两个方法
ActionView::Base.send :include, PicLensLiteHelper::ActionView
ActionController::Base.send :include, PicLensLiteHelper::ActionController


=============================不想看演示,直接跳到下个分割线=================================
使用之。。。。

rails pic_lens_lite_demo


安装插件
ruby script/plugin install http://martinx.googlecode.com/svn/trunk/plugins/pic_lens_lite_helper


新建model:photo
ruby script/generate scaffold photo title:string link:string thumbnail:string url:string



添加 PiclensLite js和 所照片的 rss feed
 <%= piclens_includes formatted_photos_path(:rss)%>


同时我们还提供了一个本地js,已防止用户无法连接piclens.com的网站。执行
rake picslen:install

将js拷贝至public/javascripts目录下。

将上面的代码修改成
<%= piclens_includes formatted_photos_path(:rss), :local=>true %>


好了,最后一步生成piclens需要的rss
        @photos = Photo.find(:all)

        respond_to do |format|
            format.html # index.html.erb
            format.xml  { render :xml => @photos }
            format.rss  { render_piclens_rss_for @photos}
        end


如何基于已有的model上使用呢
最简单,偷懒的方法:定义一个link 函数即可
Someodle <AR
   def link
      "" #这里给出图片的具体路径即可,譬如"/static/images/#{self.image}" etc.
   end
end


更多功能
def thumbnail;end #缩微图
def title;end     #图片标题 


===============================================================================
完整的文件请下载附件

Env:
  rails 2.0
  sqlite3
分享到:
评论

相关推荐

    ( Android 炫酷相册源码

    8. **自定义Adapter**:为了将图片数据绑定到GridView或RecyclerView,需要创建自定义的Adapter类,将图片信息与视图元素关联起来。 9. **性能优化**:考虑到图片可能很多,源码中可能会包含一些性能优化策略,比如...

    炫丽相册JavaScript效果

    4. **动画效果**:为了让相册看起来更炫丽,我们可以使用CSS3动画或JavaScript的`setTimeout`和`setInterval`来实现过渡效果,如淡入淡出、平滑滚动等。 5. **响应式设计**:为了确保在不同设备和屏幕尺寸上都能...

    《3D动态旋转相册--超级炫酷》

    “酷炫”一词则意味着设计上可能包含了流行的设计趋势和动态效果,比如过渡动画、视差滚动、光影效果等,这些都能提升用户体验,使相册看起来更加吸引人。 在提供的压缩包文件“3d旋转相册”中,可能包含以下内容:...

    炫酷旋转相册---七夕表白相册.rar

    在"3d自转相册"中,CSS可能被用来实现相册的3D旋转效果,调整图片的大小、位置、颜色,以及动画效果,使相册看起来更炫酷。 3. **JavaScript**:JavaScript是一种客户端脚本语言,用于实现网页的交互功能。在这个...

    MTV电子相册破解版

    MTV电子相册破解版,让你的相册炫起来,很好的相册和音乐结合软件

    Away3d+as3dmod超炫3D相册

    【Away3d+as3dmod超炫3D相册】是一种基于ActionScript 3.0(As3.0)的3D图形渲染技术,结合Away3d库和as3dmod模块,创造出立体感超强的3D环形相册效果。这个项目展示了如何在Web上实现动态、互动的三维图像展示,给...

    google 便签 很炫 相册

    这种设计通常使得相册看起来更加生动有趣,能够以一种互动的方式展示个人或集体的照片记忆。 描述中提到的“便签式的相片展示”,意味着这种相册功能将照片以类似便签的形式展现,每个照片可能被设计成便签的样式,...

    Android 炫酷相册源码.zip

    通过阅读和分析源码,开发者可以直接看到如何将设计模式、编程原则和框架API有效地结合起来。例如,这个炫酷相册可能使用了RecyclerView来展示图片列表,结合自定义适配器和动画效果,实现了流畅的用户体验。源码还...

    Android 炫酷相册源码.rar

    4. **手势识别与动画效果**: 为了让相册看起来“炫酷”,源码可能涉及到手势识别(如滑动、缩放)以及过渡动画。这可能包括Android的MotionLayout或者自定义动画效果。 5. **权限管理**: 在Android中访问媒体库需要...

    HTML5制作的3D相册

    例如,CSS3的转换(transform)和动画(animation)属性用于控制相册中图片的移动、缩放和旋转,以及过渡效果,使得相册看起来更加平滑和自然。 3. **JavaScript和框架**:为了实现3D效果,项目可能使用了...

    Flash相册特效.zip

    通过ActionScript,开发者可以创建动态的、交互式的用户界面,使静态的图片库变得生动起来。这个"Flash相册特效.zip"文件可能包含了一系列的ActionScript源代码,以及相关的图形资源和配置文件,用于构建一个完整的...

    Android源码——炫酷相册源码.zip

    GridView适合等宽等高的图片展示,而瀑布流布局则更适合不同比例的图片,能够自动调整列宽,使布局看起来更美观。 5. 图片缩放与手势操作 为了让用户可以放大缩小图片,源码可能实现了图片的缩放功能,并支持双指...

    CSS实现的3D相册

    - 为了让3D相册在不同设备和屏幕尺寸上都能正常显示,需要应用响应式设计原则,如媒体查询(`media queries`)来调整布局和样式。 8. 浏览器兼容性: - CSS3的3D特性在现代浏览器中支持较好,但在旧版本或非主流...

    纯css实现炫酷抖音女友3D旋转相册特效.zip

    在【压缩包子文件的文件名称列表】中,"使用须知.txt"可能是包含如何部署或使用这个3D相册特效的指南,而"132689969129719283"看起来像是一个随机生成的文件名,可能是CSS代码、HTML模板或者是示例图片文件。...

    旋转相册纯前端模版,支持背景音乐

    "炫酷相册"则强调了模版的设计风格,它可能包括独特的过渡效果、动态的图层叠加、以及各种视觉特效,这些都可以让相册看起来更加现代和时尚。对于前端开发者来说,实现这些效果可能涉及到CSS3的动画、变换和过渡属性...

    动态流星雨旋转相册,演示地址https://yangtao.love/photo/

    【动态流星雨旋转相册网页】—— 让你的照片像流星一样闪耀! 嘿,你是不是厌倦了传统的相册方式?想要为你的照片增添一些炫酷的效果吗?那么,不要再犹豫了!我们为你带来了全新的动态流星雨旋转相册网页! 这个...

    家庭VCD相册制作系统

    让《家庭VCD相册制作系统》来帮您把它们恢复活力吧,它能在短时间内让您的电子相片变得井然有序,既不会占据硬盘大量的空间还能配上动听的背景音乐和超炫的转换效果随意在电脑、电视上播放,让您的记忆流动起来。...

    0顶jquery相册代码

    4. **更多广告代码尽在阿里西西.url**:这看起来是一个链接,指向一个可能提供额外资源或广告代码的网站,但与相册代码本身关系不大。 5. **css**:这是一个文件夹,包含了项目的CSS样式文件,用于定义相册及其组件...

    收集很久的炫酷JS +CSS 特效代码(登陆 注册 按钮 导航 抽奖 动画相册 等)

    JS可以实时验证用户输入,提供错误提示,而CSS可使界面看起来更美观,如输入框聚焦效果、按钮悬停动画等。 3. **按钮特效**:JS可以实现按钮的点击反馈、加载状态、计时器等功能,CSS则可以制作按钮的过渡效果、...

    html+css制作3d旋转动态相册

    为了让相册更具有互动性,你可能还会接触到JavaScript或者jQuery,它们可以用来添加更多的交互功能,如点击切换图片、添加动态加载效果等。不过,根据描述,这个项目可能主要依赖于HTML和CSS,所以初学者不用担心...

Global site tag (gtag.js) - Google Analytics