ajax方法
function ajax(prodNo){
var json = {"prodNo":prodNo};
$.ajax({
type:"POST",
url:"product_ajax",
data:json,
success:function(data){
$("#prodName").html(data.product.name+" "+data.product.color+" "+data.product.prodNo);
$("#prodPrice").html("¥"+data.product.price);
$("#prodDescription").html(data.product.description);
$("#images").html("");
$.each(data.images, function(i, image){
var item = "<li><a href='"+image.imgBig+"'><img src='"+image.imgSmall+"' /></a></li>";
$("#images").append(item); //拼接标签
$("#images").listview("refresh"); //刷新列表
$("#images").trigger("create"); //重新加载样式
});
}
});
}
对图片显示的JQ代码(是否有可能是JQ控制的结果)
$(document).ready(function() {
// Exposure product image gallery
$(function(){
var gallery = $('#images');
gallery.exposure({controlsTarget : '#controls',
imageControls : false,
controls : { prevNext : false, pageNumbers : false, firstLast : false },
pageSize : 5,
enableSlideshow: false,
showCaptions: false,
slideshowControlsTarget : '#slideshow',
onThumb : function(thumb) {
var li = thumb.parents('li');
var fadeTo = li.hasClass($.exposure.activeThumbClass) ? 1 : 0.7;
thumb.css({display : 'none', opacity : fadeTo}).stop().fadeIn(200);
thumb.hover(function() {
thumb.fadeTo('fast',1);
}, function() {
li.not('.' + $.exposure.activeThumbClass).children('img').fadeTo('fast', 0.7);
});
},
onImageHoverOver : function() {
if (gallery.imageHasData()) {
// Show image data as an overlay when image is hovered.
gallery.dataElement.stop().show().animate({bottom:0+'px'},{queue:false,duration:160});
}
},
onImageHoverOut : function() {
// Slide down the image data.
var imageDataBottom = -gallery.dataElement.outerHeight();
gallery.dataElement.stop().show().animate({bottom:imageDataBottom+'px'},{queue:false,duration:160});
},
onImage : function(image, imageData, thumb) {
var w = gallery.wrapper;
// Fade out the previous image.
image.siblings('.' + $.exposure.lastImageClass).stop().fadeOut(500, function() {
$(this).remove();
});
// Fade in the current image.
image.hide().stop().fadeIn(500);
// Setup hovering for the image data container.
imageData.hover(function() {
// Trigger mouse enter event for wrapper element.
w.trigger('mouseenter');
}, function() {
// Trigger mouse leave event for wrapper element.
w.trigger('mouseleave');
});
// Check if wrapper is hovered.
var hovered = w.hasClass($.exposure.imageHoverClass);
if (hovered) {
if (gallery.imageHasData()) {
gallery.onImageHoverOver();
} else {
gallery.onImageHoverOut();
}
}
if (gallery.showThumbs && thumb && thumb.length) {
thumb.parents('li').siblings().children('img.' + $.exposure.selectedImageClass).stop().fadeTo(200, 0.7, function() { $(this).removeClass($.exposure.selectedImageClass); });
thumb.fadeTo('fast', 1).addClass($.exposure.selectedImageClass);
}
}
});
});
// Exposure end
body部分
<div id="container">
<div id="content">
<div class="content-inner">
<div class="main-content">
<div class="detail-item">
<!-- Product Gallery Begin -->
<div class="product-gallery float-left">
<div id="exposure"></div>
<div class="panel">
<div id="controls"></div>
<div id="slideshow"></div>
<ul id="images">
<c:if test='${map.images!="[]"}'>
<c:forEach items="${map.images}" var="image">
<li><a href="${image.imgBig}"><img src="${image.imgSmall}" /></a></li>
</c:forEach>
</c:if>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>