在不同的资源和模板上使用migx TV进行幻灯片放映

时间:2012-01-20 07:23:17

标签: modx

我在我的MODx革命网站上使用Mootools SmoothGallery进行了幻灯片放映,我使用Migx动态选择图像。 它在我的第一页上运行良好,但我想在网站的其他页面上使用相同的幻灯片(此幻灯片显示在网站的标题中)。 我尝试将主要的Migx TV分配给不同的模板,但幻灯片显示没有使用此模板显示在资源上,它只适用于第一个。

是否无法在网站的不同位置使用相同的Migx?

在我的2个模板上调用包含幻灯片的块:

<div id="slideshowbox">[[$slideshowbox]]</div><!--end slideshowbox-->

块“slideshowbox”的内容

    <script type="text/javascript">
    function startGallery() {
    var myGallery = new gallery($('myGallery'), {
    timed: true,
    showArrows: false,
    showCarousel: false,
    embedLinks: false
    });
    }
    window.addEvent('domready', startGallery);
    </script> 

<div id="myGallery">
[[!getImageList?
      &tvname=`SlideShow`
      &tpl=`SlideImage`
   ]]
</div>

SlideImage的内容

<div class="imageElement">
<h3>[[+title]]</h3>
<p>[[+description]]</p>
<img src="[[+image]]" class="full" />
</div>

Migx TV:SlideShow 标签:

[
{"caption":"Image", "fields":[
    {"field":"image","caption":"Image size 938px x 344px","inputTV":"image"}
]},
{"caption":"Info", "fields": [
    {"field":"title","caption":"Title"},
    {"field":"description","caption":"Description"}
]}

网格:

[
{"header": "Title", "width": "160", "sortable": "true", "dataIndex": "title"},
{"header": "Image", "width": "50", "sortable": "false", "dataIndex": "image","renderer": "this.renderImage"}
]

在我的2个模板的头部:

<!--JQuery-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<!--SmoothGallery-->
<script src="assets/js/mootools-1.2.1-core-yc.js" type="text/javascript"></script>
<script src="assets/js/mootools-1.2-more.js" type="text/javascript"></script>
<script src="assets/js/jd.gallery.js" type="text/javascript"></script>
<script src="assets/js/jd.gallery.transitions.js" type="text/javascript"></script>

第一个模板资源的结果:

<div id="slideshowbox"><script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
showArrows: false,
showCarousel: false,
embedLinks: false
});
}
window.addEvent('domready', startGallery);
</script> 
<div id="myGallery">
<div class="imageElement">
<h3>Sanctuaire d'Itsukushima</h3>
<p>Corridor (Kairo)</p>
<img src="assets/images/img_temp/slideshow/kairo.jpg" class="full" />
</div><div class="imageElement">
<h3>Mikasahama</h3>
<p>Lanternes et Torii flottant</p>
<img src="assets/images/img_temp/slideshow/lanternes.jpg" class="full" />

</div><div class="imageElement">
<h3>Illuminations Nocturnes</h3>
<p>Sanctuaire d'Itsukushima et Pagode à 5 étages (Goju-no-to)</p>
<img src="assets/images/img_temp/slideshow/lightup.jpg" class="full" />
</div><div class="imageElement">
<h3>Sommet du Mont Misen</h3>
<p>et vue sur les îles de la Mer Intérieure de Seto</p>
<img src="assets/images/img_temp/slideshow/misen.jpg" class="full" />
</div><div class="imageElement">
<h3>Tour Tahoto</h3>
<p>au milieu des cerisiers en fleur</p>

<img src="assets/images/img_temp/slideshow/tahoto.jpg" class="full" />
</div><div class="imageElement">
<h3>Tsutusmigaura</h3>
<p>Plage et parc sportif</p>
<img src="assets/images/img_temp/slideshow/sea.jpg" class="full" />
</div>
</div></div><!--end slideshowbox-->

第二个结果:

<div id="slideshowbox"><script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
showArrows: false,
showCarousel: false,
embedLinks: false
});
}
window.addEvent('domready', startGallery);
</script> 
<div id="myGallery">

</div></div><!--end slideshowbox-->

它是空的......

我该怎么办?


编辑:

好的,我明白了,为什么它是空的:因为我必须再次填写表格来输入这个资源的图像和文字,它可以工作..

所以现在我想知道的是如何从我填写的第一个表格中获取变量,以便在我网站的每个页面上显示相同的幻灯片?

1 个答案:

答案 0 :(得分:2)

问题是,默认情况下,getImageList片段指的是当前页面的SlideShow TV,当然除了第一页以外,所有这些都是空的。

您可以使用 docid 参数指定已将图像加载到的第一页的ID:

[[!getImageList?
      &tvname=`SlideShow`
      &tpl=`SlideImage`
      &docid=`1`    <-- id of document containing your images
   ]]

此处有更多信息:http://rtfm.modx.com/display/ADDON/MIGX.Frontend-Usage#MIGX.Frontend-Usage-getImageList