first commit
This commit is contained in:
pakerpale
266
application/views/m/search/image.php
Executable file
266
application/views/m/search/image.php
Executable file
@@ -0,0 +1,266 @@
|
||||
<?
|
||||
$SES_MEMBER_ID = $this->session->userdata('C_Member_Id');
|
||||
|
||||
$is_more = 'Y';
|
||||
if ($total_count <= $limit) {
|
||||
$is_more = 'N';
|
||||
}
|
||||
|
||||
?>
|
||||
|
||||
<? include_once "search_header.php" ?>
|
||||
<style>
|
||||
.thumbs {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-content: flex-start;
|
||||
align-items: stretch;
|
||||
/* for demo: */
|
||||
|
||||
|
||||
margin: 10px auto;
|
||||
resize: both;
|
||||
}
|
||||
|
||||
.thumb {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
flex: 1 0 auto;
|
||||
width: auto;
|
||||
height: 120px;
|
||||
/* cosmetics and zoom: */
|
||||
margin: 2px;
|
||||
text-decoration: none;
|
||||
background-color: rgba(0,0,0, 0.50);
|
||||
box-shadow: 0px 0px 0px 0px rgba(0,0,0, 0.0);
|
||||
transition: box-shadow 300ms, transform 400ms, z-index 400ms, background-position 400ms;
|
||||
z-index: 1;
|
||||
}
|
||||
.thumb:hover {
|
||||
/* zoom: */
|
||||
box-shadow: 0px 0px 10px 0px rgba(0,0,0, 0.7);
|
||||
transform: scale(1.2, 1.2);
|
||||
z-index: 100;
|
||||
}
|
||||
.thumb-img > img,
|
||||
.thumb-txt > div {
|
||||
min-width: 60px;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.thumb-img {
|
||||
background-size: cover;
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.thumb-img:hover {
|
||||
animation-name: thumb-scroll;
|
||||
animation-delay: 400ms;
|
||||
animation-duration: 2.5s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-direction: normal;
|
||||
animation-timing-function: linear;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
.thumb-img > img {
|
||||
display: block;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
<div class="news_box">
|
||||
<div class="news_box_title" style="border-bottom:0;">
|
||||
이미지 <span class="search_num"><?= number_format($total_count) ?>건</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id="thumbs" class="thumbs">
|
||||
|
||||
</div>
|
||||
<iframe style=" width: 100vw;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
background-image: url(/img/loading_circle.gif);
|
||||
background-size: auto;
|
||||
z-index: 2147483647;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-color: black;
|
||||
display:none;"></iframe>
|
||||
<?include_once ("search_footer_inc.php")?>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
$(document).ready(function () {
|
||||
var more_yn = '<?=$is_more?>';
|
||||
$(document).scroll(function () {
|
||||
var maxHeight = $(document).height();
|
||||
var currentScroll = $(window).scrollTop() + $(window).height();
|
||||
if (maxHeight <= (currentScroll + 100)) {
|
||||
console.log(more_yn);
|
||||
if (more_yn == "Y") {
|
||||
get_img_list();
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
var img_list_page = 1;
|
||||
|
||||
function get_img_list() {
|
||||
|
||||
console.log("get_img_list");
|
||||
var form_data = {
|
||||
"page": img_list_page,
|
||||
"search_keyword": "<?=$search_keyword?>"
|
||||
};
|
||||
$.ajax({
|
||||
url: '/m/search/image_list_more',
|
||||
async: false,
|
||||
type: 'POST',
|
||||
dataType: 'HTML',
|
||||
data: form_data,
|
||||
success: function (rtnHtml) {
|
||||
var arrHtml = rtnHtml.split("|||||");
|
||||
if (arrHtml[0].trim() == '0000') {
|
||||
more_yn = arrHtml[2];
|
||||
console.log(more_yn);
|
||||
if (arrHtml[1] != "") {
|
||||
$('.thumbs').append(arrHtml[1]);
|
||||
img_list_page++;
|
||||
}
|
||||
}
|
||||
},
|
||||
error: function (rtnHtml) {
|
||||
alert('데이터 로드에 실패했습니다.');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
get_img_list();
|
||||
|
||||
$(document).ready(function () {
|
||||
//get_img_list();
|
||||
|
||||
|
||||
$('.smalls').click(function () {
|
||||
var tmp = $(this).parent()
|
||||
if (tmp.attr('class') == 'imms') {
|
||||
$('.imms').removeClass('act');
|
||||
tmp.addClass('act');
|
||||
} else {
|
||||
tmp.removeClass('act');
|
||||
}
|
||||
});
|
||||
$('.omm_a2').click(function () {
|
||||
var tmp = $(this).parent().parent()
|
||||
if (tmp.attr('class') == 'omgg_ul1') {
|
||||
tmp.addClass('act');
|
||||
} else {
|
||||
tmp.removeClass('act');
|
||||
}
|
||||
});
|
||||
$('.omm_c').click(function () {
|
||||
$('.omgg_ul1').removeClass('act');
|
||||
});
|
||||
|
||||
/*
|
||||
$('.ommbtn.omm_next').click(function(){
|
||||
var tmp = $(this).parent()
|
||||
if (tmp.attr('class') == 'image--expand') {
|
||||
$('html, body').animate({scrollTop:$(this).offset().top}, 0);
|
||||
}else{
|
||||
// $('html, body').animate({scrollTop:$(this).offset().top + 140}, 0);
|
||||
}
|
||||
});
|
||||
*/
|
||||
|
||||
});
|
||||
|
||||
var $cell = $('.image__cell');
|
||||
|
||||
function thumb_img_click(t) {
|
||||
var $thisCell = $(t).closest('.image__cell');
|
||||
if ($thisCell.hasClass('is-collapsed')) {
|
||||
$cell.not($thisCell).removeClass('is-expanded').addClass('is-collapsed');
|
||||
$thisCell.removeClass('is-collapsed').addClass('is-expanded');
|
||||
$('html, body').animate({scrollTop: $(t).offset().top}, 300);
|
||||
} else {
|
||||
$thisCell.removeClass('is-collapsed').addClass('is-expanded');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function img_view_change(num) {
|
||||
var $thisCell = $('#img_item' + num).closest('.image__cell');
|
||||
if ($thisCell.hasClass('is-collapsed')) {
|
||||
$cell.not($thisCell).removeClass('is-expanded').addClass('is-collapsed');
|
||||
$thisCell.removeClass('is-collapsed').addClass('is-expanded');
|
||||
$('html, body').animate({scrollTop: $('#img_item' + num).offset().top}, 0);
|
||||
} else {
|
||||
$thisCell.removeClass('is-expanded').addClass('is-collapsed');
|
||||
}
|
||||
}
|
||||
|
||||
function img_view_close(t) {
|
||||
var $thisCell = $(t).closest('.image__cell');
|
||||
$thisCell.removeClass('is-expanded').addClass('is-collapsed');
|
||||
}
|
||||
|
||||
|
||||
$('.ommbtn.omm_next', '.ommbtn.omm_pre').click(function () {
|
||||
var $thisCelle = $(this).closest('.image__cell');
|
||||
// var $this = $(this).closest('.omm_con');
|
||||
|
||||
if ($thisCelle.hasClass('is-collapsed')) {
|
||||
$cell.not($thisCelle).removeClass('is-expanded').addClass('is-collapsed');
|
||||
$thisCelle.removeClass('is-collapsed').addClass('is-expanded');
|
||||
$('html, body').animate({scrollTop: $(this).offset().top}, 300);
|
||||
//return true;
|
||||
|
||||
} else {
|
||||
$thisCelle.removeClass('is-expanded').addClass('is-collapsed');
|
||||
}
|
||||
});
|
||||
|
||||
function show_bigsize(i){
|
||||
$("body").find("iframe").attr("src","/m/search/image_view?data="+i);
|
||||
$("body").find("iframe").show();
|
||||
|
||||
}
|
||||
|
||||
function return_attr(i){
|
||||
$src = $(".thumb_"+i+".src");
|
||||
$href = $(".thumb_"+i+".href");
|
||||
$text = $(".thumb_"+i+".text");
|
||||
|
||||
ret = new Array();
|
||||
$src.each(function(i,v){
|
||||
ret.push({
|
||||
"src" : $src.eq(i).text(),
|
||||
"href" : $href.eq(i).text(),
|
||||
"text" : $text.eq(i).text()
|
||||
});
|
||||
});
|
||||
|
||||
return ret;
|
||||
|
||||
|
||||
}
|
||||
|
||||
function closeIframe(){
|
||||
|
||||
$("body").find("iframe").hide();
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user