问题描述
|
我是JQUERY的完全菜鸟，正在慢慢学习。但是我已经下载了一个现有的全屏jquery画廊，尽管它对于单个div来说效果很好，但是如果我想让多个div用不同的拇指，则画廊会中断（下一个/上一个会跟踪所有div中称为“内容”的所有项目） ）。
这是jQuery代码：
// SLIDE PANEL GALLERY
$(function() {
/* this is the index of the last clicked picture */
var current = -1;
/* number of pictures */
var totalpictures = $(\'.content img\').size();
/* speed to animate the panel and the thumbs wrapper */
var speed = 500;
/* show the content */
$(\'.content\').show();
/*
when the user resizes the browser window,the size of the picture being viewed is recalculated;
*/
$(window).bind(\'resize\',function() {
var $picture = $(\'#wrapper\').find(\'img\');
resize($picture);
});
/*
when hovering a thumb,animate it\'s opacity
for a cool effect;
when clicking on it,we load the corresponding large image;
the source of the large image is stored as
the \"alt\" attribute of the thumb image
*/
$(\'.content > img\').hover(function () {
var $this = $(this);
$this.stop().animate({\'opacity\':\'1.0\'},200);
},function () {
var $this = $(this);
$this.stop().animate({\'opacity\':\'0.4\'},200);
}).bind(\'click\',function(){
var $this = $(this);
/* shows the loading icon */
$(\'#loading\').show();
$(\'<img/>\').load(function(){
$(\'#loading\').hide();
if($(\'#wrapper\').find(\'img\').length) return;
current = $this.index();
var $theImage = $(this);
/*
After it\'s loaded we hide the loading icon
and resize the image,given the window size;
then we append the image to the wrapper
*/
resize($theImage);
$(\'#wrapper\').append($theImage);
/* make its opacity animate */
$theImage.fadeIn(800);
/* and finally slide up the panel */
$(\'#panel\').animate({\'height\':\'100%\'},speed,function(){
/*
if the picture has a description,it\'s stored in the title attribute of the thumb;
show it if it\'s not empty
*/
var title = $this.attr(\'title\');
if(title != \'\')
$(\'#description\').html(title).show();
else
$(\'#description\').empty().hide();
/*
if our picture is the first one,don\'t show the \"previous button\"
for the slideshow navigation;
if our picture is the last one,don\'t show the \"next button\"
for the slideshow navigation
*/
if(current==0)
$(\'#prev\').hide();
else
$(\'#prev\').fadeIn();
if(current==parseInt(totalpictures-1))
$(\'#next\').hide();
else
$(\'#next\').fadeIn();
/*
we set the z-index and height of the thumbs wrapper
to 0,because we want to slide it up afterwards,when the user clicks the large image
*/
$(\'#thumbsWrapper\').css({\'z-index\':\'0\',\'height\':\'0px\'});
});
}).attr(\'src\',$this.attr(\'alt\'));
});
/*
when hovering a large image,we want to slide up the thumbs wrapper again,and reset the panel (like it was initially);
this includes removing the large image element
*/
$(\'#wrapper > img\').live(\'click\',function(){
$this = $(this);
$(\'#description\').empty().hide();
$(\'#thumbsWrapper\').css(\'z-index\',\'10\')
.stop()
.animate({\'height\':\'100%\'},function(){
var $theWrapper = $(this);
$(\'#panel\').css(\'height\',\'0px\');
$theWrapper.css(\'z-index\',\'0\');
/*
remove the large image element
and the navigation buttons
*/
$this.remove();
$(\'#prev\').hide();
$(\'#next\').hide();
});
});
/*
when we are viewing a large image,if we navigate to the right/left we need to know
which image is the corresponding neighbour.
we know the index of the current picture (current),so we can easily get to the neighbour:
*/
$(\'#next\').bind(\'click\',function(){
var $this = $(this);
var $nextimage = $(\'.content img:nth-child(\'+parseInt(current+2)+\')\');
navigate($nextimage,\'right\');
});
$(\'#prev\').bind(\'click\',function(){
var $this = $(this);
var $previmage = $(\'.content img:nth-child(\'+parseInt(current)+\')\');
navigate($previmage,\'left\');
});
/*
given the next or previous image to show,and the direction,it loads a new image in the panel.
*/
function navigate($nextimage,dir){
/*
if we are at the end/beginning
then there\'s no next/previous
*/
if(dir==\'left\' && current==0)
return;
if(dir==\'right\' && current==parseInt(totalpictures-1))
return;
$(\'#loading\').show();
$(\'<img/>\').load(function(){
var $theImage = $(this);
$(\'#loading\').hide();
$(\'#description\').empty().fadeOut();
$(\'#wrapper img\').stop().fadeOut(500,function(){
var $this = $(this);
$this.remove();
resize($theImage);
$(\'#wrapper\').append($theImage.show());
$theImage.stop().fadeIn(800);
var title = $nextimage.attr(\'title\');
if(title != \'\'){
$(\'#description\').html(title).show();
}
else
$(\'#description\').empty().hide();
if(current==0)
$(\'#prev\').hide();
else
$(\'#prev\').show();
if(current==parseInt(totalpictures-1))
$(\'#next\').hide();
else
$(\'#next\').show();
});
/*
increase or decrease the current variable
*/
if(dir==\'right\')
++current;
else if(dir==\'left\')
--current;
}).attr(\'src\',$nextimage.attr(\'alt\'));
}
/*
resizes an image given the window size,considering the margin values
*/
function resize($image){
var windowH = $(window).height()-150;
var windowW = $(window).width()-80;
var theImage = new Image();
theImage.src = $image.attr(\"src\");
var imgwidth = theImage.width;
var imgheight = theImage.height;
if((imgwidth > windowW)||(imgheight > windowH)){
if(imgwidth > imgheight){
var newwidth = windowW;
var ratio = imgwidth / windowW;
var newheight = imgheight / ratio;
theImage.height = newheight;
theImage.width= newwidth;
if(newheight>windowH){
var newnewheight = windowH;
var newratio = newheight/windowH;
var newnewwidth =newwidth/newratio;
theImage.width = newnewwidth;
theImage.height= newnewheight;
}
}
else{
var newheight = windowH;
var ratio = imgheight / windowH;
var newwidth = imgwidth / ratio;
theImage.height = newheight;
theImage.width= newwidth;
if(newwidth>windowW){
var newnewwidth = windowW;
var newratio = newwidth/windowW;
var newnewheight =newheight/newratio;
theImage.height = newnewheight;
theImage.width= newnewwidth;
}
}
}
$image.css({\'width\':theImage.width+\'px\',\'height\':theImage.height+\'px\'});
}
});
解决方法
编辑：我希望这一工作！ http://jsbin.com/uwafi6/5
我已经为您完成了操作，这里：http://jsbin.com/uwafi6/4
将第一行更改为：
jQuery.fn.createGallery = function() {
var gallery = this;
gallery.find(\'.next\')
gallery.find(\'.prev\')
$(\'#next\')
$(\'#prev\')
$(\'#myFirstGallery\').createGallery();
依赖报错 idea导入项目后依赖报错，解决方案：https://blog....
错误1：gradle项目控制台输出为乱码 # 解决方案：https://bl...