Skip to content. | Skip to navigation

Personal tools

Navigation

You are here: Home / Tips / Photo Gallery

Photo Gallery

與 Carousel, Slider, Popup Window 有關的模組與技巧

Plone4 uses the ultra-lightweight jQuery Tools set for basic UI Swiper

jQuery Example

$(document).ready(function () {
  $("#OpenDialog").click(function () {
    var w = window.open("", "popupWindow", "width=600, height=400, scrollbars=yes");
    var $w = $(w.document.body);
    $w.html("<textarea></textarea>");
  });
});

Pop-up Image Caption Transform plone.outputfilters

Responsive Photo Grid App JCrop init timing/call

Carousel

Responsive Full Width jQuery: Sleek Slider Text n Roll Theme quintagroup.slidertemplates

jQuery Photo Overlapping Portrait Book HTML5 Canvas 3D Rotational 3D Fancy Thumbnail Slider Front and Back Sides Clothing/Artwork/Snippet Details

collective.js.jcarousel ps.plone.fotorama collective.easyslider

collective.carousel collective.carouselbehaviour

collective.cover 實作 Carousel Tile collective.portlet.fullview example

collective.carousel 相依 plone.app.jquerytools 並用到 plugins.js 的 Scrollable 特效。

<browser:viewlet
  name="plone.carousel"
  for="*"
  view="plone.app.layout.globals.interfaces.IViewView"
  manager="plone.app.layout.viewlets.interfaces.IAboveContent"
  class=".viewlets.CarouselViewlet"
  permission="zope2.View"
  layer="collective.carousel.interfaces.ICollectiveCarouselLayer" />
# plone.app.jquerytools/configure.zcml
<resource
  name="plone.app.jquerytools.plugins.js"
  file="browser/jquery.tools.plugins.min.js" />

# collective.carousel/profiles/default/jsregistry.xml
++resource++plone.app.jquerytools.plugins.js
++resource++collective.carousel/carousel.js

# collective.carousel/profiles/default/cssregistry.xml
++resource++collective.carousel/carousel.css

Plone5

isotope Masonry Grid Slider

HTML5 Grid Slider 書本對齊下方

jQuery isotope sort filter

Infinite Scrolling

collective.z3cform.widgets MultiContentSearchFieldWidget

collective.plonetruegallery

試用迄今認為 Plone True Gallery 是最完整的模組,2016/08 測試發現 Google PicasaWeb Photo 不再支援了。

Got z3c.form 2.3.2

Error: There is a version conflict.

We already have: z3c.form 2.3.2

but pone.app.discussion 2.0.11 requires 'z3c.form>=2.3.3'.

plone.app.contenttypes fix

collective.ptg.galleria 建議使用 1.2 版本以上。

2014/12/26 同時安裝 collective.prettyphoto 的情況下,啟用 plone.app.contenttypes 後,沒有馬上顯示 Gallery View 選項。改試單獨安裝並不啟用,則正常,但啟用 plone.app.contenttypes 後,顯示又會錯誤,檢查 portal_types/Folder 的 Available view methods 並沒有出現 galleryview 設定值,手動補上也無效,判斷是 Browser View 未針對 Dexterity Content 處理。

變通方式是修改 collective/plonetruegallery/browser/views/configure.zcml 內容,再到 ZMI 把特定目錄的 Interface 勾選 IGallery 並生效:

     <browser:page
            zcml:condition="have plone-4"
-           for="collective.plonetruegallery.interfaces.IGallery"
+           for="plone.app.contenttypes.interfaces.IFolder"
            name="galleryview"
            class=".galleryview.GalleryView"
            template="templates/layout.pt"
            permission="zope2.View" />

zcml:condition="installed plone.app.contenttypes"

AttributeError: UID

In dexterity the collections do no longer expose the getRawQuery function

collective.prettyphoto

2014/12/26 試裝遇到 AttributeError: tag 錯誤,skins/collective_prettyphoto/prettyPhoto_album_view.pt 第51行

image.tag(scale='thumb')