商品詳細ページの画像拡大表示を他の箇所でも使えますか？

2018-06-21 14:40
商品詳細ページ内の場合
下記のようにaタグ内に「class="popup_image"」を入れていただければお使いいただけます。
<a href="ポップアップさせたい画像URL" class="popup_image" target="_blank">サムネイル画像など</a>

 

商品詳細ページ以外（フリーページなど）の場合
html使用可の箇所にて下記のように記載してください。
※「demo」の箇所にはアカウントIDを入れてください。（独自ドメインご利用の方は「demo.ocnk.net」の代わりに「www.独自ドメイン名」を入れてください。）
<a href="ポップアップさせたい画像URL" class="popup_image">サムネイル画像など</a>

<script type="text/javascript" src="https://demo.ocnk.net/res/css1/js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="https://demo.ocnk.net/res/css1/js/jquery.fancybox.js"></script>
<script type="text/javascript">
<!--
var noImage = "写真が見つかりません";
var close ="閉じる";

(function () {
var linkElem = document.createElement('link');
linkElem.setAttribute('tyle', 'text/css');
linkElem.setAttribute('rel', 'stylesheet');
linkElem.setAttribute('href', location.protocol + '//' + location.hostname + '/res/css1/style/jquery.fancybox.css');
document.getElementsByTagName('head')[0].appendChild(linkElem);
})();

jQuery(document).ready(function() {
jQuery(".popup_image").fancybox({
'autoScale' : false,
'padding' : '30',
'transitionIn' : 'fade',
'transitionOut' : 'fade',
'onStart' : function() {undisplayFlash();},
'onClosed' : function() {displayFlash();},
'titlePosition' : 'inside',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<a href="javascript:void(0);" >' + close + '</a>'
}
});
});

function undisplayFlash() {
jQuery('.flashdisplay').css('display', 'none');
}
function displayFlash() {
jQuery('.flashdisplay').css('display', '');
}
// -->
</script>

※既存のCSSとJavaScriptを読み込んでいないフリーページ、扉ページではご利用いただけません。

 

上記はXHTMLテンプレート用です。HTML5テンプレートをご利用の場合は、下記ページをご参照ください。
◆商品詳細ページの画像拡大表示を他の箇所でも使えますか？[HTML5テンプレート用]
https://www.ocnk.net/faq/index.php?action=faq&id=1082