Magento Slider Link

时间:2015-06-05 09:03:45

标签: jquery html magento hyperlink slider

我一直试图在magento上添加一个链接到我的整个幻灯片(不只是"阅读更多"按钮,我想知道是否有人能告诉我正确的方法来做到这一点 - 我试过了将整个div包含在链接标记中的slider_1静态块中,但这没有用,似乎打破了滑块文本和按钮。如果图像链接,我不需要按钮。

这是我在slider_1静态块中的代码(请看幻灯片3),这是我添加链接标记的地方。

<div class="clear">&nbsp;</div>
<script type="text/javascript" src="{{skin url='js/camera.js'}}">// <! [CDATA[

// ]]></script>
<script type="text/javascript">// <![CDATA[
jQuery(function(){
            jQuery('#camera_wrap').camera({
                alignmen: 'topCenter',
                height: '31.21%',
                minHeight: '100px',
                loader : false,
                navigation: true,
                fx: 'simpleFade',
                navigationHover:false,       
                thumbnails: false,
                playPause: false,
                pagination:false,
            });
        });
// ]]></script>
<div class="fluid_container_wrap">
<div class="fluid_container">
<div id="camera_wrap" class="camera_wrap camera_orange_skin">
<div data-src="{{skin url='images/camera/slides/vineyard1.jpg'}}">
<div data-src="{{skin url='images/camera/slides/big-m.png'}}">
<div class="camera_caption fadeFromLeft">
<div class="lof_camera_title"></div>
<div class="lof_camera_title1"></div>
<a class="camera-link" href="{{store url=''}}women-8"></a></div>
</div>
</div>
<div data-src="{{skin url='images/camera/slides/collection-bg.jpg'}}">
<div class="camera_caption fadeFromLeft">
<div class="lof_camera_title">MEN'S &amp;amp <br /> WOMEN'S</div>
<div class="lof_camera_title1">New Fall Season 2015</div>
<a class="camera-link" href="{{store url=''}}women-8">View Collection</a></div>
</div>
<a href="#"><div data-src="{{skin url='images/camera/slides/six-bg.jpg'}}">
<div class="camera_caption fadeFromLeft">
<div class="lof_camera_title">MEN'S &amp;amp <br /> WOMEN'S</div>
<div class="lof_camera_title1">New Fall Season 2015</div>
<a class="camera-link" href="{{store url=''}}women-8">View Collection</a></div>
</div></a>
<div data-src="{{skin url='images/camera/slides/buy-five-bg.jpg'}}">
<div class="camera_caption fadeFromLeft">
<div class="lof_camera_title">MEN'S &amp;amp <br /> WOMEN'S</div>
<div class="lof_camera_title1">New Fall Season 2015</div>
<a class="camera-link" href="{{store url=''}}women-8">View Collection</a></div>
</div>
<div data-src="{{skin url='images/camera/slides/brut-bg.jpg'}}">
<div class="camera_caption fadeFromLeft">
<div class="lof_camera_title lof_white">Get ready <br /> for summer!</div>
<div class="lof_camera_title1">Save in style</div>
<a class="camera-link" href="{{store url=''}}women-8">View Collection</a></div>
</div>
<div data-src="{{skin url='images/camera/slides/mille-bg.jpg'}}">
<div class="camera_caption fadeFromLeft">
<div class="lof_camera_title">MEN'S &amp;amp <br /> WOMEN'S</div>
<div class="lof_camera_title1">New Fall Season 2015</div>
<a class="camera-link" href="{{store url=''}}women-8">View Collection</a></div>
</div>
<div data-src="{{skin url='images/camera/slides/grande-bg.jpg'}}">
<div class="camera_caption fadeFromLeft">
<div class="lof_camera_title">MEN'S &amp;amp <br /> WOMEN'S</div>
<div class="lof_camera_title1">New Fall Season 2015</div>
<a class="camera-link" href="{{store url=''}}women-8">View Collection</a></div>
</div>
<div data-src="{{skin url='images/camera/slides/classm-bg.jpg'}}">
<div class="camera_caption fadeFromLeft">
<div class="lof_camera_title">BUY <br />2 ITEMS</div>
<div class="lof_camera_title1">Get one for free</div>
<a class="camera-link" href="{{store url=''}}accessories">View Collection</a></div>
</div>
</div>
</div>
</div>
<div class="clear">&nbsp;</div>

我尝试将所有内容包装在一个链接中,也只是链接中的图像,但无济于事。

非常感谢任何帮助

1 个答案:

答案 0 :(得分:0)

我想通了。通过添加

data-link="{{store url=collection}}"

到图像div。它如此正确地链接: 这是一个名为“camera”的Jquery插件

<div class="fluid_container_wrap">
<div class="fluid_container">
<div id="camera_wrap" class="camera_wrap camera_orange_skin">
<div data-link="{{store url=collection}}" data-src="{{skin    url='images/camera/slides/vineyard1.jpg'}}">
<div data-link="{{store url=collection}}" data-src="{{skin url='images/camera/slides/big-m.png'}}">
<div class="camera_caption fadeFromLeft">
<div class="lof_camera_title"></div>
<div class="lof_camera_title1"></div>
<a class="camera-link" href="{{store url=''}}women-8"></a></div>
</div>
</div>