//名前空間用のオブジェクトを用意する var CONTENTVIEW_IMAGEPREVIEW = {}; /*==========================================*/ CONTENTVIEW_IMAGEPREVIEW.refreshSlideShowValue = function(){ CONTENTVIEW_IMAGEPREVIEW.slideshowImgFrom = 0; CONTENTVIEW_IMAGEPREVIEW.slideshowImgTo = 4; CONTENTVIEW_IMAGEPREVIEW.slideshowImageCollection = []; CONTENTVIEW_IMAGEPREVIEW.slideshowClickFlg = false; CONTENTVIEW_IMAGEPREVIEW.slideshowInitFlg = true; CONTENTVIEW_IMAGEPREVIEW.slideshowSelectedIndex = 0; //0: next - 1: prev CONTENTVIEW_IMAGEPREVIEW.slideshowControlToggleFlg = 0; //CONTENTVIEW_IMAGEPREVIEW.totalRecord; CONTENTVIEW_IMAGEPREVIEW.slideshowSelectFirstIndex = 0; CONTENTVIEW_IMAGEPREVIEW.slideshowSelectLastIndex = 4; CONTENTVIEW_IMAGEPREVIEW.slideshowMainCurrIndex = 0; }; //Show Image Preview CONTENTVIEW_IMAGEPREVIEW.showImagePreview = function(targetId, imgList) { CONTENTVIEW_IMAGEPREVIEW.refreshSlideShowValue(); //Check if imageList is not null if (imgList != null && imgList != 'undefined' && imgList.length > 0) { CONTENTVIEW_IMAGEPREVIEW.slideshowImageCollection = CONTENTVIEW_IMAGEPREVIEW.setImageSource(imgList); //Check if targetId is not null if (targetId != null && targetId != 'undefined') { if (CONTENTVIEW_IMAGEPREVIEW.slideshowImageCollection.length == 1) { targetId.html(''); targetId.append('<div id="slideWrapper">' + '</div>'); var mainImg = $('#slideWrapper'); //START FIXCSS var cssObj = { 'background-image': 'url(' + CONTENTVIEW_IMAGEPREVIEW.slideshowImageCollection[0].thumbnail + ')', 'background-repeat': 'no-repeat', 'background-size': 'contain', 'background-position': 'center' }; mainImg.addClass('imagePreview-one'); //END FIXCSS mainImg.css(cssObj); mainImg.parent().css('padding-top', '0px'); } else { CONTENTVIEW_IMAGEPREVIEW.renderSlideShowBackground(targetId); CONTENTVIEW_IMAGEPREVIEW.renderSelectImage(); CONTENTVIEW_IMAGEPREVIEW.renderMainImage(0); CONTENTVIEW_IMAGEPREVIEW.handleImagePreviewEvent(); } } } else { CONTENTVIEW_IMAGEPREVIEW.renderSlideShowBackground(targetId); $('.main-control').css('visibility', 'hidden'); $('.slideshow-control').css('visibility', 'hidden'); } CONTENTVIEW_IMAGEPREVIEW.optimizeSizeImagePreview(); }; //Set image source for slide show CONTENTVIEW_IMAGEPREVIEW.setImageSource = function(source){ var oldSource = source; var newSource = []; for(var nIndex = 0; nIndex < oldSource.length; nIndex++){ newSource.push({index : nIndex, image : oldSource[nIndex], thumbnail : oldSource[nIndex]}); } return newSource; }; //render background to show image preview CONTENTVIEW_IMAGEPREVIEW.renderSlideShowBackground = function(targetId){ var targetDiv = targetId; targetDiv.html(''); targetDiv.append('<div id="slideWrapper">' +' <div class="gallery-image" id="gallery-image">' +' <div class="main-control" id="main-control-prev"> </div>' +' <div id="main-img" id="mainThumbnail"><div class="mainThumbnail"></div></div>' +' <div class="main-control" id="main-control-next"> </div>' +' </div>' +' <div class="gallery-thumb">' +' <div id="control-prev" class="slideshow-control"><img src="././img/arrow-left.gif"></div>' +' <div id="selector-img">' +' </div>' +' <div id="control-next" class="slideshow-control"><img src="././img/arrow-right.gif"></div>' +' </div>' +'</div>' ); $(window).resize(function () { CONTENTVIEW_IMAGEPREVIEW.optimizeSizeImagePreview(); }); //CONTENTVIEW_IMAGEPREVIEW.handleImagePreviewEvent(); }; CONTENTVIEW_IMAGEPREVIEW.optimizeSizeImagePreview = function() { var maxW = "798"; var ratio = 1.566; var maxH = maxW / ratio; var canvas = document.getElementById('main'); if(ClientData.isStreamingMode() || CONTENTVIEW_GENERAL.avwUserEnvObj.isMobile()){ if( canvas.width < maxW ){ maxW = canvas.width * 0.9; maxH = maxW / ratio; } } $("#dialog").css('width', maxW + 'px'); $("#dialog").css('height', maxH + 'px'); /* if ($("#dialog").width() < maxW || $("#dialog").height() < maxH) { if ($("#dialog").width() < maxW) { $("#dialog").css('width', maxW + 'px'); $("#dialog").css('height', maxH + 'px'); } if ($("#dialog").height() < maxH) { $("#dialog").css('height', maxH + 'px'); $("#dialog").css('width', maxW + 'px'); } } else { $("#dialog").css('width', maxW + 'px'); $("#dialog").css('height', maxH + 'px'); } */ $("#dialog").center(); }; //render select image CONTENTVIEW_IMAGEPREVIEW.renderSelectImage = function(){ var selectImg = $('#selector-img'); $.each(CONTENTVIEW_IMAGEPREVIEW.slideshowImageCollection, function(i, image){ if(CONTENTVIEW_IMAGEPREVIEW.slideshowImgFrom <= i && i <= CONTENTVIEW_IMAGEPREVIEW.slideshowImgTo){ selectImg.append('<div class="thumbnail" imageId="'+ image.index +'" style="display:block; background-image : url('+image.thumbnail+')"></div>'); } else{ selectImg.append('<div class="thumbnail" imageId="'+ image.index +'" style="display:none; background-image : url('+image.thumbnail+')"></div>'); } }); }; //Handle Image Preview Event CONTENTVIEW_IMAGEPREVIEW.handleImagePreviewEvent = function(){ $('#control-next').click(CONTENTVIEW_IMAGEPREVIEW.imageSelectNextFunction); $('#control-prev').click(CONTENTVIEW_IMAGEPREVIEW.imageSelectPrevFunction); $('#main-control-next').click(CONTENTVIEW_IMAGEPREVIEW.imageMainSelectNextFunction); $('#main-control-prev').click(CONTENTVIEW_IMAGEPREVIEW.imageMainSelectPrevFunction); $('.thumbnail').click(CONTENTVIEW_IMAGEPREVIEW.selectImgClickFunction); $('.thumbnail').mouseenter(CONTENTVIEW_IMAGEPREVIEW.selectImgMouseEnterFunction); $('.thumbnail').mouseleave(CONTENTVIEW_IMAGEPREVIEW.selectImgMouseLeaveFunction); $('.main-control').css('opacity','0'); $('#main-control-next').mouseleave(CONTENTVIEW_IMAGEPREVIEW.mainControlNextMouseLeaveFunction); $('#main-control-prev').mouseleave(CONTENTVIEW_IMAGEPREVIEW.mainControlPrevMouseLeaveFunction); if (COMMON.isTouchDevice()) { //タッチ操作が背後のメインコンテンツに伝わるのを防止 $('#slideWrapper').on("touchmove", function(e) { e.preventDefault(); }); } else { //$('.main-control').mouseenter(CONTENTVIEW_IMAGEPREVIEW.mainControlMouseEnterFunction); $('#main-control-next').mouseenter(CONTENTVIEW_IMAGEPREVIEW.mainControlNextMouseEnterFunction); $('#main-control-prev').mouseenter(CONTENTVIEW_IMAGEPREVIEW.mainControlPrevMouseEnterFunction); } //$('.thumbnail:first').css('box-shadow','0px 7px 7px #555'); $('.thumbnail:first').addClass('activeThumb'); CONTENTVIEW_IMAGEPREVIEW.handleDispNextPrevButton(); }; CONTENTVIEW_IMAGEPREVIEW.mainControlNextMouseEnterFunction = function(){ $(this).css('opacity','0.5'); }; CONTENTVIEW_IMAGEPREVIEW.mainControlNextMouseLeaveFunction = function(){ $(this).css('opacity','0'); }; CONTENTVIEW_IMAGEPREVIEW.mainControlPrevMouseEnterFunction = function(){ $(this).css('opacity','0.5'); }; CONTENTVIEW_IMAGEPREVIEW.mainControlPrevMouseLeaveFunction = function(){ $(this).css('opacity','0'); }; //Image Preview next icon function CONTENTVIEW_IMAGEPREVIEW.imageSelectNextFunction = function(){ if(CONTENTVIEW_IMAGEPREVIEW.slideshowSelectLastIndex < CONTENTVIEW_IMAGEPREVIEW.slideshowImageCollection.length - 1){ $('#selector-img div:eq('+CONTENTVIEW_IMAGEPREVIEW.slideshowSelectFirstIndex+')').animate({width: 'hide'}, {step: function(now, fx){ $('#selector-img div:eq('+CONTENTVIEW_IMAGEPREVIEW.slideshowSelectLastIndex+')').animate({width: 'show'}); } } ); CONTENTVIEW_IMAGEPREVIEW.slideshowSelectFirstIndex = CONTENTVIEW_IMAGEPREVIEW.slideshowSelectFirstIndex + 1; CONTENTVIEW_IMAGEPREVIEW.slideshowSelectLastIndex = CONTENTVIEW_IMAGEPREVIEW.slideshowSelectLastIndex + 1; CONTENTVIEW_IMAGEPREVIEW.handleDispNextPrevButton(); } }; //Image preview prev icon function CONTENTVIEW_IMAGEPREVIEW.imageSelectPrevFunction = function(){ var fixedIndex = CONTENTVIEW_IMAGEPREVIEW.slideshowSelectFirstIndex - 1; if(CONTENTVIEW_IMAGEPREVIEW.slideshowSelectFirstIndex > 0){ $('#selector-img div:eq('+fixedIndex+')').animate({width: 'show'}); $('#selector-img div:eq('+CONTENTVIEW_IMAGEPREVIEW.slideshowSelectLastIndex+')').animate({width:'hide'}); CONTENTVIEW_IMAGEPREVIEW.slideshowSelectFirstIndex = CONTENTVIEW_IMAGEPREVIEW.slideshowSelectFirstIndex - 1; CONTENTVIEW_IMAGEPREVIEW.slideshowSelectLastIndex = CONTENTVIEW_IMAGEPREVIEW.slideshowSelectLastIndex - 1; CONTENTVIEW_IMAGEPREVIEW.handleDispNextPrevButton(); } }; //Main Image next icon function CONTENTVIEW_IMAGEPREVIEW.imageMainSelectNextFunction = function() { if (COMMON.isTouchDevice() == true) { $('#main-control-next').css('opacity', '0.5'); } if (CONTENTVIEW_IMAGEPREVIEW.slideshow_isTransaction == false) { CONTENTVIEW_IMAGEPREVIEW.slideshow_isTransaction = true; var fixedIndex = eval(CONTENTVIEW_IMAGEPREVIEW.slideshowMainCurrIndex) + 1; if (CONTENTVIEW_IMAGEPREVIEW.slideshowMainCurrIndex < CONTENTVIEW_IMAGEPREVIEW.slideshowImageCollection.length - 1) { $('#main-img div').animate( { "left": "-=100%" }, { /*duration: "slow",*/ complete: function () { $('#main-img div').hide(); CONTENTVIEW_IMAGEPREVIEW.renderMainImage(fixedIndex); $('#main-img div').css('left', '+=300%'); $('#main-img div').show(); $('<img/>').attr('src', CONTENTVIEW_IMAGEPREVIEW.slideshowImageCollection[fixedIndex].thumbnail).load(function () { $('#main-img div').animate({ left: '0%' }); }); CONTENTVIEW_IMAGEPREVIEW.slideshowMainCurrIndex = eval(CONTENTVIEW_IMAGEPREVIEW.slideshowMainCurrIndex) + 1; CONTENTVIEW_IMAGEPREVIEW.syncImageMainWithSelectImage(); CONTENTVIEW_IMAGEPREVIEW.handleDispNextPrevButton(); } } ); } } }; //Main Image prev icon function CONTENTVIEW_IMAGEPREVIEW.imageMainSelectPrevFunction = function() { if (COMMON.isTouchDevice() == true) { $('#main-control-prev').css('opacity', '0.5'); } if (CONTENTVIEW_IMAGEPREVIEW.slideshow_isTransaction == false) { CONTENTVIEW_IMAGEPREVIEW.slideshow_isTransaction = true; var fixedIndex = eval(CONTENTVIEW_IMAGEPREVIEW.slideshowMainCurrIndex) - 1; if (CONTENTVIEW_IMAGEPREVIEW.slideshowMainCurrIndex > 0) { $('#main-img div').animate( { "left": "+=100%" }, { duration: "medium", complete: function () { $('#main-img div').hide(); CONTENTVIEW_IMAGEPREVIEW.renderMainImage(fixedIndex); $('#main-img div').css('left', '-=300%'); $('#main-img div').show(); $('<img/>').attr('src', CONTENTVIEW_IMAGEPREVIEW.slideshowImageCollection[fixedIndex].thumbnail).load(function () { $('#main-img div').animate({ left: '0%' }); }); CONTENTVIEW_IMAGEPREVIEW.slideshowMainCurrIndex = eval(CONTENTVIEW_IMAGEPREVIEW.slideshowMainCurrIndex) - 1; CONTENTVIEW_IMAGEPREVIEW.syncImageMainWithSelectImage(); CONTENTVIEW_IMAGEPREVIEW.handleDispNextPrevButton(); } } ); } } }; //Selector Image click function CONTENTVIEW_IMAGEPREVIEW.selectImgClickFunction = function() { if (CONTENTVIEW_IMAGEPREVIEW.slideshow_isTransaction == false) { CONTENTVIEW_IMAGEPREVIEW.slideshow_isTransaction = true; var imgIndex = $(this).attr('imageId'); if (imgIndex > CONTENTVIEW_IMAGEPREVIEW.slideshowMainCurrIndex) { $('#main-img div').animate( { "left": "-=100%" }, { duration: "medium", complete: function () { $('#main-img div').css('display', 'none'); CONTENTVIEW_IMAGEPREVIEW.renderMainImage(imgIndex); $('#main-img div').css('left', '+=300%'); $('#main-img div').css('display', 'block'); $('<img/>').attr('src', CONTENTVIEW_IMAGEPREVIEW.slideshowImageCollection[imgIndex].thumbnail).load(function () { $('#main-img div').animate({ left: '0%' }); }); CONTENTVIEW_IMAGEPREVIEW.slideshowMainCurrIndex = imgIndex; CONTENTVIEW_IMAGEPREVIEW.handleDispNextPrevButton(); } } ); } else if (imgIndex < CONTENTVIEW_IMAGEPREVIEW.slideshowMainCurrIndex) { $('#main-img div').animate( { "left": "+=100%" }, { duration: "medium", complete: function () { $('#main-img div').css('display', 'none'); CONTENTVIEW_IMAGEPREVIEW.renderMainImage(imgIndex); $('#main-img div').css('left', '-=300%'); $('#main-img div').css('display', 'block'); $('<img/>').attr('src', CONTENTVIEW_IMAGEPREVIEW.slideshowImageCollection[imgIndex].thumbnail).load(function () { $('#main-img div').animate({ left: '0%' }); }); CONTENTVIEW_IMAGEPREVIEW.slideshowMainCurrIndex = imgIndex; CONTENTVIEW_IMAGEPREVIEW.handleDispNextPrevButton(); } } ); } else { CONTENTVIEW_IMAGEPREVIEW.slideshow_isTransaction = false; CONTENTVIEW_IMAGEPREVIEW.slideshowMainCurrIndex = imgIndex; CONTENTVIEW_IMAGEPREVIEW.handleDispNextPrevButton(); } //$('.thumbnail').css('box-shadow', ''); $('.thumbnail').removeClass('activeThumb'); //$(this).css('box-shadow', '0px 7px 7px #555'); $(this).addClass('activeThumb'); CONTENTVIEW_IMAGEPREVIEW.slideshowClickFlg = true; } }; //Render Main Image CONTENTVIEW_IMAGEPREVIEW.renderMainImage = function(i) { var mainImg = $('#main-img div'); mainImg.css('background-image', 'url(' + CONTENTVIEW_IMAGEPREVIEW.slideshowImageCollection[i].thumbnail + ')'); CONTENTVIEW_IMAGEPREVIEW.slideshow_isTransaction = false; if (COMMON.isTouchDevice() == true) { $('#main-control-next').css('opacity', '0'); $('#main-control-prev').css('opacity', '0'); } }; CONTENTVIEW_IMAGEPREVIEW.selectImgMouseLeaveFunction = function(){ if(!CONTENTVIEW_IMAGEPREVIEW.slideshowClickFlg){ //$('this').css('box-shadow',''); $('this').removeClass('activeThumb'); CONTENTVIEW_IMAGEPREVIEW.slideshowClickFlg = false; } else{ //CONTENTVIEW_IMAGEPREVIEW.slideshowClickFlg = false; } }; CONTENTVIEW_IMAGEPREVIEW.selectImgMouseEnterFunction = function(){ //$('.thumbnail').css('box-shadow',''); $('.thumbnail').removeClass('activeThumb'); //$(this).css('box-shadow','0px 7px 7px #555'); $(this).addClass('activeThumb'); }; //Main control mouse leave function CONTENTVIEW_IMAGEPREVIEW.mainControlMouseLeaveFunction = function(){ $('.main-control').css('opacity','0'); }; //Main control mouse enter function CONTENTVIEW_IMAGEPREVIEW.mainControlMouseEnterFunction = function(){ $('.main-control').css('opacity','0.5'); }; //Sync Main Image with select Image CONTENTVIEW_IMAGEPREVIEW.syncImageMainWithSelectImage = function(){ var thumbImg = $('.thumbnail[imageId="'+ CONTENTVIEW_IMAGEPREVIEW.slideshowMainCurrIndex +'"]'); if(thumbImg.is(':hidden')){ if(CONTENTVIEW_IMAGEPREVIEW.slideshowMainCurrIndex > CONTENTVIEW_IMAGEPREVIEW.slideshowSelectLastIndex){ CONTENTVIEW_IMAGEPREVIEW.imageSelectNextFunction(); } else if(CONTENTVIEW_IMAGEPREVIEW.slideshowMainCurrIndex < CONTENTVIEW_IMAGEPREVIEW.slideshowSelectFirstIndex){ CONTENTVIEW_IMAGEPREVIEW.imageSelectPrevFunction(); } } //$('.thumbnail').css('box-shadow',''); $('.thumbnail').removeClass('activeThumb'); //thumbImg.css('box-shadow','0px 7px 7px #555'); thumbImg.addClass('activeThumb'); }; //Handle display button control CONTENTVIEW_IMAGEPREVIEW.handleDispNextPrevButton = function(){ if(CONTENTVIEW_IMAGEPREVIEW.slideshowSelectFirstIndex > 0){ $('#control-prev').css('visibility','visible'); } else{ $('#control-prev').css('visibility','hidden'); } if(CONTENTVIEW_IMAGEPREVIEW.slideshowSelectLastIndex < (eval(CONTENTVIEW_IMAGEPREVIEW.slideshowImageCollection.length) - 1)){ $('#control-next').css('visibility','visible'); } else{ $('#control-next').css('visibility','hidden'); } if(CONTENTVIEW_IMAGEPREVIEW.slideshowMainCurrIndex > 0){ $('#main-control-prev').css('visibility','visible'); } else{ $('#main-control-prev').css('visibility','hidden'); } if(CONTENTVIEW_IMAGEPREVIEW.slideshowMainCurrIndex < (eval(CONTENTVIEW_IMAGEPREVIEW.slideshowImageCollection.length) - 1)){ $('#main-control-next').css('visibility','visible'); } else{ $('#main-control-next').css('visibility','hidden'); } }; $(function () { //CONTENTVIEW_IMAGEPREVIEW.ready(); }); CONTENTVIEW_IMAGEPREVIEW.ready = function(){ /*====Variable====*/ CONTENTVIEW_IMAGEPREVIEW.slideshowImgFrom = 0; CONTENTVIEW_IMAGEPREVIEW.slideshowImgTo = 4; CONTENTVIEW_IMAGEPREVIEW.slideshowImageCollection = []; CONTENTVIEW_IMAGEPREVIEW.slideshowClickFlg = false; CONTENTVIEW_IMAGEPREVIEW.slideshowInitFlg = true; //未使用 CONTENTVIEW_IMAGEPREVIEW.slideshowSelectedIndex = 0; //未使用 //0: next - 1: prev CONTENTVIEW_IMAGEPREVIEW.slideshowControlToggleFlg = 0; //未使用 //CONTENTVIEW_IMAGEPREVIEW.totalRecord; //未使用 CONTENTVIEW_IMAGEPREVIEW.slideshowSelectFirstIndex = 0; CONTENTVIEW_IMAGEPREVIEW.slideshowSelectLastIndex = 4; CONTENTVIEW_IMAGEPREVIEW.slideshowMainCurrIndex = 0; CONTENTVIEW_IMAGEPREVIEW.slideshow_isTransaction = false; };