Forums / Setup & design / building an image gallery

building an image gallery

Author Message

mihnea stoian

Monday 05 January 2004 9:20:09 am

I'm trying to build an image gallery where I have a initial list of thumbnails and when I click on the individual thumbnail a pop-up opens with the bigger image.

What kind of template will I need for the list of images so that when clicked they open their corresponding bigger image?

I'm new to eZ (been using it for less than a month), and am still learning as I go, so could anyone tell me if there is some sort of tutorial on how to do something like this, or at least just part of it?

Thanks,

Mihnea

Paul Borgermans

Monday 05 January 2004 10:26:27 am

If you want a popup, best use some simple javascript mixed with template code like

-----------------------------------------------
....
<h3><a href="#">Preview <img src={"viewmag+.gif"|ezimage} onClick='OpenWindow({$node.object.data_map.preview.content[original].full_path|ezroot},"image_preview","scrollbars,resizable");'></a></h3>

------------------------------------------------------

you will probably need to change preview to the attribute name of your image.

viewmag+.gif is just an icon i borrowed from a KDE distribution and converted to gif (for IE transparancy)

the OpenWindow javascript function called is found in the default pagelayout in the demo's:

<script language="JavaScript">
<!--

function OpenWindow ( URL, WinName, Features ) {
popup = window.open ( URL, WinName, Features );
if ( popup.opener == null ) {
remote.opener = window;
}
popup.focus();
}

// -->

</script>

hth

-paul

eZ Publish, eZ Find, Solr expert consulting and training
http://twitter.com/paulborgermans

mihnea stoian

Tuesday 06 January 2004 7:05:54 am

thanks for the answer, but unfortunately it doesn't work for me. :(

{$node.object.data_map.preview.content[original].full_path|ezroot} doesn't seem to display anything, so there is no url to open the new window with.

your example included the same image as thumbnail for all the pop-ups. I'd like to be able to use ImageMagick to display a small thumbnail of the image, and when I click on this small image to open the bigger version of the same image.

could that be easily achieved? also, where can I find some sort of reference to all the eZpublish commands available?

thanks again,

mihnea

eZ debug

Timing: Jan 31 2025 08:16:59
Script start
Timing: Jan 31 2025 08:16:59
Module start 'content'
Timing: Jan 31 2025 08:16:59
Module end 'content'
Timing: Jan 31 2025 08:16:59
Script end

Main resources:

Total runtime0.2563 sec
Peak memory usage2,048.0000 KB
Database Queries141

Timing points:

CheckpointStart (sec)Duration (sec)Memory at start (KB)Memory used (KB)
Script start 0.00000.0059 587.9297180.8359
Module start 'content' 0.00590.0059 768.765693.8672
Module end 'content' 0.01180.2444 862.6328522.1484
Script end 0.2562  1,384.7813 

Time accumulators:

 Accumulator Duration (sec) Duration (%) Count Average (sec)
Ini load
Load cache0.00321.2491200.0002
Check MTime0.00130.5108200.0001
Mysql Total
Database connection0.00090.363310.0009
Mysqli_queries0.208281.25091410.0015
Looping result0.00130.51931390.0000
Template Total0.244195.210.2441
Template load0.00080.323510.0008
Template processing0.243294.915110.2432
Override
Cache load0.00050.213810.0005
Sytem overhead
Fetch class attribute can translate value0.00080.296610.0008
XML
Image XML parsing0.00020.084810.0002
General
dbfile0.00933.6126200.0005
String conversion0.00000.002030.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