2
이미지 갤러리를 만들려고합니다. 이미지를 클릭하면 크기가 조정되고 사라집니다. Firefox 및 Internet Explorer에서는 정상적으로 작동하지만 Chrome에서는 느리게 작동합니다. 문제를 해결하기 위해 며칠 동안 노력했지만 대답을 찾을 수 없습니다. 내가 생각하는 CSS 문제를 좁혔다. 페이지에 맞게 이미지를 resisez '.resize'클래스를 제거하면 그것은 엉망으로 보이지만 잘 작동합니다. 문제는 큰 이미지에서만 발생합니다. .load()를 시도했지만 작동하지 않는 것 같습니다. 가장 불합리한 생각은 저 클래스가 없으면 모든 것이 작동한다는 것입니다. 여기 Jquery fadeIn Chrome에서 지연됨
내 코드입니다 :HTML :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Gallery</title>
<link rel="stylesheet" href="Gallery.css">
</head>
<body>
<div class="gallery">
<div class="images">
<ul class="resize">
<li><img src="img/img1.jpg" alt="image1"></li>
<li><img src="img/img2.jpg" alt="image2"></li>
<li><img src="img/img3.jpg" alt="image3"></li>
<li><img src="img/img4.jpg" alt="image4"></li>
<li><img src="img/img5.jpg" alt="image5"></li>
<li><img src="img/img6.jpg" alt="image6"></li>
<li><img src="img/img7.jpg" alt="image7"></li>
<li><img src="img/img8.jpg" alt="image8"></li>
</ul>
</div>
<div class="clear"></div>
<div class="backgroundOpacity"></div>
<div class="imageBox">
<img class="displayImage" src="" alt="displayImage">
<img class="loadingGif" src="img/loading.gif" alt="loadgindGif">
<img class="closeImage" src="img/closeImage.png" alt="close">
<p class="imageNumber">1</p>
</div>
</div>
<script type="text/javascript" src="jquery-1.8.2.js"></script>
<script type="text/javascript" src="Gallery.js"></script>
<script type="text/javascript">
window.onload = function(){
var content = $('.gallery'),
gallery = new Gallery(content);
}
</script>
</body>
</html>
CSS의 :
*{
margin: 0;
padding: 0;
}
/*-------------------------gallery-----------------------*/
.gallery{
width: 1400px;
margin: 100px auto 0;
}
/*------------------------------------------------*/
/*-------------------------images-----------------------*/
.images{
width: inherit;
height: inherit;
}
.images li{
list-style-type: none;
float: left;
margin: 0 20px 20px 0;
width: 300px;
height: 150px;
cursor: pointer;
padding: 5px;
border: solid 1px #CCC;
-moz-box-shadow: 1px 1px 5px #999;
-webkit-box-shadow: 1px 1px 5px #999;
box-shadow: 1px 1px 5px #999;
}
.resize img{
width: 300px;
height: 150px;
}
/*------------------------------------------------*/
/*-------------------------imageBox-----------------------*/
.imageBox{
background-color: white;
clear: both;
width: 300px;
height: 150px;
display: none;
position: fixed;
overflow: visible;
}
.backgroundOpacity{
background-color: black;
width: 5000px;
height: 5000px;
position: fixed;
left: 0px;
top: 0px;
opacity: 0.7;
display: none;
}
.loadingGif{
display: block;
position: absolute;
}
.displayImage{
display: none;
}
.closeImage{
position: absolute;
top: -10px;
right: -10px;
cursor: pointer;
}
.imageNumber{
position: absolute;
bottom: 0px;
left: 0px;
font-family: sans-serif;
font-size: 18px;
font-weight: bold;
opacity: 0.6;
}
/*------------------------------------------------*/
.clear{
clear: both;
}
자바 스크립트 :
function Gallery (galleryDiv, resizeDuration, freeSpace) {
this.config = {
resizeDuration: 600,
freeSpace: 100
};
this.galleryDiv = galleryDiv;
this.imagesUl = this.galleryDiv.find('.images ul');
this.images = this.imagesUl.find('img');
this.backgroundOpacity = this.galleryDiv.find('.backgroundOpacity'); // the background div which when is clicked hides the imageBox
this.imageBox = this.galleryDiv.find('.imageBox'); // where the images will be displayed when they'r clicked
this.closeButton = this.imageBox.find('.closeImage'); // top-right x
this.loadingGif = this.imageBox.find('.loadingGif'); // the animated gif that gives the effect of 'loading'
this.imageNumber = this.imageBox.find('.imageNumber'); // bottom-left text
this.displayImage = this.imageBox.find('.displayImage'); // image to be displayed
this.currentImageIndex; // index of the current image
this.imagesWidth = new Array(); // the images default widths
this.imagesHeight = new Array(); // the images default heights
this.imagesSrc = new Array(); // the location of the images
this.imagesLength = this.images.length // number of images
this.imageBoxSize = new Array(); // [0] is width, [1] is height
this.loadingGifSize = new Array() // [0] is width, [1] is height
this.canceled; // if loading procress was canceled this variable will alert the show function
this.freeSpace = freeSpace || this.config.freeSpace; // spcea between imageBox and window
this.resizeDuration = resizeDuration || this.config.resizeDuration; // duration to resize imageBox
this.init();
};
Gallery.prototype.init = function() { // puts things in move
this.getImageAttributes().bind();
return this;
};
Gallery.prototype.bind = function() { // bind events
var self = this;
this.images.on('click', function() {
self.currentImageIndex = $(self.images).index($(this));
self.canceled = 0;
self.showImage();
});
$(window).on('resize', function() { // center the imagebox whenever the window is resized
self.centerImageBox(self.imageBoxSize[0], self.imageBoxSize[1]);
});
$(this.closeButton).on('click', function() { // hide the image
self.hideImage();
});
$(this.backgroundOpacity).on('click', function() {
self.hideImage();
self.canceled = 1;
});
return this;
};
Gallery.prototype.getImageAttributes = function() { // get the default images sizes
var self = this;
this.imagesUl.removeClass('resize');
$.each(this.images, function (index, value) {
self.imagesWidth[index] = value.width;
self.imagesHeight[index] = value.height;
self.imagesSrc[index] = $(value).attr('src');
});
this.imagesUl.addClass('resize');
this.imageBox.show();
this.loadingGifSize = [this.loadingGif.width(), this.loadingGif.height()];
this.imageBox.hide();
return this;
};
Gallery.prototype.showImage = function() { // shows the image when it is clicked
var self = this,
index = this.currentImageIndex,
imageSize = new Array(), // [0] is width, [1] is height,
imageBoxHeight, imageBoxWidth;
//show imageBox and resize it
imageSize = this.resizeImage();
this.imageBoxSize = [imageSize[0], imageSize[1]]; // captures the current imageBox size
this.imageNumber.text('Image ' + (index+1) + ' of ' + this.imagesLength); // set bottom-left text
this.displayImage.attr('src', this.imagesSrc[index]).css({
'width': imageSize[0],
'height': imageSize[1]
});
this.backgroundOpacity.show();
this.imageBox.show();
this.loadingGif.show();
this.imageBox.animate({
'width': imageSize[0],
'height': imageSize[1]
},{
duration: self.resizeDuration,
step: function() {
// center the image box with every resize;
imageBoxWidth = self.imageBox.width();
imageBoxHeight = self.imageBox.height();
self.centerImageBox(imageBoxWidth, imageBoxHeight, 1);
// center the loadingGif
self.loadingGif.css({
'right': (imageBoxWidth - self.loadingGifSize[0])/2,
'top': (imageBoxHeight - self.loadingGifSize[1])/2
});
},
complete: function() {
if(!self.canceled){
self.closeButton.show();
self.imageNumber.show();
self.loadingGif.hide();
self.displayImage.fadeIn(500);
}
else self.hideImage();
}
});
return this;
};
Gallery.prototype.hideImage = function() { // hide the image
//reset imageBox and other elements atributes
this.imageBox.css({
'width': '300px',
'height': '300px'
});
this.imageBox.hide();
this.backgroundOpacity.hide();
this.closeButton.hide();
this.imageNumber.hide();
this.displayImage.hide();
return this;
};
Gallery.prototype.resizeImage = function() { // resize the image to the current monitor size
var index = this.currentImageIndex,
imageWidth = this.imagesWidth[index], imageHeight = this.imagesHeight[index],
windowWidth = $(window).width(), windowHeight = $(window).height(),
ratio = imageWidth/imageHeight;
while(imageWidth > (windowWidth - this.freeSpace) || imageHeight > (windowHeight-this.freeSpace)){
if(imageWidth > windowWidth){
imageWidth = windowWidth - this.freeSpace;
imageHeight = imageWidth/ratio;
}
else{
imageHeight = windowHeight - this.freeSpace;
imageWidth = imageHeight * ratio;
}
}
return [imageWidth, imageHeight];
};
Gallery.prototype.centerImageBox = function (width, height, resize) { // if animated parameter is specified, the imageBox will not pe resized
var windowWidth = $(window).width(),
windowHeight = $(window).height(),
index = this.currentImageIndex,
imageSize = new Array(), // [0] is width, [1] is height
imageDefaultWidth = this.imagesWidth[index], imageDefaultHeight = this.imagesHeight[index];
if(windowWidth < 200 || windowHeight < 200) this.imageBox.hide(); // if the window is too small, hide the imageBox, otherwise it looks silly
else if(this.backgroundOpacity.css('display') === 'block') this.imageBox.show();
this.imageBox.css({
'right': (windowWidth - width)/2,
'top': (windowHeight - height)/2
});
// resize the image and the imageBox, if the imageBox is bigger than the window, or the image can be bigger
if(!resize){
imageSize = this.resizeImage();
width = imageSize[0];
height = imageSize[1];
this.imageBoxSize = [width, height];
this.imageBox.css({
'width': width,
'height': height,
'right': (windowWidth - width)/2,
'top': (windowHeight - height)/2
});
this.displayImage.css({
'width': imageSize[0],
'height': imageSize[1]
});
}
return this;
};
누군가가 도움을 줄 수 있다면 크게 감사하겠습니다 나를.
여기 요청한 프로젝트는 http://jsfiddle.net/uaD5s/6/입니다. 처음부터 이렇게 했어야 했어. 미안.
피들링을 설정 하시겠습니까? http://jsfiddle.net – VIDesignz
나는 바이올린을 추가했으며 단지 알려주고 싶었습니다. –
환영합니다! 다행스럽게 도울 수있어! – VIDesignz