pfhwyigou/frontend/web/js/house/lpalbumdetails.js

/*-------------------- 获取地址栏地址并拆分 --------------------------------*/
function getParams(url) {
    var theRequest = new Object();
    if (!url)
        url = location.href;
    if (url.indexOf("?") !== -1)
    {
        var str = url.substr(url.indexOf("?") + 1) + "&";
        var strs = str.split("&");
        for (var i = 0; i < strs.length - 1; i++)
        {
            var key = strs[i].substring(0, strs[i].indexOf("="));
            var val = strs[i].substring(strs[i].indexOf("=") + 1);
            theRequest[key] = val;
        }
    }
    return theRequest;
}

var  objUrl = {}; //获取get参数
var url = window.location.href;

var params = getParams(url);
if(!$.isEmptyObject(params)){
    $.each(params,function(key,val){
        objUrl[key] = val;
    })
}

var lpid=$('.lpalbum').attr('data-hid');
var album_id = 0;
var oindex = 0;
var thisLi='';
var urlid=objUrl.daid;
var videoR=$('.showimg_center .y_v3videoBox').attr('url');
var	videoImg=$('.showimg_center .y_v3videoBox').attr('data-img');


//进入页面默认加载  相册列表出过来的默认参数  并给添加选中效果
$(function(){
	$('.lpalbumBox_rNav a').on('click',function(){
		var that = $(this);
		album_id =that.attr('album-id');
		var typeName=that.attr('type-name')
		if (album_id!=0 && typeName!='videourl') {
			$('.img_c_cin').html('查看原图')			
			if (album_id!=objUrl.album_id) {
				urlid=0;
			};
			oindex=0;
			$('.showimg_center .y_v3videoBox').hide();
			// console.log(album_id)
			that.addClass('on').siblings().removeClass('on');
			var _html="";
			
		    
		    // 初始化变量并赋值
		    var minindex = 0;           //  小图所在的下标
		    var minlength = 0;          //  小图所有的总数

		    // 以三行 unbind 解除绑定事件，是为了多次点导航时，执行次的原因
		    $('.lpalbumBox_l .prev-btn').unbind();
		    $('.lpalbumBox_l .next-btn').unbind();
		    $('.tulist .tulist_main ul li').unbind();
			$('.tulist_main ul').html('');
			$.ajax({
			      url: "/house/housephoto?page=0&type=picture&id="+lpid+'&type_id='+album_id,
			      type: "get",
			      dataType: "json",
			      success: function(data) {
			          if(data.code == 200){
			              $.each(data.data, function (key,val) {
			              	_html+='<li class="swiper-slide" data-id="'+album_id+'" house-id="'+lpid+'" data-type="picture" data-id="'+key+'" data-url="'+val.img+'">';
			              	_html+='<a href="javascript:;"><img src="'+val.img+'" alt=""></a>';
			              	_html+='</li>';
			              });
			            $('.tulist .tulist_main ul').html(_html);
			            thisLi = $('.tulist_main li');         // 小图选择器
			            var mySwiper = new Swiper('.tulist_main',{
				            slidesPerView :'auto',
				            slideToClickedSlide:true,
				            autoplayDisableOnInteraction:false,
				            onInit: function(swiper){
				                //Swiper初始化了
				                minlength = swiper.imagesToLoad.length;
				                ImgShow(swiper.activeIndex);
				            },
				        })

				        // 左切换按钮
					    $('.lpalbumBox_l .prev-btn').on('click',function(){
					        (minindex == 0) ? minindex = 0 : minindex--;
					        ImgShow(minindex)
					        if(minlength > 5 && minindex <= minlength-1 ){      //其中 12 为小图一排能显示12张图
					            mySwiper.setWrapperTransition(800);                 //设定过渡的时间
					            mySwiper.setWrapperTranslate('-'+minindex*152);      //小图滑动，96为图片一次滑动的距离
					        }
					        // console.log(minindex)
					    })
					    //右切换按钮
					    $('.lpalbumBox_l .next-btn').on('click',function(){
					        (minindex == minlength-1) ? minindex = minlength-1 : minindex++;
					        ImgShow(minindex)
					        if(minlength > 5 && minindex <= minlength-5 ){        //其中 12 为小图一排能显示12张图
					            mySwiper.setWrapperTransition(800);                 //设定过渡的时间
					            mySwiper.setWrapperTranslate('-'+minindex*152);      //小图滑动，96为图片一次滑动的距离
					        }
					    })

						//小图点击事件
						$('body .tulist_main').on('click','li',function(){
						    var thit = $(this);
						    minindex = thit.index();
						    ImgShow(minindex)
						})
						$('.tulist_main li[data-id="'+urlid+'"]').click();
						mySwiper.setWrapperTranslate('-'+urlid*152);      //小图滑动，96为图片一次滑动的距离
						
						// 获取图片地址并显示图片
						function ImgShow(index){
						    var URL = thisLi.eq(index).attr('data-url');
						    $('.list_length em').html((index+1))
						    $('.showimg_center .img_c em img').attr('src',URL);
						    $('.showimg_center .img_c').attr('data-index',index);
						    $('.showimg_center .img_c').attr('data-id',album_id);
						    $('.showimg_center .img_c').attr('house-id',lpid);
						    $('.showimg_center .img_c').attr('data-type',typeName);
						    thisLi.eq(index).addClass('on').siblings().removeClass('on');
						}
			          }
			      }
			  });
		}else{
			that.addClass('on').siblings().removeClass('on');
			var _html="";
			$('.img_c_cin').html('播放视频');

			$('.showimg_center .y_v3videoBox').show();
			// 初始化变量并赋值
		    var minindex = 0;           //  小图所在的下标
		    var minlength = 0;          //  小图所有的总数

		    // 以三行 unbind 解除绑定事件，是为了多次点导航时，执行次的原因
		    $('.lpalbumBox_l .prev-btn').unbind();
		    $('.lpalbumBox_l .next-btn').unbind();
		    $('.tulist .tulist_main ul li').unbind();
			$('.tulist_main ul').html('');
			
          	_html+='<li class="swiper-slide" data-id="0" house-id="'+lpid+'" data-type="picture" data-id="0" data-url="'+videoImg+'">';
          	_html+='<a href="javascript:;"><img src="'+videoImg+'" alt=""></a>';
          	_html+='</li>';
            $('.tulist .tulist_main ul').html(_html);
            thisLi = $('.tulist_main li');         // 小图选择器
            var mySwiper = new Swiper('.tulist_main',{
	            slidesPerView :'auto',
	            slideToClickedSlide:true,
	            autoplayDisableOnInteraction:false,
	            onInit: function(swiper){
	                //Swiper初始化了
	                minlength = swiper.imagesToLoad.length;
	                ImgShow(swiper.activeIndex);
	            },
	        })

	        // 左切换按钮
		    $('.lpalbumBox_l .prev-btn').on('click',function(){
		        (minindex == 0) ? minindex = 0 : minindex--;
		        ImgShow(minindex)
		        if(minlength > 5 && minindex <= minlength-1 ){      //其中 12 为小图一排能显示12张图
		            mySwiper.setWrapperTransition(800);                 //设定过渡的时间
		            mySwiper.setWrapperTranslate('-'+minindex*148);      //小图滑动，96为图片一次滑动的距离
		        }
		        // console.log(minindex)
		    })
		    //右切换按钮
		    $('.lpalbumBox_l .next-btn').on('click',function(){
		        (minindex == minlength-1) ? minindex = minlength-1 : minindex++;
		        ImgShow(minindex)
		        if(minlength > 5 && minindex <= minlength-5 ){        //其中 12 为小图一排能显示12张图
		            mySwiper.setWrapperTransition(800);                 //设定过渡的时间
		            mySwiper.setWrapperTranslate('-'+minindex*148);      //小图滑动，96为图片一次滑动的距离
		        }
		    })

			//小图点击事件
			$('body .tulist_main').on('click','li',function(){
			    var thit = $(this);
			    minindex = thit.index();
			    ImgShow(minindex)
			})
			$('.tulist_main li[data-id="'+urlid+'"]').click();
			mySwiper.setWrapperTranslate('-'+urlid*148);      //小图滑动，96为图片一次滑动的距离
			
			// 获取图片地址并显示图片
			function ImgShow(index){
			    var URL = thisLi.eq(index).attr('data-url');
			    $('.list_length em').html((index+1))
			    $('.showimg_center .img_c em img').attr('src',URL);
			    $('.showimg_center .img_c').attr('data-index',index);
			    $('.showimg_center .img_c').attr('data-id',album_id);
			    $('.showimg_center .img_c').attr('house-id',lpid);
			    $('.showimg_center .img_c').attr('data-type',typeName);
			    thisLi.eq(index).addClass('on').siblings().removeClass('on');
			}
		}
	})

	if (objUrl.album_id!=0) {
		$('.lpalbumBox_rNav a[album-id="'+objUrl.album_id+'"]').click();
	}else{
		$('.lpalbumBox_rNav a').eq(0).click();
	}


	var randomX = 100;
	var randomY = 243;
	var randvalue = parseInt(Math.random() * (randomX - randomY + 1) + randomY);
	$('.bin_f_text p.kt span').html(randvalue);

})



$(function(){
 /*----------------------------------图片放大特效浏览--------------------------------------------*/
// 关闭按钮
    $('.weffects-cls').on('click',function(){
        $('.weffects').hide();
    })

// 大图触发
    var oindex = 0;
    $('body').on('click','.wwlargeimg',function(){
        $('.weffects').show();
        var that = $(this);
        var otype = that.attr('data-id');
        var oid = that.attr('house-id');
        var oty = that.attr('data-type');
        var nav = '';
        oindex = 0;
        if(that.attr('data-index') != undefined && that.attr('data-index') != 'undefined'){
            oindex = that.attr('data-index');
        }
       	if (oty=='picture') {
	        $.ajax({
	            type: "post",
	            url: '/public/gethouseablum',
	            data: {type:oty,id:oid,type_id:otype},
	            dataType: "json",
	            success: function(data){
	                if(data.code == 200){
	                    // 遍历导航
	                    if ($('body .y_v3videoBox').length>0) {
	                    	nav +='<a data-type="videoUrl" house-id="'+oid+'" data-id="0" href="javascript:void(0);">视频(1)</a>'
	                	}
	                    $.each(data.data.nav,function(k,v){
	                        nav += '<a house-id="'+oid+'" data-type="picture" data-id="'+v.type_id+'" href="javascript:void(0);">'+v.name+'</a>';
	                    })
	                    $('.weffects-list-nav').html('');
	                    $('.weffects-list-nav').append(nav);
	                }
	                $('.weffects-list-nav a[data-id="'+otype+'"]').click();
	            }
	        });
        }else if(oty=='videoUrl'){
        	$.ajax({
	            type: "post",
	            url: '/public/gethouseablum',
	            data: {type:'picture',id:oid,type_id:otype},
	            dataType: "json",
	            success: function(data){
	                if(data.code == 200){
	                    // 遍历导航
	                    if ($('body .y_v3videoBox').length>0) {
	                    	nav +='<a data-type="videoUrl" house-id="'+oid+'" data-id="0" href="javascript:void(0);">视频(1)</a>'
	                    };
	                    $.each(data.data.nav,function(k,v){
	                        nav += '<a house-id="'+oid+'" data-type="picture" data-id="'+v.type_id+'" href="javascript:void(0);">'+v.name+'</a>';
	                    })
	                    $('.weffects-list-nav').html('');
	                    $('.weffects-list-nav').append(nav);
	                }
	                $('.weffects-list-nav a[data-id="'+otype+'"]').click();
	            }
	        });
        }
    })
// 放大导航点击
    $('.weffects-list-nav').on('click','a',function(){
    	oindex = 0;
        var that = $(this);
        var otype = that.attr('data-id');
        var oid = that.attr('house-id');
        var oty = that.attr('data-type');
        var li = '';
        var v_html='';
        // 初始化变量并赋值
        var minindex = 0;           //  小图所在的下标
        var minlength = 0;          //  小图所有的总数
        that.addClass('on').siblings().removeClass('on');
        if (oty=='picture') {
	        // 以三行 unbind 解除绑定事件，是为了多次点导航时，执行次的原因
	        $('.weffects .prev-btn').unbind();
	        $('.weffects .next-btn').unbind();
	        $('.weffects-list-imgbox li').unbind();
	        $.ajax({
	            type: "post",
	            url: '/public/gethouseablum',//'/js/home.json',
	            data: {type:oty,id:oid,type_id:otype},
	            dataType: "json",
	            success: function(data){
	                if(data.code == 200){
	                    // 遍历导航
	                    li += '<div class="weffects-list-img">';
	                    li += '<ul class="swiper-wrapper">';
	                    $.each(data.data.imgarr,function(k,v){
	                        li += '<li class="swiper-slide" data-url="'+v.url+'"><img src="'+v.url+'" alt=""></li>';
	                    })
	                    li += '</ul>';
	                    li+='<div class="swiper-button-prev"></div>';
    					li+='<div class="swiper-button-next"></div>';
	                    li += '</div>';
	                    $('.weffects-list-imgbox').html('');
	                    $('.weffects-list-imgbox').append(li);
	                }

	                var thisLi = $('.weffects-list-imgbox li');         // 小图选择器
	                var mySwiper = new Swiper('.weffects-list-img',{
	                    slidesPerView :'auto',
	                    spaceBetween : 8,
	                    slideToClickedSlide:true,
	                    autoplayDisableOnInteraction:false,
	                    prevButton:'.swiper-button-prev',
						nextButton:'.swiper-button-next',
	                    onInit: function(swiper){
	                        //Swiper初始化了
	                        minlength = swiper.imagesToLoad.length;
	                        ImgShow(swiper.activeIndex);
	                        // console.log(minlength)
	                    },

	                })
	                $('.weffects .prev-btn,.weffects .next-btn').show();
	                // 左切换按钮
	                $('.weffects .prev-btn').on('click',function(){
	                    (minindex == 0) ? minindex = 0 : minindex--;
	                    ImgShow(minindex)
	                    if(minlength > 7 && minindex <= minlength % 7 ){      //其中 12 为小图一排能显示12张图
	                        mySwiper.setWrapperTransition(800);                 //设定过渡的时间
	                        mySwiper.setWrapperTranslate('-'+minindex*156);      //小图滑动，96为图片一次滑动的距离
	                    }
	                    // console.log(minindex)
	                })
	                //右切换按钮
	                $('.weffects .next-btn').on('click',function(){
	                    (minindex == minlength-1) ? minindex = minlength-1 : minindex++;

	                    ImgShow(minindex)
	                    if(minlength > 7 && minindex <= minlength-7 ){        //其中 12 为小图一排能显示12张图
	                        mySwiper.setWrapperTransition(800);                 //设定过渡的时间
	                        mySwiper.setWrapperTranslate('-'+minindex*156);      //小图滑动，96为图片一次滑动的距离
	                    }
	                    // console.log(minindex)
	                })
	                //小图点击事件
	                $('.weffects-list-imgbox li').on('click',function(){
	                    var thit = $(this);
	                    minindex = thit.index();
	                    ImgShow(minindex)
	                    // console.log(minindex)
	                })
	                $('.weffects-list-imgbox li').eq(oindex).click();
	                // 获取图片地址并显示图片
	                function ImgShow(index){
	                	$('.magnify-box').html('');
	                    var URL = thisLi.eq(index).attr('data-url');
	                    // $('.magnify-box img').attr('src',URL);
	                    $('.magnify-box').html('<img src="'+URL+'">');
	                    thisLi.eq(index).addClass('in').siblings().removeClass('in');
	                }
	            }
	        });
		}else if(oty=='videoUrl'){
            // 遍历导航
            li += '<div class="weffects-list-img">';
            li += '<ul class="swiper-wrapper">';
            li += '<li class="swiper-slide" data-url="'+videoImg+'"><img src="'+videoImg+'" alt=""></li>';
            li += '</ul>';
            li+='<div class="swiper-button-prev"></div>';
    		li+='<div class="swiper-button-next"></div>';
            li += '</div>';
            $('.weffects-list-imgbox').html('');
            $('.weffects-list-imgbox').html(li);
            
            var thisLi = $('.weffects-list-imgbox li');         // 小图选择器
            var mySwiper = new Swiper('.weffects-list-img',{
                slidesPerView :'auto',
                spaceBetween : 8,
                slideToClickedSlide:true,
                autoplayDisableOnInteraction:false,
                prevButton:'.swiper-button-prev',
				nextButton:'.swiper-button-next',
                onInit: function(swiper){
                    //Swiper初始化了
                    minlength = swiper.imagesToLoad.length;
                    ImgShow(swiper.activeIndex);
                    // console.log(minlength)
                },

            })
            $('.weffects .prev-btn,.weffects .next-btn').hide();
            // 左切换按钮
            $('.weffects .prev-btn').on('click',function(){
                (minindex == 0) ? minindex = 0 : minindex--;
                ImgShow(minindex)
                if(minlength > 7 && minindex <= minlength % 7 ){      //其中 12 为小图一排能显示12张图
                    mySwiper.setWrapperTransition(800);                 //设定过渡的时间
                    mySwiper.setWrapperTranslate('-'+minindex*156);      //小图滑动，96为图片一次滑动的距离
                }
                // console.log(minindex)
            })
            //右切换按钮
            $('.weffects .next-btn').on('click',function(){
                (minindex == minlength-1) ? minindex = minlength-1 : minindex++;

                ImgShow(minindex)
                if(minlength > 7 && minindex <= minlength-7 ){        //其中 12 为小图一排能显示12张图
                    mySwiper.setWrapperTransition(800);                 //设定过渡的时间
                    mySwiper.setWrapperTranslate('-'+minindex*156);      //小图滑动，96为图片一次滑动的距离
                }
                // console.log(minindex)
            })
            //小图点击事件
            $('.weffects-list-imgbox li').on('click',function(){
                var thit = $(this);
                minindex = thit.index();
                ImgShow(minindex)
            })
            // $('.weffects-list-imgbox li').eq(oindex).click();
            // 获取图片地址并显示图片
            function ImgShow(index){
            	$('.magnify-box').html('');
            	var URL = thisLi.eq(index).attr('data-url');
                thisLi.eq(index).addClass('in').siblings().removeClass('in');
                v_html+='<div class="vidplay">';
            	v_html+='<p><img src="'+URL+'" alt=""></p>';
                v_html+='<i><img src="/image/zuo14.png" alt=""></i>';
                v_html+='<video class="pause" preload controls src="'+videoR+'"></video>';
            	v_html+='</div>';
                $('.magnify-box').html(v_html);
            }
		}
    })

    /*----------------------------------图片放大特效浏览end--------------------------------------------*/


    $('body').on('click','.vidplay',function(){
    	if ($(this).find('video').hasClass('pause')) {
            $(this).find('p').hide();
            $(this).find('i').hide();
            $(this).find('video').trigger("play");
            $(this).find('video').removeClass('pause');
            $(this).find('video').addClass('play');
        } else {
            $(this).find('video').trigger("pause");
            $(this).find('video').removeClass('play');
            $(this).find('video').addClass('pause');
        }
    })


})