이미지 갤러리 (직)제작 소스

/* view s */
.carView_t { width:100%; height:500px; display:inline-block; margin-top:20px; }
.carView_t li { float:left; text-align:left; }
.carView_t_l { width:63%; }
.carView_t_c { width:2%; }
.carView_t_r { width:35%; }
.carView_timgs { height:530px; }
.carView_timgs img { width:100%; height:530px; border-radius:20px; position:relative; }
.carView_title {
text-align:left; color:#222; margin-top:20px;
position: relative; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
font-size:24px; font-family:'SpoqaHanSansNeo_Medium'; letter-spacing: 0.01em; line-height:1em;
}
.carView_stitle {
text-align:left; color:#6b7486; margin-top:15px;
position: relative; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
font-size:20px; font-family:'SpoqaHanSansNeo_Medium'; letter-spacing: 0.01em; line-height:1em;
}
.carView_t_simg { margin-top:30px; }
.carView_t_simg_dd { float:left; width:25%; }
.carView_t_simg_dd div { margin:3px; }
.carView_t_simg_dd div img { width:100%; height:70px; cursor:pointer; }
.carView_t_simg_dd div img:hover { transform:scale(1.06); transition: 0.3s; }
.carView_timg_navi { position:relative; top:-280px; }
.carView_timg_navi_l { position:absolute; left:10px; }
.carView_timg_navi_r { position:absolute; right:10px; }
/* view e */
/* 이미지 체인지 s */
function carView_tImgScript(t, x){
var fname="carView_timg_form";
var f=document[fname];
jQuery("#carView_timg").attr("src", t);
f.x.value=""+x;
}
function carView_timg_naviScript(p){
var fname="carView_timg_form";
var f=document[fname];
var x=f.x.value;
var str1 = f.all.value;
var str2 = str1.split('|');
var Xlength=str2.length-1;
var xp="1";
if(p=="1"){
if(x==1){ xp=Xlength; }else{ xp=eval(x)-eval(1); }
}else{
if(x==Xlength){ xp=1; }else{ xp=eval(x)+eval(1); }
}
for(var idx=0; idx<=str2.length; idx++)
{
if(str2[idx]){
if(eval(xp)-eval(1)==idx){
jQuery("#carView_timg").attr("src", f.imgurl.value+"/"+str2[idx]);
}
} // if(str2[idx]){ end
} // for end
f.x.value=""+xp;
}
/* 이미지 체인지 e */
<div class="carView_t">
<ul>
<li class="carView_t_l">
<div class="carView_timgs" id="carView_timgDiv">
<?php
if($upfiles[0]){ if(is_file($CONFIG_MLANGSOFT_DATE_CAR_DIR."/".$wdateCut."/".$upfiles[0])){
$carView_timg_one=$CONFIG_MLANGSOFT_DATE_CAR_URL."/".$wdateCut."/".$upfiles[0];
echo "<img src='".$CONFIG_MLANGSOFT_DATE_CAR_URL."/".$wdateCut."/".$upfiles[0]."' id='carView_timg'>";
} }
?>
</div>
<form name="carView_timg_form">
<input type="" name="imgurl" value="<?php echo $CONFIG_MLANGSOFT_DATE_CAR_URL."/".$wdateCut; ?>">
<input type="" name="x" value="1">
<input type="" name="all" value="<?php echo $upfile;?>">
</form>
<div class="carView_timg_navi">
<div class="carView_timg_navi_l carTopMenubtbBox" onclick="javascript:carView_timg_naviScript('1');"><img src="/Mlang/img/sicon_1.png"></div>
<div class="carView_timg_navi_r carTopMenubtbBox" onclick="javascript:carView_timg_naviScript('2');"><img src="/Mlang/img/sicon_2.png"></div>
</div>
</li>
<li class="carView_t_c"> </li>
<li class="carView_t_r">
<div class="carView_title"><?php echo htmlspecialchars($row['title']); ?></div>
<?php if(htmlspecialchars($row['stitle'])){ ?><div class="carView_stitle"><?php echo htmlspecialchars($row['stitle']); ?></div><?php } ?>
<div class='carView_t_simg'>
<dl>
<?php
$upfilesCount=count($upfiles)-1; if($upfilesCount<=16){ $upfilesCounts=$upfilesCount; }else{ $upfilesCounts=16; }
for($k=0; $k<=$upfilesCounts; $k++){
if($upfiles[$k]){ if(is_file($CONFIG_MLANGSOFT_DATE_CAR_DIR."/".$wdateCut."/".$upfiles[$k])){
$kc=$k+1;
echo "<dd class='carView_t_simg_dd'><div onclick=\"javascript:carView_tImgScript('".$CONFIG_MLANGSOFT_DATE_CAR_URL."/".$wdateCut."/".$upfiles[$k]."','".$kc."');\"><img src='".$CONFIG_MLANGSOFT_DATE_CAR_URL."/".$wdateCut."/".$upfiles[$k]."'></div></dd>";
} }
}
?>
</dl>
</div>
</li>
</ul>
</div>
궁금사항이나 프로그램 제작 희망하시는분은
※ 연락처: 010-5005-육102
※ 텔레그램: @sky1014
게시판 목록
퍼블리셔팁
질문은 상단의 QA에서 해주시기 바랍니다.
| 번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|---|
| 1157 | CSS |
zakdok
|
7년 전 | 2879 | |
| 1156 | CSS |
zakdok
|
7년 전 | 2071 | |
| 1155 | HTML |
zakdok
|
7년 전 | 3383 | |
| 1154 | CSS |
|
7년 전 | 2566 | |
| 1153 | CSS | 7년 전 | 2344 | ||
| 1152 | 기타 | 7년 전 | 2189 | ||
| 1151 | 기타 | 7년 전 | 2738 | ||
| 1150 | CSS |
|
7년 전 | 4879 | |
| 1149 | HTML |
루돌프사슴코
|
7년 전 | 3061 | |
| 1148 | 기타 | 7년 전 | 2721 | ||
| 1147 | 기타 | 7년 전 | 2112 | ||
| 1146 | 기타 | 7년 전 | 2278 | ||
| 1145 | CSS | 7년 전 | 2540 | ||
| 1144 | CSS | 7년 전 | 2120 | ||
| 1143 | CSS | 7년 전 | 2385 | ||
| 1142 | CSS | 7년 전 | 2068 | ||
| 1141 | CSS | 7년 전 | 2361 | ||
| 1140 | CSS | 7년 전 | 2144 | ||
| 1139 | 기타 | 7년 전 | 2190 | ||
| 1138 | 기타 | 7년 전 | 2005 | ||
| 1137 | 기타 | 7년 전 | 1895 | ||
| 1136 | 기타 | 8년 전 | 2102 | ||
| 1135 | 기타 | 8년 전 | 1660 | ||
| 1134 | 기타 | 8년 전 | 1880 | ||
| 1133 | HTML | 8년 전 | 3515 | ||
| 1132 | 기타 | 8년 전 | 2416 | ||
| 1131 | 기타 | 8년 전 | 2190 | ||
| 1130 | 기타 | 8년 전 | 1920 | ||
| 1129 | 기타 | 8년 전 | 1467 | ||
| 1128 | CSS | 8년 전 | 2702 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기