Jquery Nivo滑块中的图像映射
将图像贴图添加到nivo滑块时遇到问题。下面是我正在使用的代码,这里是链接。有什么建议吗Jquery Nivo滑块中的图像映射,jquery,html,wordpress,nivo-slider,Jquery,Html,Wordpress,Nivo Slider,将图像贴图添加到nivo滑块时遇到问题。下面是我正在使用的代码,这里是链接。有什么建议吗 <div class="slider-wrapper theme-default"> <div id="slider" class="nivoSlider"> <img src="wp-content/themes/sourcetone/images/1-difference.png" data-thumb="wp-content/themes/sour
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="wp-content/themes/sourcetone/images/1-difference.png" data-thumb="wp-content/themes/sourcetone/images/1-difference.png" alt="" />
<img src="wp-content/themes/sourcetone/images/2-mood.png" data-thumb="wp-content/themes/sourcetone/images/2-mood.png" alt="" usemap="#mood" />
<img src="wp-content/themes/sourcetone/images/3-activity.png" data-thumb="wp-content/themes/sourcetone/images/3-activity.png" alt="" usemap="#activity" />
<img src="wp-content/themes/sourcetone/images/4-health.png" data-thumb="wp-content/themes/sourcetone/images/4-health.png" alt="" usemap="#health" />
<img src="wp-content/themes/sourcetone/images/5-buy.png" data-thumb="wp-content/themes/sourcetone/images/5-buy.png" alt="" usemap="#buy" />
</div>
<map name="mood" id="mood"><area shape="rect" coords="10,453,162,482" href="/products/our-products/more-info/" alt="" /><area shape="rect" coords="10,400,162,445" href="google play" alt="" /></map>
<map name="activity"><area shape="rect" coords="929,449,1081,478" href="/products/our-products/more-info/" alt="" /><area shape="rect" coords="929,398,1081,443" href="google play" alt="" /></map>
<map name="health"><area shape="rect" coords="11,449,163,478" href="/products/our-products/more-info/" alt="" /><area shape="rect" coords="11,396,163,441" href="google play" alt="" /></map>
<map name="buy"><area shape="rect" coords="563,251,790,314" href="/products/our-products/more-info/" alt="" /><area shape="rect" coords="563,333,790,375" href="google play" alt="" /></map>
</div>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
animSpeed: 800, // Slide transition speed
pauseTime: 5000, // How long each slide will show
lastSlide: function(){}, // Triggers when last slide is shown
});
});
</script>
老实说,我不认为这是可能的,因为Nivo滑块实际上会将您的图像分割成几十个较小的图像
本质上,Nivo利用了与Sprite相同的技术,将图像加载到页面中(因此,它是缓存的),然后将其用作数十个较小图像的背景,所述背景移动了使div
显示整个图像的所需部分所需的量。因此,您实际提供给Nivo的图像本身永远不会显示
由于图像映射不能直接应用于div
,因此必须使用某种客户端逻辑在div
上创建自己的映射。如果这不可行,我建议您直接联系Nivo,询问他们是否有任何想法/解决方案可以直接与他们的插件集成
如果你还有任何问题,请告诉我。祝你好运!:) 可以使用jQuery动态更新映射
function drawMap() {
// remove image overlays used during transition
$('.nivo-slice, .nivo-box').remove();
// set usemap attribute for current image
var currentImage = $('#nivo-slider').data('nivo:vars').currentSlide;
$('.nivo-main-image').attr("useMap", "#map-" + currentImage);
}
然后在加载后和每次转换后调用该函数
$('.nivoSlider').nivoSlider({
// slider config
afterLoad: drawMap,
afterChange: drawMap
));