[eZ Publish] Diaporama Image sans chargement de page

**abadou** · 15/01/2010, 11h08

Bonjour tout le monde

Je veux avoir avoir une diaporama sans chargement de page

La template qui gère la diaporama c'est \extension\ezwebin\design\ezwebin\override\templates\full\image.tpl

J'ai une diaporama en jquery dans une simple page html je veux l'appliquer , pour le faire je dois avoir tous les images dans la template puis les visibler une par une selon un suivant , précédant mais la template n'affiche qu'une seul et dans le suivant il a un lien qui mène à la suivante image alors ma question, c'est comment poucler ce bloc pour avoir tous les images ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 <div class="attribute-image">
            <p>{attribute_view_gui attribute=$node.data_map.image image_class=imagelarge}</p>
        </div>

Aussi il y a truc la pge gallerie qui précède la page diaporama , je veut que le lien "Voir en diaporama" me dirige vers la page diaporama sans que l'url contient l'id de l'image je ne sais pas comment le faire, voici l'achref:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<a href={$children[0].url_alias|ezurl}>{'View as slideshow'|i18n( 'design/ezwebin/full/gallery' )} 
				{$children[0].url_alias|ezurl}</a>

Et si vous avez une autre idée ou bien s'il y a une extension à appliquer ça sera mieux l'essenciel que je veux une diaporama sans chargement de page

Je suis encore débutante et j'ai besoin d'aide

, merci d'avance

**Thes32** · 15/01/2010, 16h31

Salut,

ça doit ressembler à ceci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<div class="border-box"> 
<div class="border-tl"><div class="border-tr"><div class="border-tc"></div></div></div> 
<div class="border-ml"><div class="border-mr"><div class="border-mc float-break"> 
 
<div class="content-view-full"> 
    <div class="class-image"> 
 
        <div class="attribute-header"> 
            <h1>{$node.name|wash()}</h1> 
        </div> 
{def $images = fetch( 'content', 'list', hash('parent_node_id',$node.node_id))}
{foreach $images as $image}
 {attribute_view_gui attribute=$image.data_map.image image_class=imagelarge}
{/foreach}
</div> 
</div> 
 
</div></div></div> 
<div class="border-bl"><div class="border-br"><div class="border-bc"></div></div></div> 
</div>

**abadou** · 15/01/2010, 18h28

Je te remercie d'abord pour ton aide bon voilà ce que j'ai dans la template d'origin:
****************************************

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
{* Image - Full view *}
 
{def $sort_order=$node.parent.sort_array[0][1]
     $sort_column=$node.parent.sort_array[0][0]
     $sort_column_value=cond( $sort_column|eq( 'published' ), $node.object.published,
                             $sort_column|eq( 'modified' ), $node.object.modified,
                             $sort_column|eq( 'name' ), $node.object.name,
                             $sort_column|eq( 'priority' ), $node.priority,
                             $sort_column|eq( 'modified_subnode' ), $node.modified_subnode,
                             false() ) }
{if $sort_column_value|eq( false() )}
    {set $sort_column_value = $node.object.published
         $sort_column = 'published'}
{/if}
 
{def $previous_image = fetch( 'content', 'list', hash( 'parent_node_id', $node.parent_node_id,
                                                       'class_filter_type', 'include',
                                                       'class_filter_array', array( 'image' ),
                                                       'limit', '1',
                                                       'attribute_filter', array( 'and', array( $sort_column, $sort_order|choose( '>', '<' ), $sort_column_value ) ),
                                                       'sort_by', array( $sort_column, $sort_order|not ) ) )
     $next_image = fetch( 'content', 'list', hash( 'parent_node_id', $node.parent_node_id,
                                                   'class_filter_type', 'include',
                                                   'class_filter_array', array( 'image' ),
                                                   'limit', '1',
                                                   'attribute_filter', array( 'and', array( $sort_column, $sort_order|choose( '<', '>' ), $sort_column_value ) ),
                                                   'sort_by', array( $sort_column, $sort_order ) ) ) }
 
<div class="border-box">
<div class="border-tl"><div class="border-tr"><div class="border-tc"></div></div></div>
<div class="border-ml"><div class="border-mr"><div class="border-mc float-break">
 
<div class="content-view-full">
    <div class="class-image">
 
        <div class="attribute-header">
            <h1>{$node.name|wash()}</h1>
        </div>
 
        {if is_unset( $versionview_mode )}
        <div class="content-navigator">
            {if $previous_image}
                <div class="content-navigator-previous">
                    <div class="content-navigator-arrow">&laquo;&nbsp;</div><a href={$previous_image[0].url_alias|ezurl} title="{$previous_image[0].name|wash}">{'Previous image'|i18n( 'design/ezwebin/full/image' )}</a>
                </div>
            {else}
                <div class="content-navigator-previous-disabled">
                    <div class="content-navigator-arrow">&laquo;&nbsp;</div>{'Previous image'|i18n( 'design/ezwebin/full/image' )}
                </div>
            {/if}
 
            {if $previous_image}
                <div class="content-navigator-separator">|</div>
            {else}
                <div class="content-navigator-separator-disabled">|</div>
            {/if}
 
            {def $parent=$node.parent}
                <div class="content-navigator-forum-link"><a href={$parent.url_alias|ezurl}>{$parent.name|wash}</a></div>
 
            {if $next_image}
                <div class="content-navigator-separator">|</div>
            {else}
                <div class="content-navigator-separator-disabled">|</div>
            {/if}
 
            {if $next_image}
                <div class="content-navigator-next">
                    <a href={$next_image[0].url_alias|ezurl} title="{$next_image[0].name|wash}">{'Next image'|i18n( 'design/ezwebin/full/image' )}</a><div class="content-navigator-arrow">&nbsp;&raquo;</div>
                </div>
            {else}
                <div class="content-navigator-next-disabled">
                    {'Next image'|i18n( 'design/ezwebin/full/image' )}<div class="content-navigator-arrow">&nbsp;&raquo;</div>
                </div>
            {/if}
        </div>
        {/if}
 
        <div class="attribute-image">
           <p>{attribute_view_gui attribute=$node.data_map.image image_class=imagelarge}</p>
 
 
 
        </div>
 
        <div class="attribute-caption">
            {attribute_view_gui attribute=$node.data_map.caption}
        </div>
 
    </div>
</div>
 
</div></div></div>
<div class="border-bl"><div class="border-br"><div class="border-bc"></div></div></div>
</div>

***************************************************

et voici la template qui est modifié:

*****************************************************

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
{def $sort_order=$node.parent.sort_array[0][1]
     $sort_column=$node.parent.sort_array[0][0]
     $sort_column_value=cond( $sort_column|eq( 'published' ), $node.object.published,
                             $sort_column|eq( 'modified' ), $node.object.modified,
                             $sort_column|eq( 'name' ), $node.object.name,
                             $sort_column|eq( 'priority' ), $node.priority,
                             $sort_column|eq( 'modified_subnode' ), $node.modified_subnode,
                             false() ) }
{if $sort_column_value|eq( false() )}
    {set $sort_column_value = $node.object.published
         $sort_column = 'published'}
{/if}
 
 
<div class="border-box">
<div class="border-tl"><div class="border-tr"><div class="border-tc"></div></div></div>
<div class="border-ml"><div class="border-mr"><div class="border-mc float-break">
 
<div class="content-view-full">
 
 
 
       {def $images = fetch( 'content', 'list', hash('parent_node_id',$node.node_id))}
 
 
{foreach $images as $image}
 
    <div class="content-view-galleryslide">
    <div class="class-image">
 
     <h1>{$node.name|wash()}</h1
 
    <div class="attribute-image">
        <p>{attribute_view_gui attribute=$image.data_map.image image_class=imagelarge}</p>
    </div>
 
 
    </div>
</div>
 
 {/foreach}
 
 
</div>
 
</div></div></div>
<div class="border-bl"><div class="border-br"><div class="border-bc"></div></div></div>
</div>

************************************************

Normalement cette page diaporama vient de la page liste qui a comme code:

******************************************************

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
{* Gallery - Full view *}
 
<div class="border-box">
<div class="border-tl"><div class="border-tr"><div class="border-tc"></div></div></div>
<div class="border-ml"><div class="border-mr"><div class="border-mc float-break">
 
<div class="content-view-full">
    <div class="class-gallery">
 
        <div class="attribute-header">
            <h1>{$node.name|wash()}</h1>
        </div>
 
        {if $node.data_map.image.content}
            <div class="attribute-image">
                {attribute_view_gui image_class=medium attribute=$node.data_map.image.content.data_map.image}
            </div>
        {/if}
 
        <div class="attribute-short">
           {attribute_view_gui attribute=$node.data_map.short_description}
        </div>
 
        <div class="attribute-long">
           {attribute_view_gui attribute=$node.data_map.description}
        </div>
 
        {def $page_limit=12
             $children = fetch( 'content', 'list', hash( 'parent_node_id', $node.node_id,
                                                         'offset', $view_parameters.offset,
                                                         'limit', $page_limit,
                                                         'class_filter_type', 'include',
                                                         'class_filter_array', array( 'image' ),
                                                         'sort_by', $node.sort_array ) )
             $children_count = fetch( 'content', 'list_count', hash( 'parent_node_id', $node.node_id,
                                                                     'class_filter_type', 'include',
                                                                     'class_filter_array', array( 'image' ) ) )}
 
        {if $children|count}
            <div class="attribute-link">
                <p>
<!--voici le lien qui mène à la page diaporama >
                <a href={$children[0].url_alias|ezurl}>{'View as slideshow'|i18n( 'design/ezwebin/full/gallery' )}</a>
                </p>
            </div>
 
           <div class="content-view-children">
               {def $filters = ezini( 'gallerythumbnail', 'Filters', 'image.ini' )}
 
                {foreach $filters as $filter}
                   {if or($filter|contains( "geometry/scale" ), $filter|contains( "geometry/scaledownonly" ), $filter|contains( "geometry/crop" ) )}
                      {def $image_style = $filter|explode("=").1}
                      {set $image_style = concat("width:", $image_style|explode(";").0, "px ;", "height:", $image_style|explode(";").1, "px")}
                      {break}
                   {/if}
                {/foreach}
 
               {foreach $children as $child}
<!---voici la partie qui affiche tous les images dans la page galerie ou liste il fait appelle à une autre template ou  il ya le name et limage en dessous tu verra cette template-->
                   {node_view_gui view=galleryline content_node=$child}
               {/foreach}
 
           </div>
        {/if}
 
    </div>
</div>
 
</div></div></div>
<div class="border-bl"><div class="border-br"><div class="border-bc"></div></div></div>
***********************************************************
 
Voici la template appellé :
 
****************************************************
<div class="content-view-galleryline">
    <div class="class-image">
 
    <div class="attribute-image"{if is_set($#image_style)} style="{$#image_style}"{/if}>
        <p>{attribute_view_gui attribute=$node.data_map.image image_class=gallerythumbnail
                               href=$node.url_alias|ezurl}</p>
    </div>
 
    <div class="attribute-name"{if is_set($#image_style)} style="{$#image_style|explode(';').0}"{/if}>
        <p>{$node.name|shorten(14)|wash}</p>
    </div>
 
    </div>
</div>
 
</div>

******************************************
Vraiment désolé pour ce long text je veux juste te préciser pour que tu peux m'aider merci d'avance

**abadou** · 19/01/2010, 09h24

Bonjour,

bon j'ai trouvé la solution pour afficher toutes les images, voilà ma nouvelle template :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
{* Image - Full view *}
 
 {def   $images = fetch( 'content', 'list', hash( 'parent_node_id', $node.parent_node_id,
                                                         'class_filter_type', 'include',
                                                         'class_filter_array', array( 'image' ),
                                                         'sort_by', $node.sort_array ) )
             }
 
 
<div class="border-box">
<div class="border-tl"><div class="border-tr"><div class="border-tc"></div></div></div>
<div class="border-ml"><div class="border-mr"><div class="border-mc float-break">
 
<div class="content-view-full">
 
 {if $images|count}
 
    <div class="class-image">
 
{foreach $images as $image}
        <div class="attribute-header">
            <h1>{$image.name|wash()}</h1>
        </div>
 
 
 
        <div class="attribute-image">
           <p>{attribute_view_gui attribute=$image.data_map.image image_class=imagelarge}</p>
 
 
 
        </div>
 
        <div class="attribute-caption">
            {attribute_view_gui attribute=$image.data_map.caption}
        </div>
{/foreach}
    </div>
	{/if}
 
 
 
</div>
 
</div></div></div>
<div class="border-bl"><div class="border-br"><div class="border-bc"></div></div></div>
</div>

Merci Thes32 ta réponse m'a beaucoup aidé

[eZ Publish] Diaporama Image sans chargement de page

EDI, CMS, Outils, Scripts et API PHP

Discussions similaires

Partager

Partager