cm-web-legacy/application/views/m/search/image.php

<?
$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>