제이쿼리 롤링 배너 질문 드립니다.
본문
웹에서 아래 갤러리 쓰시거나 써보신분 계시나요????
GalleryView
코드 원문 사이트 링크 : http://spaceforaname.com/galleryview/#demos
아래 갤러리 에서 이미지 클릭하면 화면 전환 하고싶은데 코드 구조 때문인지
<a href=""></a> 가 먹지를 않네요... 이미지 정렬이 ul li 로 되어있어서 보통 li 위나 img 위에다가
a 걸면 그냥 걸려서 하면 되겠구나 하는데 아예 안대네요;; 온클릭도 써봤고
클릭이벤트 막는거 같은거 바꿔봐도 안대고,.,
제이쿼리 겔러리는 [jquery galleryview 3.0] 씁니다...
멘토가 없고 혼자 그냥 마구마구 하는 타입이라 너무 힘이듭니다. 정말 정말요 ㅜㅜ
진짜 막히면 답도없고 검색해도 안나올경우엔 진짜 멘붕이에요..
정말 정말 부탁드립니다. 조언좀 부탁드립니다. ㅜㅠ부탁 부탁드립니다.
자바 코드를 적으려하면 너무 길어서 적을수가 없네요 ㅜㅠ 일단 스크롤 코드만 적어봅니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GalleryView - Default Demo</title>
<!-- First, add jQuery (and jQuery UI if using custom easing or animation -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<!-- Second, add the Timer and Easing plugins -->
<script type="text/javascript" src="../js/jquery.timers-1.2.js"></script>
<script type="text/javascript" src="../js/jquery.easing.1.3.js"></script>
<!-- Third, add the GalleryView Javascript and CSS files -->
<script type="text/javascript" src="../js/jquery.galleryview-3.0-dev.js"></script>
<link type="text/css" rel="stylesheet" href="../css/jquery.galleryview-3.0-dev.css" />
<!-- Lastly, call the galleryView() function on your unordered list(s) -->
<script type="text/javascript">
$(function(){
$('#myGallery').galleryView({
filmstrip_style: 'showall',});
});
</script>
</head>
<body>
<ul id="myGallery">
<li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp1.jpg" alt="Lone Tree Yellowstone" />
<li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp2.jpg" alt="Is He Still There?!" />
<li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp4.jpg" alt="Noni Nectar For Green Gecko" />
<li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp7.jpg" alt="Flight of an Eagle Owl" />
<li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp14.jpg" alt="Winter Lollipops" />
<li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp26.jpg" alt="Day of Youth" />
<li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp27.jpg" alt="Sunbathing Underwater" />
<li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp28.jpg" alt="Untitled" />
<li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp41.jpg" alt="New Orleans Streetcar" />
<li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp49.jpg" alt="By The Wind of Chance" />
<li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp52.jpg" alt="Fishing on the Cloud" />
<li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp53.jpg" alt="Blue Lagoon" />
<li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp54.jpg" alt="Time" />
</ul>
<p>Please view the source of this page if you are having difficulties setting up GalleryView.</p>
</body>
</html>
답변 3
js를 화면 클릭시
function _act_link(해당화면번호) 함수를 호출하도록 하였습니다
demo.php 같이 첨부했구요.
demo.php 보기 힘드시면...
js만 쓰시고 _act_link(no)만 적용해서 사용하셔도 될것 같네요
링크는
link[0] = http://www.naver.com;
link[1] = http://www.sir.co.kr;
이런식으로 지정하시면 됩니다.
사랑합니다 감사합니다!
http://cloud1.genedigm.com/test20140715/demos/
# jquery.galleryview-3.0-dev.js
/*
})(jQuery);
Author: Jack Anderson
Version: 3.0 DEVELOPMENT
See README.txt for instructions on how to markup your HTML
*/
// Make sure Object.create is available in the browser (for our prototypal inheritance)
// Courtesy of Douglas Crockford
var current_scene = "";
if (typeof Object.create !== 'function') {
Object.create = function (o) {
function F() {}
F.prototype = o;
return new F();
};
}
(function ($) {
// custom image object
var gvImage = function (img) {
this.src = {
panel: img.attr('src'),
frame: img.data('frame') || img.attr('src')
};
this.scale = {
panel: null,
frame: null
};
this.height = 0;
this.width = 0;
this.attrs = {
title: img.attr('title') || img.attr('alt'),
description: img.data('description')
};
this.href = null;
this.dom_obj = null;
return this;
},
// utility function wrapper
gv = {
getInt: function(i) {
i = parseInt(i, 10);
return isNaN(i) ? 0 : i;
},
innerWidth: function(elem) {
return this.getInt(elem.css('width')) || 0;
},
outerWidth: function(elem) {
return this.innerWidth(elem) +
this.extraWidth(elem);
},
extraWidth: function(elem) {
return this.getInt(elem.css('paddingLeft')) +
this.getInt(elem.css('paddingRight')) +
this.getInt(elem.css('borderLeftWidth')) +
this.getInt(elem.css('borderRightWidth'));
},
innerHeight: function(elem) {
return this.getInt(elem.css('height'))|| 0;
},
outerHeight: function(elem) {
return this.innerHeight(elem) +
this.extraHeight(elem);
},
extraHeight: function(elem) {
return this.getInt(elem.css('paddingTop')) +
this.getInt(elem.css('paddingBottom')) +
this.getInt(elem.css('borderTopWidth')) +
this.getInt(elem.css('borderBottomWidth'));
}
},
/*
GalleryView - Object
The main gallery class
*/
GalleryView = {
// array of dom elements
elems: [
'.gv_galleryWrap', '.gv_gallery', '.gv_panelWrap', '.gv_panel',
'img.gv_image', '.gv_infobar', '.gv_filmstripWrap', '.gv_filmstrip',
'.gv_frame', '.gv_thumbnail', '.gv_caption', 'img.gv_thumb',
'.gv_navWrap', '.gv_navNext', '.gv_navPrev', '.gv_navPlay',
'.gv_panelNavNext', '.gv_panelNavPrev', '.gv_overlay', '.gv_showOverlay',
'.gv_imageStore'
],
// create a jQuery element and apply attributes
createElem: function(attrs,elem) {
elem = document.createElement(elem);
var $elem = $(elem);
return $elem.attr(attrs);
},
// get the position of an element with respect
// to the gallery wrapper
getPos: function (el) {
var self = this,
dom = this.dom,
el = el[0],
el_id = el.id,
left = 0,
top = 0,
gPos, gLeft, gTop;
if (!el) { return { top: 0, left: 0 }; }
if (el.offsetParent) {
do {
left += el.offsetLeft;
top += el.offsetTop;
} while (el = el.offsetParent);
}
//If we want the position of the gallery itself, return it
if (el_id === self.id) { return { left: left, top: top }; }
//Otherwise, get position of element relative to gallery
else {
gPos = self.getPos(dom.galleryWrap);
gLeft = gPos.left;
gTop = gPos.top;
return { left: left - gLeft, top: top - gTop };
}
},
// determine if mouse is within the boundary of the gallery wrapper
mouseIsOverGallery: function (x, y) {
var self = this,
dom = this.dom,
pos = this.getPos(dom.gv_galleryWrap),
top = pos.top,
left = pos.left;
return x > left && x < left + gv.outerWidth(dom.gv_galleryWrap) && y > top && y < top + gv.outerHeight(dom.gv_galleryWrap);
},
// determine if mouse is within the boundary of the panel
mouseIsOverPanel: function (x, y) {
var self = this,
dom = this.dom,
pos = this.getPos(dom.gv_panelWrap),
gPos = this.getPos(dom.gv_galleryWrap),
top = pos.top + gPos.top,
left = pos.left + gPos.left;
return x > left && x < left + gv.outerWidth(dom.gv_panelWrap) && y > top && y < top + gv.outerHeight(dom.gv_panelWrap);
},
// create gvImage objects for each image in gallery
storeImages: function() {
var self = this;
this.sourceImgs = $('li>img',this.$el);
this.numImages = this.sourceImgs.length;
this.gvImages = [];
this.sourceImgs.each(function(i,img) {
self.gvImages[i] = new gvImage($(img));
});
},
setDimensions: function() {
var self = this,
dom = this.dom,
widths = {
prev: gv.innerWidth(dom.gv_navPrev),
play: gv.innerWidth(dom.gv_navPlay),
next: gv.innerWidth(dom.gv_navNext),
filmstrip: this.opts.frame_width,
fsMax: 0,
fsFull: 0
},
heights = {
prev: gv.innerHeight(dom.gv_navPrev),
play: gv.innerHeight(dom.gv_navPlay),
next: gv.innerHeight(dom.gv_navNext),
filmstrip: this.opts.frame_height + (this.opts.show_captions ? gv.outerHeight(dom.gv_caption) : 0),
fsMax: 0,
fsFull: 0
},
panels = [];
// nav
if(this.filmstripOrientation === 'horizontal') {
dom.gv_navWrap.css({
width: widths.prev + widths.play + widths.next,
height: Math.max(heights.prev,heights.play,heights.next)
});
} else {
if(this.opts.filmstrip_style === 'scroll' && this.opts.frame_width < (widths.prev + widths.play + widths.next)) {
dom.gv_navWrap.css({
width: Math.max(widths.prev, widths.play, widths.next),
height: heights.prev + heights.play + heights.next
});
} else {
dom.gv_navWrap.css({
width: widths.prev + widths.play + widths.next,
height: Math.max(heights.prev,heights.play,heights.next)
});
}
}
if(this.filmstripOrientation === 'vertical' && widths.filmstrip < (widths.prev + widths.play + widths.next)) {
dom.gv_navWrap.css({
width: Math.max(widths.prev, widths.play, widths.next),
height: heights.prev + heights.play + heights.next
});
} else {
dom.gv_navWrap.css({
width: widths.prev + widths.play + widths.next,
height: Math.max(heights.prev,heights.play,heights.next)
});
}
// panels
dom.gv_panel.css({
width: this.opts.panel_width,
height: this.opts.panel_height
});
dom.gv_panelWrap.css({
width: gv.outerWidth(dom.gv_panel),
height: gv.outerHeight(dom.gv_panel)
});
dom.gv_overlay.css({
width: this.opts.panel_width
});
$.each(this.gvImages,function(i,img) {
dom.gv_panelWrap.append(dom.gv_panel.clone(true));
});
dom.gv_panels = dom.gv_panelWrap.find('.gv_panel');
dom.gv_panels.remove();
// filmstrip
dom.gv_thumbnail.css({
width: this.opts.frame_width,
height: this.opts.frame_height
});
dom.gv_frame.css({
width: gv.outerWidth(dom.gv_thumbnail),
height: gv.outerHeight(dom.gv_thumbnail) + (this.opts.show_captions ? gv.outerHeight(dom.gv_caption) : 0),
marginRight: this.opts.frame_gap,
marginBottom: this.opts.frame_gap
});
if(this.filmstripOrientation === 'horizontal') {
this.filmstripSize = Math.floor((gv.outerWidth(dom.gv_panelWrap) - gv.outerWidth(dom.gv_navWrap)) / (gv.outerWidth(dom.gv_frame) + this.opts.frame_gap));
widths.fsMax = this.filmstripSize * (gv.outerWidth(dom.gv_frame) + this.opts.frame_gap);
widths.fsFull = this.gvImages.length * (gv.outerWidth(dom.gv_frame) + this.opts.frame_gap);
widths.filmstrip = Math.min(widths.fsMax,widths.fsFull);
if(this.opts.filmstrip_style !== 'scroll') {
heights.filmstrip = (Math.ceil(this.gvImages.length / this.filmstripSize) * (gv.outerHeight(dom.gv_frame) + this.opts.frame_gap)) - this.opts.frame_gap;
}
} else {
this.filmstripSize = Math.floor((gv.outerHeight(dom.gv_panelWrap) - gv.outerHeight(dom.gv_navWrap)) / (gv.outerHeight(dom.gv_frame) + this.opts.frame_gap));
heights.fsMax = this.filmstripSize * (gv.outerHeight(dom.gv_frame) + this.opts.frame_gap);
heights.fsFull = this.gvImages.length * (gv.outerHeight(dom.gv_frame) + this.opts.frame_gap);
heights.filmstrip = Math.min(heights.fsMax,heights.fsFull);
if(this.opts.filmstrip_style !== 'scroll') {
widths.filmstrip = (Math.ceil(this.gvImages.length / this.filmstripSize) * (gv.outerWidth(dom.gv_frame) + this.opts.frame_gap)) - this.opts.frame_gap;
}
}
dom.gv_filmstripWrap.css({
width: widths.filmstrip,
height: heights.filmstrip
});
// gallery
if(this.opts.show_filmstrip) {
if(this.filmstripOrientation === 'horizontal') {
dom.gv_gallery.css({
width: gv.outerWidth(dom.gv_panelWrap),
height: gv.outerHeight(dom.gv_panelWrap) + this.opts.frame_gap + (this.opts.show_filmstrip ? Math.max(gv.outerHeight(dom.gv_filmstripWrap),gv.outerHeight(dom.gv_navWrap)) : gv.outerHeight(dom.gv_filmstripWrap))
});
} else {
dom.gv_gallery.css({
width: gv.outerWidth(dom.gv_panelWrap) + this.opts.frame_gap + (this.opts.show_filmstrip ? Math.max(gv.outerWidth(dom.gv_filmstripWrap),gv.outerWidth(dom.gv_navWrap)) : gv.outerWidth(dom.gv_filmstripWrap)),
height: gv.outerHeight(dom.gv_panelWrap)
});
}
} else {
dom.gv_gallery.css({
width: gv.outerWidth(dom.gv_panelWrap),
height: gv.outerHeight(dom.gv_panelWrap)
});
}
dom.gv_galleryWrap.css({
width: gv.outerWidth(dom.gv_gallery),
height: gv.outerHeight(dom.gv_gallery),
padding: this.opts.frame_gap
});
},
setPositions: function() {
var self = this,
dom = this.dom,
navVert = 0, fsVert = 0,
navHorz = 0, fsHorz = 0,
vert, horz;
// determine vertical or horizontal offset
// if negative, apply to filmstrip, otherwise apply to navbar
if(this.filmstripOrientation === 'horizontal') {
vert = Math.round((gv.outerHeight(dom.gv_filmstripWrap) - gv.outerHeight(dom.gv_navWrap)) / 2);
if(vert < 0) { fsVert = -1 * vert; }
else { navVert = vert; }
} else {
horz = Math.round((gv.outerWidth(dom.gv_filmstripWrap) - gv.outerWidth(dom.gv_navWrap)) / 2);
if(horz < 0) { fsHorz = -1 * horz; }
else { navHorz = horz; }
}
// for horizontal filmstrips w/o navigation, center the filmstrip under the panel
if(!this.opts.show_filmstrip_nav && this.filmstripOrientation === 'horizontal') {
fsHorz = Math.floor((gv.outerWidth(dom.gv_panelWrap) - gv.outerWidth(dom.gv_filmstripWrap)) / 2);
}
dom.gv_panelNavNext.css({ top: (gv.outerHeight(dom.gv_panel) - gv.outerHeight(dom.gv_panelNavNext)) / 2, right: 10 });
dom.gv_panelNavPrev.css({ top: (gv.outerHeight(dom.gv_panel) - gv.outerHeight(dom.gv_panelNavPrev)) / 2, left: 10 });
// pin elements to gallery corners according to filmstrip position
switch(this.opts.filmstrip_position) {
case 'top':
dom.gv_navWrap.css({ top: navVert, right: navHorz });
dom.gv_panelWrap.css({ bottom: 0, left: 0 });
dom.gv_filmstripWrap.css({ top: fsVert, left: fsHorz });
break;
case 'right':
dom.gv_navWrap.css({ bottom: navVert, right: navHorz });
dom.gv_panelWrap.css({ top: 0, left: 0 });
dom.gv_filmstripWrap.css({ top: fsVert, right: fsHorz });
break;
case 'left':
dom.gv_navWrap.css({ bottom: navVert, left: navHorz });
dom.gv_panelWrap.css({ top: 0, right: 0 });
dom.gv_filmstripWrap.css({ top: fsVert, left: fsHorz });
break;
default:
dom.gv_navWrap.css({ bottom: navVert, right: navHorz });
dom.gv_panelWrap.css({ top: 0, left: 0 });
dom.gv_filmstripWrap.css({ bottom: fsVert, left: fsHorz });
break;
}
if(this.opts.overlay_position === 'top') {
dom.gv_overlay.css({ top: 0, left: -99999 });
dom.gv_showOverlay.css({ top: 0, left: 0 });
} else {
dom.gv_overlay.css({ bottom: 0, left: -99999 });
dom.gv_showOverlay.css({ bottom: 0, left: 0 });
}
if(!this.opts.show_filmstrip_nav) {
dom.gv_navWrap.remove();
}
},
buildFilmstrip: function() {
var self = this,
dom = this.dom,
framesLength = this.gvImages.length * ((this.filmstripOrientation === 'horizontal' ? this.opts.frame_width : this.opts.frame_height) + this.opts.frame_gap);
dom.gv_frame.append(dom.gv_thumbnail);
if(this.opts.show_captions) {
dom.gv_frame.append(dom.gv_caption);
}
dom.gv_thumbnail.css('opacity',this.opts.frame_opacity);
dom.gv_thumbnail.bind({
mouseover: function() {
if(!$(this).hasClass('current')) {
$(this).stop().animate({opacity:1},250);
}
},
mouseout: function() {
if(!$(this).hasClass('current')) {
$(this).stop().animate({opacity:self.opts.frame_opacity},250);
}
}
});
// Drop a clone of the frame element into the filmstrip for each source image
$.each(this.gvImages,function(i,img) {
dom.gv_frame.clone(true).prependTo(dom.gv_filmstrip);
});
dom.gv_filmstrip.css({
width: gv.outerWidth(dom.gv_frame),
height: gv.outerHeight(dom.gv_frame)
});
// If we are scrolling the filmstrip, and we can't show all frames at once,
// make two additional copies of each frame
if(this.opts.filmstrip_style === 'scroll') {
if(this.filmstripOrientation === 'horizontal') {
if(framesLength > gv.innerWidth(dom.gv_filmstripWrap)) {
dom.gv_filmstrip.find('.gv_frame').clone(true).appendTo(dom.gv_filmstrip).clone(true).appendTo(dom.gv_filmstrip);
dom.gv_filmstrip.css('width',framesLength * 3);
this.scrolling = true;
} else {
dom.gv_filmstrip.css('width',framesLength);
}
} else {
if(framesLength > gv.innerHeight(dom.gv_filmstripWrap)) {
dom.gv_filmstrip.find('.gv_frame').clone(true).appendTo(dom.gv_filmstrip).clone(true).appendTo(dom.gv_filmstrip);
dom.gv_filmstrip.css('height',framesLength * 3);
this.scrolling = true;
} else {
dom.gv_filmstrip.css('height',framesLength);
}
}
} else {
dom.gv_filmstrip.css({
width: parseInt(dom.gv_filmstripWrap.css('width'),10)+this.opts.frame_gap,
height: parseInt(dom.gv_filmstripWrap.css('height'),10)+this.opts.frame_gap
});
}
dom.gv_frames = dom.gv_filmstrip.find('.gv_frame');
$.each(dom.gv_frames,function(i,frame) {
$(frame).data('frameIndex',i);
});
dom.gv_thumbnails = dom.gv_filmstrip.find('div.gv_thumbnail');
},
buildGallery: function() {
var self = this,
dom = this.dom;
this.setDimensions();
this.setPositions();
if(this.opts.show_filmstrip) {
this.buildFilmstrip();
}
},
showInfoBar: function() {
if(!this.opts.show_infobar) { return; }
var self = this,
dom = this.dom;
dom.gv_infobar.stop().stopTime('hideInfoBar_' + self.id).html((this.iterator+1) + ' of ' + this.numImages).show().css('opacity',this.opts.infobar_opacity);
dom.gv_infobar.oneTime(2000 + this.opts.transition_speed,'hideInfoBar_' + self.id,function() {
dom.gv_infobar.fadeOut(1000);
});
},
initImages: function() {
var self = this,
dom = this.dom;
$.each(this.gvImages,function(i,gvImage) {
img = $('<img/>');
img.css('visibility','hidden').data('index',i);
img.bind('load.galleryview',function() {
var _img = $(this),
index = _img.data('index'),
width = this.width,
height = this.height,
parent = dom[(_img.data('parent')).type].eq((_img.data('parent')).index),
widthFactor = gv.innerWidth(parent) / width,
heightFactor = gv.innerHeight(parent) / height,
parentType = parent.hasClass('gv_panel') ? 'panel' : 'frame',
heightOffset = 0, widthOffset = 0;
gvImage.scale[parentType] = self.opts[parentType+'_scale'] === 'fit' ? Math.min(widthFactor,heightFactor) : Math.max(widthFactor,heightFactor);
widthOffset = Math.round((gv.innerWidth(parent) - (width * gvImage.scale[parentType])) / 2);
heightOffset = Math.round((gv.innerHeight(parent) - (height * gvImage.scale[parentType])) / 2);
_img.css({
width: width * gvImage.scale[parentType],
height: height * gvImage.scale[parentType],
top: heightOffset,
left: widthOffset
});
_img.hide().css('visibility','visible');
_img.remove().appendTo(parent);
if(parentType === 'frame') {
_img.fadeIn();
parent.parent().removeClass('gv_frame-loading');
parent.parent().find('.gv_caption').html(gvImage.attrs.title);
} else if(index === self.opts.start_frame - 1) {
parent.prependTo(dom.gv_panelWrap);
parent.removeClass('gv_panel-loading');
_img.fadeIn();
self.showInfoBar();
} else {
parent.removeClass('gv_panel-loading');
_img.show();
}
});
// store eventual image container as data property
// append to temporary storage element and set src
if(self.opts.show_panels) {
img.clone(true)
.data('parent',{type:'gv_panels',index:i})
.appendTo(dom.gv_imageStore)
.attr('src',gvImage.src.panel);
}
if(self.opts.show_filmstrip) {
img.clone(true)
.data('parent',{type:'gv_thumbnails',index:i})
.appendTo(dom.gv_imageStore)
.attr('src',gvImage.src.frame);
if(dom.gv_frames.length > dom.gv_panels.length) {
img.clone(true)
.data('parent',{type:'gv_thumbnails',index:i+self.numImages})
.appendTo(dom.gv_imageStore)
.attr('src',gvImage.src.frame);
img.clone(true)
.data('parent',{type:'gv_thumbnails',index:i+self.numImages+self.numImages})
.appendTo(dom.gv_imageStore)
.attr('src',gvImage.src.frame);
}
}
});
},
showNext: function() {
this.navAction = 'next';
this.showItem(this.frameIterator+1);
},
showPrev: function() {
this.navAction = 'prev';
this.showItem(this.frameIterator-1);
},
showItem: function(i) {
if(isNaN(i)) { return; }
if(!this.opts.show_filmstrip) { i = i % this.numImages; }
var self = this,
dom = this.dom,
frame_i = i,
newPanelStart,
oldPanelEnd,
oldIterator,
panel,
playing = false;
// don't go out of bounds
if(i >= this.numImages) {
i = i % this.numImages;
} else if(i < 0) {
i = this.numImages - 1;
if(dom.gv_frames != undefined) {
frame_i = dom.gv_frames.length - 1;
} else {
frame_i = dom.gv_panels.length - 1;
}
}
panel = dom.gv_panels.eq(i);
current_scene = i;
playing = this.playing;
if(playing) {
this.stopSlideshow(false);
}
this.unbindActions();
dom.gv_gallery.oneTime(this.opts.transition_speed,'bindActions_' + self.id,function(){ if(playing) { self.startSlideshow(false); } self.bindActions(); });
switch(this.opts.panel_animation) {
case 'crossfade':
dom.gv_panels.eq(this.iterator).fadeOut(this.opts.transition_speed,function(){$(this).remove();});
panel.hide().prependTo(dom.gv_panelWrap).fadeIn(this.opts.transition_speed);
break;
case 'fade':
dom.gv_panels.eq(this.iterator).remove();
panel.hide().prependTo(dom.gv_panelWrap).fadeIn(this.opts.transition_speed);
break;
case 'slide':
if(this.navAction === 'next' || (this.navAction === 'frame' && frame_i > this.iterator)) {
newPanelStart = gv.outerWidth(dom.gv_panel);
oldPanelEnd = -1 * gv.outerWidth(dom.gv_panel);
} else {
newPanelStart = -1 * gv.outerWidth(dom.gv_panel);
oldPanelEnd = gv.outerWidth(dom.gv_panel);
}
panel.css({ left:newPanelStart }).appendTo(dom.gv_panelWrap).animate(
{ left:0 },
{ duration: this.opts.transition_speed,easing: this.opts.easing }
);
dom.gv_panels.eq(this.iterator).animate(
{ left: oldPanelEnd },
{ duration: this.opts.transition_speed, easing: this.opts.easing, complete: function(){ $(this).remove(); } }
);
break;
default:
dom.gv_panels.eq(this.iterator).remove();
panel.prependTo(dom.gv_panelWrap);
break;
}
this.updateOverlay(i);
this.iterator = i;
this.updateFilmstrip(frame_i);
this.showInfoBar();
},
updateOverlay: function(i) {
var self = this,
dom = this.dom;
if(this.overlayVisible) {
this.hideOverlay(null,function(){
dom.gv_overlay.html('<h4>'+self.gvImages[i].attrs.title+'</h4><p>'+self.gvImages[i].attrs.description+'</p>');
self.showOverlay();
});
} else {
dom.gv_overlay.html('<h4>'+self.gvImages[i].attrs.title+'</h4><p>'+self.gvImages[i].attrs.description+'</p>');
dom.gv_overlay.css(this.opts.overlay_position,-1 * dom.gv_overlay.outerHeight());
}
},
hideOverlay: function(s,callback) {
var self = this,
dom = this.dom,
endOverlay = {},
endButton = {},
speed = s || self.opts.transition_speed / 2;
callback = callback || function(){};
endOverlay[this.opts.overlay_position] = -1 * dom.gv_overlay.outerHeight();
endButton[this.opts.overlay_position] = 0;
dom.gv_overlay.animate(endOverlay,{
duration: speed,
easing: 'swing',
complete: callback
});
dom.gv_showOverlay.animate(endButton,{
duration: speed,
easing: 'swing'
});
this.overlayVisible = false;
},
showOverlay: function(s) {
var self = this,
dom = this.dom,
startOverlay = {},
endOverlay = {},
endButton = {},
speed = s || self.opts.transition_speed / 2;
startOverlay[this.opts.overlay_position] = -1 * dom.gv_overlay.outerHeight();
startOverlay.left = 0;
endOverlay[this.opts.overlay_position] = 0;
endButton[this.opts.overlay_position] = dom.gv_overlay.outerHeight();
dom.gv_overlay.css(startOverlay);
dom.gv_overlay.animate(endOverlay,{ duration: speed, easing: 'swing' });
dom.gv_showOverlay.animate(endButton,{ duration: speed, easing: 'swing' });
this.overlayVisible = true;
},
updateFilmstrip: function(to) {
if(!this.opts.show_filmstrip) { this.frameIterator = to; return; }
var self = this,
dom = this.dom,
targetThumbs = dom.gv_thumbnails.eq(this.iterator),
filmstripIterator,
distance;
if(this.scrolling) {
targetThumbs = targetThumbs.
add(dom.gv_thumbnails.eq(this.iterator + this.numImages)).
add(dom.gv_thumbnails.eq(this.iterator + (2 * this.numImages)));
}
dom.gv_thumbnails.removeClass('current').animate({ opacity: this.opts.frame_opacity });
targetThumbs.stop().addClass('current').animate({ opacity: 1 },500);
if(this.scrolling) {
if(this.filmstripOrientation === 'horizontal') {
distance = (gv.outerWidth(dom.gv_frame) + this.opts.frame_gap) * (this.frameIterator - to);
if(distance > 0) {
distance = '+=' + Math.abs(distance);
} else {
distance = '-=' + Math.abs(distance);
}
dom.gv_filmstrip.animate({
left: distance
},{
duration: this.opts.transition_speed,
easing: this.opts.easing,
complete: function(){
if(to < self.numImages) {
dom.gv_filmstrip.css('left',gv.getInt(dom.gv_filmstrip.css('left'))-(self.numImages*(gv.outerWidth(dom.gv_frame)+self.opts.frame_gap)));
} else if(to >= (self.numImages * 2)) {
dom.gv_filmstrip.css('left',gv.getInt(dom.gv_filmstrip.css('left'))+(self.numImages*(gv.outerWidth(dom.gv_frame)+self.opts.frame_gap)));
}
self.frameIterator = (to % self.numImages) + self.numImages;
}
});
} else {
distance = (gv.outerHeight(dom.gv_frame) + this.opts.frame_gap) * (this.frameIterator - to);
if(distance > 0) {
distance = '+=' + Math.abs(distance);
} else {
distance = '-=' + Math.abs(distance);
}
dom.gv_filmstrip.animate({
top: distance
},{
duration: this.opts.transition_speed,
easing: this.opts.easing,
complete: function(){
// adjust filmstrip position to ensure that there is always at least one frame behind
// and (2 * filmstripSize) ahead
if(to === 0) {
dom.gv_filmstrip.css('top',gv.getInt(dom.gv_filmstrip.css('top'))-(self.numImages*(gv.outerHeight(dom.gv_frame)+self.opts.frame_gap)));
self.frameIterator = self.numImages;
} else if(to > ((self.numImages * 3) - (self.filmstripSize * 2))) {
dom.gv_filmstrip.css('top',gv.getInt(dom.gv_filmstrip.css('top'))+(self.numImages*(gv.outerHeight(dom.gv_frame)+self.opts.frame_gap)));
self.frameIterator = to - self.numImages;
} else {
self.frameIterator = to;
}
}
});
}
} else {
this.frameIterator = to;
}
},
startSlideshow: function(changeIcon) {
var self = this,
dom = this.dom;
if(!self.opts.enable_slideshow) { return; }
if(changeIcon) {
dom.gv_navPlay.removeClass('gv_navPlay').addClass('gv_navPause');
}
this.playing = true;
dom.gv_galleryWrap.everyTime(this.opts.transition_interval,'slideshow_'+this.id,function(){ self.showNext(); });
},
stopSlideshow: function(changeIcon) {
var self = this,
dom = this.dom;
if(changeIcon) {
dom.gv_navPlay.removeClass('gv_navPause').addClass('gv_navPlay');
}
this.playing = false;
dom.gv_galleryWrap.stopTime('slideshow_'+this.id);
},
enablePanning: function() {
var self = this,
dom = this.dom;
if(!self.opts.enable_slideshow) { return; }
dom.gv_panel.css('cursor','url(http://www.google.com/intl/en_ALL/mapfiles/openhand.cur), n-resize');
if(this.opts.pan_style === 'drag') {
dom.gv_panelWrap.delegate('.gv_panel img','mousedown.galleryview',function(e) {
self.isMouseDown = true;
$(this).css('cursor','url(http://www.google.com/intl/en_ALL/mapfiles/closedhand.cur), n-resize');
}).delegate('.gv_panel img','mouseup.galleryview',function(e) {
self.isMouseDown = false;
$(this).css('cursor','url(http://www.google.com/intl/en_ALL/mapfiles/openhand.cur), n-resize');
}).delegate('.gv_panel img','mousemove.galleryview',function(e) {
var distY, distX,
image = $(this),
new_top, new_left;
if(self.isMouseDown) {
distY = e.pageY - self.mouse.y;
distX = e.pageX - self.mouse.x;
new_top = gv.getInt(image.css('top')) + distY;
new_left = gv.getInt(image.css('left')) + distX;
image.css('cursor','url(http://www.google.com/intl/en_ALL/mapfiles/closedhand.cur), n-resize');
if(new_top > 0) new_top = 0;
if(new_left > 0) new_left = 0;
if(new_top < (-1 * (gv.outerHeight(image) - gv.innerHeight(dom.gv_panel)))) { new_top = -1 * (gv.outerHeight(image) - gv.innerHeight(dom.gv_panel)); }
if(new_left < (-1 * (gv.outerWidth(image) - gv.innerWidth(dom.gv_panel)))) { new_left = -1 * (gv.outerWidth(image) - gv.innerWidth(dom.gv_panel)); }
image.css('top',new_top);
image.css('left',new_left);
} else {
image.css('cursor','url(http://www.google.com/intl/en_ALL/mapfiles/openhand.cur), n-resize');
}
});
} else {
}
},
bindActions: function() {
var self = this,
dom = this.dom;
dom.gv_showOverlay.bind('click.galleryview',function(){
if(self.overlayVisible) {
self.hideOverlay(250);
} else {
self.showOverlay(250);
}
});
dom.gv_navWrap.delegate('div','click.galleryview',function(){
var el = $(this);
if(el.hasClass('gv_navNext')) {
self.showNext();
} else if(el.hasClass('gv_navPrev')) {
self.showPrev();
} else if(el.hasClass('gv_navPlay')) {
self.startSlideshow(true);
} else if(el.hasClass('gv_navPause')) {
self.stopSlideshow(true);
}
return false;
});
dom.gv_panelNavNext.bind('click.galleryview',function(){
self.showNext();
return false;
});
dom.gv_panelNavPrev.bind('click.galleryview',function(){
self.showPrev();
return false;
});
dom.gv_filmstripWrap.delegate('.gv_frame','click.galleryview',function(){
var el = $(this),
i = el.data('frameIndex');
this.navAction = 'frame';
self.showItem(i);
return false;
});
dom.gv_panelWrap.bind('mouseover.galleryview',function(){
self.showPanelNav();
}).bind('mouseout.galleryview',function(){
self.hidePanelNav();
});
},
unbindActions: function() {
var self = this,
dom = this.dom;
dom.gv_showOverlay.unbind('click.galleryview');
dom.gv_panelNavNext.unbind('click.galleryview');
dom.gv_panelNavPrev.unbind('click.galleryview');
dom.gv_navWrap.undelegate('div','click.galleryview');
dom.gv_filmstripWrap.undelegate('.gv_frame','click.galleryview');
},
showPanelNav: function() {
var self = this,
dom = this.dom;
dom.gv_panelNavNext.show();
dom.gv_panelNavPrev.show();
},
hidePanelNav: function() {
var self = this,
dom = this.dom;
dom.gv_panelNavNext.hide();
dom.gv_panelNavPrev.hide();
},
init: function(options,el) {
var self = this,
dom = this.dom = {};
this.opts = $.extend({},$.fn.galleryView.defaults,options);
this.el = el;
this.$el = $(el);
this.id = el.id;
this.iterator = this.frameIterator = this.opts.start_frame - 1;
this.overlayVisible = false;
this.playing = false;
this.scrolling = false;
this.isMouseDown = false;
this.mouse = { x: 0, y: 0 };
this.filmstripOrientation = (this.opts.filmstrip_position === 'top' || this.opts.filmstrip_position === 'bottom') ? 'horizontal' : 'vertical';
current_scene = (self.opts.start_frame - 1);
$(document).bind('mousemove.galleryview',function(e) {
self.mouse = {x: e.pageX, y: e.pageY};
});
// create all necessary DOM elements
$.each(this.elems,function(i,elem) {
var elem = elem.split('.');
// if there is no tag name, assume <div>
if(elem[0] === '') { elem[0] = 'div'; }
// add jQuery element to dom object
dom[elem[1]] = self.createElem({'class':elem[1]},elem[0]);
});
dom.gv_imageStore.appendTo($('body'));
dom.gv_galleryWrap.delegate('img','mousedown.galleryview',function(e){ if(e.preventDefault) { e.preventDefault(); } });
dom.gv_panel.addClass('gv_panel-loading');
dom.gv_frame.addClass('gv_frame-loading');
// nest DOM elements
dom.gv_galleryWrap.hide().append(dom.gv_gallery);
if(this.opts.show_panels) {
dom.gv_gallery.append(dom.gv_panelWrap);
if(this.opts.show_panel_nav) {
dom.gv_panelWrap.append(dom.gv_panelNavNext,dom.gv_panelNavPrev);
}
if(this.opts.show_infobar) {
dom.gv_panelWrap.append(dom.gv_infobar);
}
}
if(this.opts.show_filmstrip) {
dom.gv_gallery.append(
dom.gv_filmstripWrap.append(
dom.gv_filmstrip
)
);
if(this.opts.show_filmstrip_nav) {
dom.gv_gallery.append(
dom.gv_navWrap.append(
dom.gv_navPrev,
(this.opts.enable_slideshow?dom.gv_navPlay:$('<span></span>')),
dom.gv_navNext
)
);
}
}
if(this.opts.enable_overlays) {
dom.gv_panelWrap.append(dom.gv_overlay,dom.gv_showOverlay);
}
if(this.opts.show_captions) {
dom.gv_frame.append(dom.gv_caption).appendTo(dom.gv_gallery);
}
//swap out source element with gallery
this.$el.replaceWith(dom.gv_galleryWrap);
if(this.opts.pan_images) {
this.enablePanning();
}
// 링크 실행
try
{
dom.gv_panelWrap.delegate('.gv_panel img','mousedown.galleryview',function(e) {
_act_link(current_scene);
})
}
catch (e)
{
// ERROR!
}
// convert source images into gvImage objects
this.storeImages();
// block out dimensions/positions of gallery elements
this.buildGallery();
// begin loading images into gallery
this.initImages();
// set up transitions, buttons
this.bindActions();
// remove temporary frame element
dom.gv_frame.remove();
// show gallery
dom.gv_galleryWrap.show();
if(this.opts.autoplay) {
this.startSlideshow(true);
}
this.updateOverlay(this.iterator);
this.updateFilmstrip(this.frameIterator);
}
}; // END GalleryView
/*
MAIN PLUGIN CODE
*/
$.fn.galleryView = function (options) {
if (this.length) {
return this.each(function () {
var gallery = Object.create(GalleryView);
gallery.init(options,this);
});
}
};
/*
Default Options
Object literal storing default plugin options
*/
$.fn.galleryView.defaults = {
// General Options
transition_speed: 1000, //INT - duration of panel/frame transition (in milliseconds)
transition_interval: 5000, //INT - delay between panel/frame transitions (in milliseconds)
easing: 'swing', //STRING - easing method to use for animations (jQuery provides 'swing' or 'linear', more available with jQuery UI or Easing plugin)
// Panel Options
show_panels: true, //BOOLEAN - flag to show or hide panel portion of gallery
show_panel_nav: true, //BOOLEAN - flag to show or hide panel navigation buttons
enable_overlays: false, //BOOLEAN - flag to show or hide panel overlays
panel_width: 800, //INT - width of gallery panel (in pixels)
panel_height: 400, //INT - height of gallery panel (in pixels)
panel_animation: 'fade', //STRING - animation method for panel transitions (crossfade,fade,slide,none)
panel_scale: 'crop', //STRING - cropping option for panel images (crop = scale image and fit to aspect ratio determined by panel_width and panel_height, fit = scale image and preserve original aspect ratio)
overlay_position: 'bottom', //STRING - position of panel overlay (bottom, top)
pan_images: false, //BOOLEAN - flag to allow user to grab/drag oversized images within gallery
pan_style: 'drag', //STRING - panning method (drag = user clicks and drags image to pan, track = image automatically pans based on mouse position
pan_smoothness: 15, //INT - determines smoothness of tracking pan animation (higher number = smoother)
// Filmstrip Options
start_frame: 1, //INT - index of panel/frame to show first when gallery loads
show_filmstrip: true, //BOOLEAN - flag to show or hide filmstrip portion of gallery
show_filmstrip_nav: true, //BOOLEAN - flag indicating whether to display navigation buttons
enable_slideshow: true, //BOOLEAN - flag indicating whether to display slideshow play/pause button
autoplay: false, //BOOLEAN - flag to start slideshow on gallery load
show_captions: false, //BOOLEAN - flag to show or hide frame captions
filmstrip_size: 3, //INT - number of frames to show in filmstrip-only gallery
filmstrip_style: 'scroll', //STRING - type of filmstrip to use (scroll = display one line of frames, scroll filmstrip if necessary, showall = display multiple rows of frames if necessary)
filmstrip_position: 'bottom', //STRING - position of filmstrip within gallery (bottom, top, left, right)
frame_width: 80, //INT - width of filmstrip frames (in pixels)
frame_height: 40, //INT - width of filmstrip frames (in pixels)
frame_opacity: 0.4, //FLOAT - transparency of non-active frames (1.0 = opaque, 0.0 = transparent)
frame_scale: 'crop', //STRING - cropping option for filmstrip images (same as above)
frame_gap: 5, //INT - spacing between frames within filmstrip (in pixels)
// Info Bar Options
show_infobar: true, //BOOLEAN - flag to show or hide infobar
infobar_opacity: 1 //FLOAT - transparency for info bar
};
})(jQuery);
#demo.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GalleryView - Default Demo</title>
<!-- First, add jQuery (and jQuery UI if using custom easing or animation -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<!-- Second, add the Timer and Easing plugins -->
<script type="text/javascript" src="../js/jquery.timers-1.2.js"></script>
<script type="text/javascript" src="../js/jquery.easing.1.3.js"></script>
<!-- Third, add the GalleryView Javascript and CSS files -->
<script type="text/javascript" src="../js/jquery.galleryview-3.0-dev.js"></script>
<link type="text/css" rel="stylesheet" href="../css/jquery.galleryview-3.0-dev.css" />
<!-- Lastly, call the galleryView() function on your unordered list(s) -->
<?
$_Img_Url[0] = "http://www.spaceforaname.com/galleryview/img/photos/bp1.jpg";
$_Img_Link[0] = "http://www.naver.com";
$_Img_Alt[0] = "Lone Tree Yellowstone";
$_Img_Url[1] = "http://www.spaceforaname.com/galleryview/img/photos/bp2.jpg";
$_Img_Link[1] = "http://www.sir.com";
$_Img_Alt[1] = "Is He Still There?!";
$_Img_Url[2] = "http://www.spaceforaname.com/galleryview/img/photos/bp4.jpg";
$_Img_Link[2] = "http://www.daum.net";
$_Img_Alt[2] = "Noni Nectar For Green Gecko";
$_Img_Url[3] = "http://www.spaceforaname.com/galleryview/img/photos/bp7.jpg";
$_Img_Link[3] = "http://www.google.com";
$_Img_Alt[3] = "Flight of an Eagle Owl";
?>
<script type="text/javascript">
$(function(){
$('#myGallery').galleryView();
/*
$(".gv_panelWrap img").bind("click", function(event){
//alert($(".gv_panelWrap .gv_panel img").attr('src'));
});*/
});
var link = new Array();
<? for ($i = 0; $i < sizeof($_Img_Url); $i++) { ?>
link[<?=$i?>] = "<?=$_Img_Link[$i]?>";
<? } ?>
function _act_link(no)
{
//alert(no);
location.href = link[no];
}
</script>
</head>
<body>
<ul id="myGallery">
<?
for ($i = 0; $i < sizeof($_Img_Url); $i++)
{
?>
<li><img src="<?=$_Img_Url[$i]?>" alt="<?=$_Img_Alt[$i]?>"></li>
<? } ?>
</ul>
<p>Please view the source of this page if you are having difficulties setting up GalleryView.</p>
</body>
</html>
이런 류는 해당 js파일을 수정해야합니다.
ul 안에 li img 를 불러와서 처리하는데
해당 js 파일에 그걸 정리하는곳이 있는데 그걸 수정하면 될거에요..
그부분을 모르겠습니다. js 코드도 올리려고 한는데 너무길어 다올라가질 않습니다 ㅜㅠ
답변을 작성하시기 전에 로그인 해주세요.
