Forums / Developer / Image gallery: How to accomplish this?

Image gallery: How to accomplish this?

Author Message

Shurbann Martes

Sunday 28 September 2003 10:32:11 am

Hello,
I'm trying to implement a image gallerie into eZ, but this is the problem I have:

Imagine I have 12 pictures, and I want to show the thumbnails in a 3x3 matrix that means I have two "pages" (one with 9, the other with 3 thumbnails)

If someone click on picture I want them to see the original picture and the sequence of 9 pictures-thumbnails it belongs to.
Anyone can point me in the right directions?

Greets,
Shurbann

mikle mikle

Monday 29 September 2003 1:52:53 am

First change your big picture template to make it show small thumbnails trail after big picture (this is rather simple), second step - in order to make pagecounters work - change template to fetch child data not from current node of the object (picture), but from it's parent, i have the template someplace if you need i can publish it here
Regards, Michael

Shurbann Martes

Monday 29 September 2003 2:01:45 am

Hello,

It sounds rather simple indeed but:
I want to show the same set of 9 pictures on my 3x3 matrix. So if picture 3 is shown, I dont want to show 3 to 12, but the set it belongs 1 to 10.

Is this what you're telling me?
Could you post the template, but if it is too long e-mail it to me.
Thank you very much.

Shurbann
shurbann[at]hotmail[dot]com
[at] = @
[dot]=.

Zinistry Vacana

Tuesday 30 September 2003 5:35:54 am

But what about 11 and 12?

just fetch data from the pics node, and make a line template which shows 3x3 pics, with a next button if more pics than 9 exists, and in full view of the pics, add a link with link to the obj-id of the other pics (check out previos and next in search f.ex

:)

Shurbann Martes

Tuesday 30 September 2003 7:01:26 am

Ok I understand all the above, but how do I know this object/pictures position in the array of available objects/pictures.

Because the position is crucial to know which set of 9 objects/pictures to show:

fetch picture sort by event
if pic[object] pos = 5 show in linetemplate 1 - 9
if pic[object] pos = 18 show in line template 10 - 18

I already took a look at the array handling oprators, but I cant see an operator that accomplish this.

Thank you,
Shurbann

mikle mikle

Tuesday 30 September 2003 8:47:35 pm

Yes, exactly what i did - it was the problem for me - when i click an image the gallery showed images from 1 to 9 for example, the trick i gave above gives the idea - you don't need to deal with any array structures ( actualy i was triyng to implemet this with fetching the current picture's pozition in the gallery, but didn't find way how to do this), so here is a template - it is just remake of standard full.tpl, the main change is fetching list data from parent object rather then from current one, also one more thing - for links make correct offset addition - just add current offset) for exapmle
<a href={concat('content/view/full/',$Child:item.node_id,'/offset/',$view_parameters.offset)|ezurl}>

Then it will be only one strange thing - when you will list pages your current page will be the same ( i mean the big picture ), if you want change this - remake google.tpl

so this is picture.tpl template

{let page_limit=4
list_count=fetch('content','list_count',hash(parent_node_id,$node.parent_node_id))}

{default content_object=$node.object
content_version=$node.contentobject_version_object
node_name=$node.name}

<html cutted here>

{let children=fetch('content','list',hash(parent_node_id,$node.parent_node_id,sort_by,$node.sort_array,limit,$page_limit,offset,$view_parameters.offset)) }
{section name=Child loop=$children }
<a href={concat('content/view/full/',$Child:item.node_id,'/offset/',$view_parameters.offset)|ezurl}>{attribute_view_gui attribute=$Child:item.object.data_map.image image_class=small }
</a>
{/section}
{/let}

<!--including new overriden google.tpl --->
<tr><td colspan=3 height=17 align=center>
{include name=navigator
uri='design:google.tpl'
page_uri=concat('/content/view','/full/',$node.node_id)
item_count=$list_count
view_parameters=$view_parameters
item_limit=$page_limit}
</td></tr>
</table>

<!-- current picture is shown big size -->
{attribute_view_gui attribute=$node.object.data_map.image} {attribute_view_gui attribute=$node.object.data_map.name}

{/default}
{/let}

eZ debug

Timing: Jan 30 2025 20:30:07
Script start
Timing: Jan 30 2025 20:30:07
Module start 'content'
Timing: Jan 30 2025 20:30:07
Module end 'content'
Timing: Jan 30 2025 20:30:07
Script end

Main resources:

Total runtime0.2152 sec
Peak memory usage8,192.0000 KB
Database Queries141

Timing points:

CheckpointStart (sec)Duration (sec)Memory at start (KB)Memory used (KB)
Script start 0.00000.0082 587.9531370.2891
Module start 'content' 0.00820.0133 958.24221,005.4219
Module end 'content' 0.02150.1936 1,963.66413,894.2422
Script end 0.2151  5,857.9063 

Time accumulators:

 Accumulator Duration (sec) Duration (%) Count Average (sec)
Ini load
Load cache0.00502.3429200.0003
Check MTime0.00140.6552200.0001
Mysql Total
Database connection0.00090.397810.0009
Mysqli_queries0.112852.41981410.0008
Looping result0.00140.65101390.0000
Template Total0.193289.810.1932
Template load0.00080.368510.0008
Template processing0.192489.413010.1924
Override
Cache load0.00060.257110.0006
Sytem overhead
Fetch class attribute can translate value0.00200.950510.0020
XML
Image XML parsing0.00020.102710.0002
General
dbfile0.01054.8573200.0005
String conversion0.00000.004830.0000
Note: percentages do not add up to 100% because some accumulators overlap

CSS/JS files loaded with "ezjscPacker" during request:

CacheTypePacklevelSourceFiles
CSS0extension/community/design/community/stylesheets/ext/jquery.autocomplete.css
extension/community_design/design/suncana/stylesheets/scrollbars.css
extension/community_design/design/suncana/stylesheets/tabs.css
extension/community_design/design/suncana/stylesheets/roadmap.css
extension/community_design/design/suncana/stylesheets/content.css
extension/community_design/design/suncana/stylesheets/star-rating.css
extension/community_design/design/suncana/stylesheets/syntax_and_custom_tags.css
extension/community_design/design/suncana/stylesheets/buttons.css
extension/community_design/design/suncana/stylesheets/tweetbox.css
extension/community_design/design/suncana/stylesheets/jquery.fancybox-1.3.4.css
extension/bcsmoothgallery/design/standard/stylesheets/magnific-popup.css
extension/sevenx/design/simple/stylesheets/star_rating.css
extension/sevenx/design/simple/stylesheets/libs/fontawesome/css/all.min.css
extension/sevenx/design/simple/stylesheets/main.v02.css
extension/sevenx/design/simple/stylesheets/main.v02.res.css
JS0extension/ezjscore/design/standard/lib/yui/3.17.2/build/yui/yui-min.js
extension/ezjscore/design/standard/javascript/jquery-3.7.0.min.js
extension/community_design/design/suncana/javascript/jquery.ui.core.min.js
extension/community_design/design/suncana/javascript/jquery.ui.widget.min.js
extension/community_design/design/suncana/javascript/jquery.easing.1.3.js
extension/community_design/design/suncana/javascript/jquery.ui.tabs.js
extension/community_design/design/suncana/javascript/jquery.hoverIntent.min.js
extension/community_design/design/suncana/javascript/jquery.popmenu.js
extension/community_design/design/suncana/javascript/jScrollPane.js
extension/community_design/design/suncana/javascript/jquery.mousewheel.js
extension/community_design/design/suncana/javascript/jquery.cycle.all.js
extension/sevenx/design/simple/javascript/jquery.scrollTo.js
extension/community_design/design/suncana/javascript/jquery.cookie.js
extension/community_design/design/suncana/javascript/ezstarrating_jquery.js
extension/community_design/design/suncana/javascript/jquery.initboxes.js
extension/community_design/design/suncana/javascript/app.js
extension/community_design/design/suncana/javascript/twitterwidget.js
extension/community_design/design/suncana/javascript/community.js
extension/community_design/design/suncana/javascript/roadmap.js
extension/community_design/design/suncana/javascript/ez.js
extension/community_design/design/suncana/javascript/ezshareevents.js
extension/sevenx/design/simple/javascript/main.js

Templates used to render the page:

UsageRequested templateTemplateTemplate loadedEditOverride
1pagelayout.tpl<No override>extension/sevenx/design/simple/templates/pagelayout.tplEdit templateOverride template
 Number of times templates used: 1
 Number of unique templates used: 1

Time used to render debug report: 0.0001 secs