Forums / Developer / slideshow: no page refresh + number of pictures unknown

slideshow: no page refresh + number of pictures unknown

Author Message

Victor Dujardin

Friday 20 February 2009 5:59:29 am

Hello everybody,

I am trying to display a slideshow on one of my pages.
So I created a new block where I can put one hundred pics.

My aim is to display those pics in a slideshow without refreshing the page. And I would like to let the eZ Publish admin to be free on the number of pics he adds in the block (1 or 2 or ... till 100).

So, I wanted to insert javascript in my template to make it. But, as I read in the forum, it is impossible to handle variables between javascript and eZ. And I don't know how to do it without variables.

If anyone as a solution, or just an idea, it would be greatly appreciated.

Thanks.

Victor

justin kazadi

Friday 20 February 2009 11:31:18 am

Hi Victor Dujardin,
i think that you have just to make the pagination on the picture. so you don't need javascript for this.

try this code:

{def $page_limit = 1
		$classes = array( 'your_class_name' )
		$children = array()
		$children_count = ''}


{set $children=fetch_alias( 'children', hash( 'parent_node_id', $node.node_id,
							      'offset', $view_parameters.offset,
							      'sort_by', $node.sort_array,
							      'class_filter_type', 'include',
							     'class_filter_array', $classes,
							     'limit', $page_limit
							  )
					 )
						  
       $children_count=fetch_alias( 'children_count', hash( 'parent_node_id', $node.node_id,
										 'class_filter_type', 'include',
									        'class_filter_array', $classes
									      ) 
						)
	}
	     {foreach $children as $child }
		     {node_view_gui view='line' content_node=$child}
              {$child.data_map.your_attribute_name image_class=imagelarge}
	      {/foreach}
	      
	    {include name=navigator
		      uri='design:navigator/google.tpl'
		      page_uri=$node.url_alias
		      item_count=$children_count
		      view_parameters=$view_parameters
		item_limit=$page_limit}


use the:

$node.node_id 

if you are in an override template
good luck

The theory is when we know everything and nothing works.
The practice is when everything works and nobody knows why.
If the practice and theory are met, nothing works and we do not know why.

Albert Einstein

Victor Dujardin

Tuesday 24 February 2009 2:11:04 am

Thanks Justin. Pagination, great idea!

I tried your code, but it doesn't work because I am in a block, not on a node. So $node.node_id, $node.url_alias and $view_parameters are unknown.

I know about pagination but in a block, doesn't seem to be possible. For example, if I choose four pictures, they all will be displayed on the block. And the pagination appears on the bottom of the block: "1 2 3 4 Next>>" but the links don't work.

Any idea?

justin kazadi

Tuesday 24 February 2009 5:11:12 am

Hi victor,

you said that:

...I know about pagination but in a block, doesn't seem to be possible. 

what means block for you?

if you are not in an override template, make this in your template :

{def $picture=fetch( 'content', 'node' ,hash(node_id, the_id_of_your_node))}

and after replace

$node
by 
$picture

i think this can help you.

The theory is when we know everything and nothing works.
The practice is when everything works and nobody knows why.
If the practice and theory are met, nothing works and we do not know why.

Albert Einstein

Victor Dujardin

Tuesday 24 February 2009 6:54:37 am

Thanks again for the reply.

To me, a block is a division of a frontpage (like "2items (manual)" or "tagcloud").

So I created a new block type called "slideshow" and an override template for it. That is the one I want to modify.

And I am not on a specific node. I use the variable $block in my template, $block.valid_nodes to get my pictures for example.

Mark Simon

Tuesday 24 February 2009 9:09:20 am

Hi Victor,

if You want to tranfer variables from eZ template Code to javascript,
I suggest to define an array in the template like this:

<script type="text/javascript">
<!--
   var imagearray = new Array(
   {foreach $block.valid_nodes as $valid_node}
      "{$valid_node.data_map.image.content.image_class.url}",
   {/foreach}
   );
//-->
</script>

(depending "image as attribute identifier" and "image_class" as valid class defined in image.ini)

The javascript to scroll all images in this array is best placed in the foot of the page.
Then it will be called after the array has been created.
Also it is more performant, if the includes of javascript files are bein included inn the foot of a page.

www.all2e.com

Gaetano Giunta

Tuesday 24 February 2009 10:13:20 am

view_parameters can be added to block templates.

You just have to follow the complete inclusion chain and replace

{include uri='path_to_file'}

with

{include uri='path_to_file' view_parameters=$view_parameters}

Start off with the template that is used to display the frontpage (it is a contentclass attribute after all) and go all the way to the block template.

Be sure to do it in overrides, not by altering the base version.

IIRC it is 2 files that you will have to override.

Enable the debug mode with the list of used templates to get you started.

Principal Consultant International Business
Member of the Community Project Board

Gaetano Giunta

Tuesday 24 February 2009 10:17:14 am

ps: "And I am not on a specific node" is wrong.

The frontpage you are editing / displaying is the node.

It has an attribute where the complete "ezflow" magic lives.

You can pass down other variables from the node template all the way to the block template if needed.
In particular this can be helpful to avoid fetching the same data many times.

Principal Consultant International Business
Member of the Community Project Board

Victor Dujardin

Wednesday 25 February 2009 7:43:09 am

@Gaetano: Thank you. I tried the solution you provided, with no results. I added the include part in my page templates but I aways got errors. And my skills and knowledge of eZ didn't allow me to fix it in the time I have. So I got back to the javascript piece and it worked. But, again, thank you for your time and precisions.

@Mark: The {foreach} idea is really great. I just modified your code a little (I added the {literal} stuff and solved the last comma error) and this works perfectly. Thanks a lot.

Victor

eZ debug

Timing: Jan 18 2025 11:27:08
Script start
Timing: Jan 18 2025 11:27:08
Module start 'content'
Timing: Jan 18 2025 11:27:09
Module end 'content'
Timing: Jan 18 2025 11:27:09
Script end

Main resources:

Total runtime1.0383 sec
Peak memory usage4,096.0000 KB
Database Queries216

Timing points:

CheckpointStart (sec)Duration (sec)Memory at start (KB)Memory used (KB)
Script start 0.00000.0071 589.2891180.8125
Module start 'content' 0.00710.9077 770.1016726.0625
Module end 'content' 0.91480.1234 1,496.1641348.4297
Script end 1.0382  1,844.5938 

Time accumulators:

 Accumulator Duration (sec) Duration (%) Count Average (sec)
Ini load
Load cache0.00420.4035210.0002
Check MTime0.00160.1547210.0001
Mysql Total
Database connection0.00060.056410.0006
Mysqli_queries0.938690.40222160.0043
Looping result0.00250.24382140.0000
Template Total1.009197.220.5045
Template load0.00310.295420.0015
Template processing1.006096.893820.5030
Template load and register function0.00010.009810.0001
states
state_id_array0.00100.094910.0010
state_identifier_array0.00090.082620.0004
Override
Cache load0.00290.2778780.0000
Sytem overhead
Fetch class attribute can translate value0.00130.126650.0003
Fetch class attribute name0.00240.2269130.0002
XML
Image XML parsing0.00210.206250.0004
class_abstraction
Instantiating content class attribute0.00000.0040180.0000
General
dbfile0.00300.2934450.0001
String conversion0.00000.000530.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
1node/view/full.tplfull/forum_topic.tplextension/sevenx/design/simple/override/templates/full/forum_topic.tplEdit templateOverride template
9content/datatype/view/ezimage.tpl<No override>extension/sevenx/design/simple/templates/content/datatype/view/ezimage.tplEdit templateOverride template
9content/datatype/view/ezxmltext.tpl<No override>extension/community_design/design/suncana/templates/content/datatype/view/ezxmltext.tplEdit templateOverride template
21content/datatype/view/ezxmltags/paragraph.tpl<No override>extension/ezwebin/design/ezwebin/templates/content/datatype/view/ezxmltags/paragraph.tplEdit templateOverride template
6content/datatype/view/ezxmltags/line.tpl<No override>design/standard/templates/content/datatype/view/ezxmltags/line.tplEdit templateOverride template
8content/datatype/view/ezxmltags/literal.tpl<No override>extension/community/design/standard/templates/content/datatype/view/ezxmltags/literal.tplEdit templateOverride template
1pagelayout.tpl<No override>extension/sevenx/design/simple/templates/pagelayout.tplEdit templateOverride template
 Number of times templates used: 55
 Number of unique templates used: 7

Time used to render debug report: 0.0001 secs