Permalink
Browse files

Initial integration of c.js.galleria

  • Loading branch information...
1 parent 9a8a7a4 commit 1e4690d59e1b50caf030ef6143eb47e9e6d1802d @davilima6 davilima6 committed with jpgimenez Jan 10, 2013
View
@@ -47,6 +47,7 @@
'setuptools',
'Pillow',
'Products.CMFPlone>=4.2',
+ 'collective.js.galleria',
'collective.js.jqueryui',
'collective.prettydate>=1.1',
'collective.z3cform.widgets',
@@ -5,6 +5,7 @@
<dependency>profile-plone.app.dexterity:default</dependency>
<dependency>profile-plone.app.registry:default</dependency>
<dependency>profile-collective.js.jqueryui:default</dependency>
+ <dependency>profile-collective.js.galleria:default</dependency>
<dependency>profile-collective.z3cform.widgets:default</dependency>
</dependencies>
</metadata>
@@ -8,37 +8,40 @@
<body>
<metal:main fill-slot="content-core">
+
<tal:content-core metal:define-macro="content-core">
+
<div class="mediaview">
<metal:mediamacro define-macro="media-box">
- <div id="mediabox" tal:define="images view/get_images" tal:condition="images">
- <div id="images">
- <div class="items">
- <tal:lines repeat="item images">
- <div tal:define="item_obj item/getObject">
- <div>
- <img tal:replace="structure python: item_obj.getImage().tag(scale='preview', css_class='media-image')" src="" alt="" />
- <div class="info" tal:condition="item_obj/Description|nothing">
- <p tal:content="item_obj/Description">Image Caption</p>
- </div>
- </div>
- </div>
- </tal:lines>
- </div>
- </div>
-
- <!-- prev/next buttons -->
- <div class="navibuttons" metal:define-slot="navi">
- <metal:navi define-macro="navi">
- <div class="navi prev"></div>
- <div class="navi next"></div>
- </metal:navi>
- </div>
- <div class="close" href="#"> &nbsp; &nbsp; &nbsp; </div>
-
+ <div id="mediabox"
+ tal:define="images view/get_images"
+ tal:condition="images">
+ <tal:items repeat="item images">
+ <a tal:define="item_obj item/getObject;
+ item_data python:{'data-title': item.Title, 'data-description': item.Description}"
+ tal:attributes="href python:item_obj.getImage().absolute_url() + '/image_large'">
+ <img tal:replace="structure python:item_obj.getImage().tag(scale='thumb', css_class='media-image', **item_data)" />
+ </a>
+ </tal:items>
<div class="visualClear"><!-- --></div>
-
</div>
+ <link rel="stylesheet" type="text/css"
+ tal:attributes="href string:${context/@@plone_portal_state/portal_url}/++resource++collective.galleria.classic.css" />
+ <script type="text/javascript">
+ Galleria.loadTheme("++resource++collective.galleria.classic.js");
+ Galleria.configure({lightbox: true, wait: true});
+ Galleria.run("#mediabox");
+ $(".newsview").hide();
+ (function($) {
+ "use strict";
+ $(document).ready(function() {
+ $("#parent-fieldname-image").click(function(e) {
+ $("#mediabox").overlay();
+ e.preventDefault();
+ });
+ });
+ })(jQuery);
+ </script>
</metal:mediamacro>
</div>
@@ -60,6 +63,7 @@
</fieldset>
</tal:content-core>
+
</metal:main>
</body>
@@ -5,75 +5,84 @@
lang="en"
metal:use-macro="context/main_template/macros/master"
i18n:domain="collective.nitf">
-<body>
-
-<div tal:replace="structure provider:plone.abovecontenttitle" />
-<metal:title fill-slot="content-title">
- <tal:content-title metal:define-macro="content-title">
- <h1 class="documentFirstHeading" tal:content="context/title" />
-
- <h2 class="nitfSubtitle" tal:content="context/subtitle" />
-
- </tal:content-title>
-</metal:title>
-<metal:description fill-slot="content-description">
- <tal:content-description metal:define-macro="content-description">
+<head>
+ <metal:block fill-slot="style_slot">
+ <style>
+ .newsview { display: none; }
+ #mediabox { height: 500px; width: 500px; }</style>
+ </metal:block>
+</head>
- <div class="documentDescription" tal:content="context/description" />
+<body>
- <p class="nitfByline" tal:condition="context/byline|nothing">
- <span i18n:translate="">By</span>
- <span tal:content="context/byline" />
- </p>
+ <div tal:replace="structure provider:plone.abovecontenttitle" />
- </tal:content-description>
-</metal:description>
+ <metal:title fill-slot="content-title">
+ <tal:content-title metal:define-macro="content-title">
+ <h1 class="documentFirstHeading" tal:content="context/title" />
+ <h2 class="nitfSubtitle" tal:content="context/subtitle" />
+ </tal:content-title>
+ </metal:title>
-<metal:main fill-slot="content-core">
- <tal:content-core metal:define-macro="content-core">
- <div class="newsImageContainer" tal:define="image view/getImage" tal:condition="image">
- <a href="#mediabox" id="parent-fieldname-image">
- <img tal:replace="structure python: image.tag(scale='mini', css_class='newsImage nitf')" src="" alt="" />
- </a>
- <p class="discreet" tal:condition="view/imageCaption|nothing"
- tal:content="view/imageCaption">
- Image Caption
+ <metal:description fill-slot="content-description">
+ <tal:content-description metal:define-macro="content-description">
+ <div class="documentDescription" tal:content="context/description" />
+ <p class="nitfByline" tal:condition="context/byline|nothing">
+ <span i18n:translate="">By</span>
+ <span tal:content="context/byline" />
</p>
- </div>
+ </tal:content-description>
+ </metal:description>
- <div tal:content="structure context/text/output|nothing" />
+ <metal:main fill-slot="content-core">
+ <tal:content-core metal:define-macro="content-core">
+ <div class="newsImageContainer"
+ tal:define="image view/getImage"
+ tal:condition="image">
+ <a href="#mediabox" id="parent-fieldname-image">
+ <img src="" alt=""
+ tal:replace="structure python: image.tag(scale='mini', css_class='newsImage nitf')" /></a>
+ <p class="discreet"
+ tal:condition="view/imageCaption|nothing"
+ tal:content="view/imageCaption">
+ Image Caption
+ </p>
+ </div>
- <fieldset id="related-items" tal:condition="context/relatedItems|nothing">
- <legend i18n:translate="">Related items</legend>
- <tal:relateditems tal:content="structure view/w/relatedItems/render" />
- </fieldset>
+ <div tal:content="structure context/text/output|nothing" />
- <fieldset id="folder-listing">
- <legend i18n:translate="">Contents</legend>
- <tal:block define="listing_macro context/folder_listing/macros/listing;
- contentFilter python:{'portal_type': ['File', 'Link']}">
- <metal:use_macro use-macro="listing_macro">
- <metal:nocontent fill-slot="no_items_in_listing">
- <p class="discreet"
- tal:condition="not: folderContents"
- i18n:domain="plone" i18n:translate="description_no_items_in_folder">
- There are currently no items in this folder.
- </p>
- </metal:nocontent>
- </metal:use_macro>
- </tal:block>
- </fieldset>
+ <fieldset id="related-items" tal:condition="context/relatedItems|nothing">
+ <legend i18n:translate="">Related items</legend>
+ <tal:relateditems tal:content="structure view/w/relatedItems/render" />
+ </fieldset>
- <div class="newsview">
- <div id="mediabox" metal:use-macro="context/@@display_macros/macros/media-box">
- <metal:navi fill-slot="navi">
- <metal:buttons use-macro="context/@@display_macros/macros/navi" />
- </metal:navi>
+ <fieldset id="folder-listing">
+ <legend i18n:translate="">Contents</legend>
+ <tal:block define="listing_macro context/folder_listing/macros/listing;
+ contentFilter python:{'portal_type': ['File', 'Link']}">
+ <metal:use_macro use-macro="listing_macro">
+ <metal:nocontent fill-slot="no_items_in_listing">
+ <p class="discreet"
+ tal:condition="not: folderContents"
+ i18n:domain="plone"
+ i18n:translate="description_no_items_in_folder">
+ There are currently no items in this folder.
+ </p>
+ </metal:nocontent>
+ </metal:use_macro>
+ </tal:block>
+ </fieldset>
+
+ <div class="newsview">
+ <div id="mediabox"
+ metal:use-macro="context/@@display_macros/macros/media-box" />
</div>
- </div>
- </tal:content-core>
-</metal:main>
+ </tal:content-core>
+
+ </metal:main>
+
</body>
+
</html>

0 comments on commit 1e4690d

Please sign in to comment.