product_additional모바일 쇼핑몰의 상품상세 이미지 로딩을 Lazy loading 또는 [더보기] 형태로 구현하는 방법을 각각 알아보겠습니다.
2개 기능은 동시에 사용할 수 없으며 각자 쇼핑몰에 맞게 운영하시면 됩니다.
Lazy Loading 방식 사용하기
※ Lazy Loading 이란, 사용자 화면에 보이는 이미지만 로딩하고 다른 이미지들은 사용자가 스크롤 하면서 이미지에 가까워지면 로딩되는 방식입니다.
[더보기] 버튼을 클릭하면 추가된 이미지를 로딩해주는 방법 대신 고객에게 더 빠르고 편리한 Lazy Loading 을 적용해보시기 바랍니다.
1. 설정하기 : 모바일쇼핑몰 > 모바일 환경설정 > 이미지 로딩 속도 개선 설정을 "사용함"으로 변경합니다.
2. 불필요한 소스 삭제하기
상품상세 화면에서 <div module="product_additional"> 의 모듈을 찾아 그 안에 있는 아래 소스가 있다면 제거합니다.
<!-@js(/js/module/product/additional.js)->
<!-@js(/js/module/product/additional_animation.js)->
.... 중간생략 ....
<div class="btnMore" id="btnMore">
<a href="#none">
더보기<span class="icoMore"></span>
</a>
</div>
※ 기존 '더보기' 기능을 사용 중인 쇼핑몰의 경우, 사용함 설정 시 더보기 기능이 비활성화 되며 사용안함 설정시에는 다시 활성화 됩니다.
더보기 방식 사용하기
-EB8D94EBB3B4EAB8B0EB85B8ECB69CED9994EBA9B4.jpg)
1. 설정하기
: Lazy Loading과 더보기는 함께 사용할 수 없기 때문에 모바일쇼핑몰 > 모바일 환경설정 > 이미지 로딩 속도 개선 설정을 "사용안함"으로 설정합니다.
2. 소스 추가하기
(1) HTML
상품상세 화면에서 <div module="product_additional"> 의 모듈을 찾아 그 안에 있는 아래 파란색 소스들을 추가합니다.
... 상단생략 ...
<div module="product_additional">
<!-@css(/css/module/product/additional.css)->
<!-@css(/css/module/product/additional_animation.css)->
<!-@js(/js/module/product/additional.js)->
<!-@js(/js/module/product/additional_animation.js)->
... 중간생략 ...
<!-- 상세정보 -->
<div id="prdDetail">
<div class="button" id="prdDetailBtn">
<a href="/product/zoom.html?product_no={$product_no}" target="_blank" class="btnNormal">원본보기 <span class="ico"></span></a>
</div>
<div id="prdDetailContent">{$product_detail}</div>
<div class="btnMore" id="btnMore">
<a href="#none">
더보기<span class="icoMore"></span>
</a>
</div>
</div>
(2) 자바스크립트 - 위 html 을 적용한 후 해당 javascrip 파일에 아무내용이 없다면 해당 소스는 정상 작동하지 않습니다. 하단의 소스를 각각 추가해주세요.
<!-@js(/js/module/product/additional.js)->
/**
* 모바일 상품상세 더보기
* @package app/Shop
* @subpackage Front/Disp/Product
* @since 2014. 5. 12.
* @version 1.0
*/
$(function() {
var $DetailMore = {
/*
* current module name
*/
sModule : 'xans-product-additional',
/*
* active div
*/
iActive : 0,
/**
* module
*/
$module : null,
/**
* detail
*/
$detail : null,
/**
* more
*/
$more : null,
/**
* real height
*/
realHeight : 0,
/**
* fake height
*/
fakeHeight : 0,
/**
* run
*/
run : function() {
setTimeout(function(){ $DetailMore.init(); }, 500);
},
/**
* init
*/
init : function() {
// validate
if (this.validate === false) return;
// set object
this.setObject();
// set detail height
this.setDetailHeight();
// set more
this.setMore();
},
/**
* set event
*/
setMore : function() {
if (this.realHeight <= this.fakeHeight) {
this.$more.remove();
} else {
this.$more.unbind().bind('click', function() { if (this.validate === false) return; $DetailMore.load(); });
}
},
/**
* set detail height
*/
setDetailHeight : function() {
this.$detail.css({'max-height' : parseInt($(window).height()*4) + 'px', overflow : 'hidden'});
this.fakeHeight = this.$detail.height();
},
/**
* validate
*/
validate : function() {
if (mobileWeb === false) return false;
},
/**
* set object
*/
setObject : function(){
try {
// current module class
var sActiveProduct = this.iActive > 0 ? '.' + this.sModule + '-' + this.iActive : '.' + this.sModule;
// set module
this.$module = $(sActiveProduct);
// set detail
this.$detail = this.$module.find('div#prdDetailContent');
// set more
this.$more = this.$module.find('div#btnMore');
// set real height
this.realHeight = this.$detail.height();
} catch(e) { }
},
/**
* load detail
*/
load : function() {
this.$detail.css({'max-height' : 'none'});
this.$more.remove();
}
};
$DetailMore.run();
});
<!-@js(/js/module/product/additional_animation.js)->
$(function(){
var sModule = '#prdDetail', $pop = $(sModule).find('img');
// set pop image
$pop.each(function(i){ $(this).data('index', i).css('z-index', '100'); });
$pop.click(function(){
var _index = $(this).data('index');
$pop.each(function(i){
if (i != _index) {
$(this).css("z-index", "100").removeClass();
} else {
$(this).css("z-index", "9999");
$(this).removeClass().delay(1).queue(function (a) {
$(this).addClass("animate pop");
a();
$(this).dequeue();
});
}
});
});
});
