商品詳細ページ内の場合

<a href="ポップアップさせたい画像URL" class="popup_image">サムネイル画像など</a>

商品詳細ページ以外（フリーページなど）の場合

<a href="ポップアップさせたい画像URL" class="popup_image">サムネイル画像など</a>

<script type="text/javascript" src="http://demo.ocnk.net/res/css1/js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="http://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="#" onclick="jQuery.fancybox.close();" >' + close + '</a>'
}
});
});

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