민가촌(광고는 사양하고/ 회원가입은 받지 않습니다)_200

전체갯수 : 200 , 1 / 10 pages 로그인  
Category (200)  일반 (40)  interval (20)  민가촌 (131)  ColorSheet (7) 
이 름 ...
다운로드 #1 Jssor.Slider.FullPack.zip (11.89 MB), Download : 17
다운로드 #2 세로형_샘플겔러리_소스.zip (338.6 KB), Download : 32
제 목 [HTML] 세로형 심플갤러리 소스 <style type="text/css">
List Slider Demo - Jssor Slider, Slideshow with Javascript Source Code
    http://centrevacancesardeche.fr/slider.js-master/demos-jquery/list-slider.source.html

//ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
세로형 심플갤러리 소스 <style type="text/css">
    http://www.htmlwork.net/zboard/view.php?id=etc&page=2&sn1=&divpage=1&sn=off&ss=on&sc=on&select_arrange=headnum&desc=asc&no=66

<html>
<head>
<title>심플 갤러리 세로형</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<style type="text/css">

#dhtmlgoodies_slideshow{
width:720px; /* Total width of slideshow */


}

#previewPane{ /* Height of big DIV where the large image is showing */

border:1px solid #000;
margin-right:10px;
text-align:center;
padding-top:30px; /* 30 pixel space above images */


/* CSS HACK */
height: 432px; /* IE 5.x */
height/* */:/**/400px; /* Other browsers */
height: /**/400px;

width:580px; /* Width of preview */
float:left; /* To get the filmstrip and large image side by side */

}

#galleryContainer{ /* Big Div surrounding up image, list of images and down image */
float:left; /* Floating */

/* CSS HACK */
height: 434px; /* IE 5.x - 120 px + 2 px for borders and 2px for padding*/
height/* */:/**/428px; /* Other browsers */
height: /**/428px;

/* CSS HACK */
width: 124px; /* IE 5.x - 120 px + 2 px for borders and 2px for padding*/
width/* */:/**/120px; /* Other browsers */
width: /**/120px;

border:1px solid #000; /* Black border */
padding:1px; /* A little space between the black border and the content inside */

}
#galleryContainer #arrow_down{ /* Arrow down image */
height:35px;
}
#galleryContainer #arrow_up{
height:35px; /* Arrow up image */
}

#theImages{ /* DIV where the images are located */
position:relative;
overflow:hidden;
height:355px; /* Height of boxes for the images */
}
#theImages div{
position:relative; /* Don't change this */
height:1500px; /* Higher than total height of thumbnails */

}
#theImages img{
border:0px; /* No border */
filter:alpha(opacity=50); /* Transparency - IE */
opacity:0.5; /* Transparency - Firefox */
padding-top:1px; /* Space between images */
}

</style>

<script type="text/javascript">

var arrowImageHeight = 35; // Height of arrow image in pixels;


var previewImage = false;
var previewImageParent = false;
var slideSpeed = 0;
var previewImagePane = false;
var slideEndMarker = false;
var galleryContainer = false;
function getTopPos(inputObj)
{

var returnValue = inputObj.offsetTop;
while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetTop;
return returnValue;
}

function getLeftPos(inputObj)
{

var returnValue = inputObj.offsetLeft;
while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetLeft;
return returnValue;
}

function showPreview(newSrc)
{
if(!previewImage){
var images = document.getElementById('previewPane').getElementsByTagName('IMG');
if(images.length>0){
previewImage = images[0];
}else{
previewImage = document.createElement('IMG');
document.getElementById('previewPane').appendChild(previewImage);
}


}
previewImage.src = newSrc;

}

function initSlide(e)
{
if(document.all)e = event;

if(this.src.indexOf('over')<0)this.src = this.src.replace('.gif','-over.gif');

slideSpeed = e.clientY + Math.max(document.body.scrollTop,document.documentElement.scrollTop) - getTopPos(this);
if(this.src.indexOf('down')>=0){
slideSpeed = (slideSpeed)*-1;
}else{
slideSpeed = arrowImageHeight - slideSpeed;
}
slideSpeed = Math.round(slideSpeed * 10 / arrowImageHeight);
}

function stopSlide()
{
slideSpeed = 0;
this.src = this.src.replace('-over','');
}

function slidePreviewPane()
{
if(slideSpeed!=0){
var topPos = previewImagePane.style.top.replace(/[^\-0-9]/g,'')/1;

if(slideSpeed<0 && slideEndMarker.offsetTop<(previewImageParent.offsetHeight - topPos)){
slideSpeed=0;

}
topPos = topPos + slideSpeed;
if(topPos>0)topPos=0;

previewImagePane.style.top = topPos + 'px';

}
setTimeout('slidePreviewPane()',30);
}

function revealThumbnail()
{
this.style.filter = 'alpha(opacity=100)';
this.style.opacity = 1;
}

function hideThumbnail()
{
this.style.filter = 'alpha(opacity=50)';
this.style.opacity = 0.5;
}

function initGalleryScript()
{
previewImageParent = document.getElementById('theImages');
previewImagePane = document.getElementById('theImages').getElementsByTagName('DIV')[0];
previewImagePane.style.top = '0px';
galleryContainer = document.getElementById('galleryContainer');
var images = previewImagePane.getElementsByTagName('IMG');
for(var no=0;no<images.length;no++){
images[no].onmouseover = revealThumbnail;
images[no].onmouseout = hideThumbnail;
}
slideEndMarker = document.getElementById('slideEnd');

document.getElementById('arrow_up_image').onmousemove = initSlide;
document.getElementById('arrow_up_image').onmouseout = stopSlide;

document.getElementById('arrow_down_image').onmousemove = initSlide;
document.getElementById('arrow_down_image').onmouseout = stopSlide;

slidePreviewPane();

}


window.onload = initGalleryScript;
</script>

</head>

<body>
<div id="dhtmlgoodies_slideshow">
<div id="previewPane">
<img src="http://www.yajava.com/JAVA/java08/java8-411.html/images/image1_big.jpg">
</div>
<div id="galleryContainer">
<div id="arrow_up"><img src="http://www.yajava.com/JAVA/java08/java8-411.html/images/arrow-up.gif" id="arrow_up_image"></div>

<div id="theImages">
<div>
<!-- PUT YOUR SMALL IMAGES HERE -->
<a href="#" onclick="showPreview('http://www.yajava.com/JAVA/java08/java8-411.html/images/image1_big.jpg');return false"><img src="http://www.yajava.com/JAVA/java08/java8-411.html/images/image1.jpg"></a>
<a href="#" onclick="showPreview('http://www.yajava.com/JAVA/java08/java8-411.html/images/image2_big.jpg');return false"><img src="http://www.yajava.com/JAVA/java08/java8-411.html/images/image2.jpg"></a>
<a href="#" onclick="showPreview('http://www.yajava.com/JAVA/java08/java8-411.html/images/image3_big.jpg');return false"><img src="http://www.yajava.com/JAVA/java08/java8-411.html/images/image3.jpg"></a>
<a href="#" onclick="showPreview('http://www.yajava.com/JAVA/java08/java8-411.html/images/image4_big.jpg');return false"><img src="http://www.yajava.com/JAVA/java08/java8-411.html/images/image4.jpg"></a>
<a href="#" onclick="showPreview('http://www.yajava.com/JAVA/java08/java8-411.html/images/image5_big.jpg');return false"><img src="http://www.yajava.com/JAVA/java08/java8-411.html/images/image5.jpg"></a>
<a href="#" onclick="showPreview('http://www.yajava.com/JAVA/java08/java8-411.html/images/image6_big.jpg');return false"><img src="http://www.yajava.com/JAVA/java08/java8-411.html/images/image6.jpg"></a>
<a href="#" onclick="showPreview('http://www.yajava.com/JAVA/java08/java8-411.html/images/image7_big.jpg');return false"><img src="http://www.yajava.com/JAVA/java08/java8-411.html/images/image7.jpg"></a>
<a href="#" onclick="showPreview('http://www.yajava.com/JAVA/java08/java8-411.html/images/image8_big.jpg');return false"><img src="http://www.yajava.com/JAVA/java08/java8-411.html/images/image8.jpg"></a>
<!-- END WHERE TO PUT YOUR SMALL IMAGES -->
<div id="slideEnd"></div>
</div>

</div>
<div id="arrow_down"><img src="http://www.yajava.com/JAVA/java08/java8-411.html/images/arrow-down.gif" id="arrow_down_image"></div>
</div>
</div>

</body>
</html>


윗   글   [HTML] 이미지 슬라이드 ; Create a CSS/jQuery Image Rotator with Descriptions tj
아랫글   모빌 : kusudama flower_001_4
tj

목록보기 답변달기 추천하기


Copyright 1999-2018 Zeroboard / skin by salz