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