1#@!#!123s

��JFIF�� 1#@!#!123s
: / var / www / html / projects / ravikumarnew / application / views / web /
Filename : books_thokuppu.php
back
		<div class="kids_top_content">
			<div class="kids_top_content_middle ">
				<div class="header_container ">
					<div class="l-page-width">
						<h1 style="color:#b31217!important; margin-top:1%;">
								நூல்கள்  </h1>
					</div>
					<!-- <div style="float:right;margin-top:-52px;"><a href="#" class="cws_button">தொகுப்பு </a></div> -->
				</div>
			</div>
			<!-- .kids_top_content_middle -->
		</div>
	<div class="bg-level-2-full-width-container kids_bottom_content">
			<div class="bg-level-2-page-width-container no-padding">
				 <section class="kids_bottom_content_container">

					<div class="page-content">
						<div class="bg-level-2 first-part"></div>
						<div class="container l-page-width">
							<div class="entry-container single-sidebar">

						<!-- LEFT PART -->
						<main class="blog">
										
							<!-- ***************** - START Image floating - *************** -->
						<div class="page-content">
							<div class="bg-level-2 first-part"></div>
							<div class="container l-page-width">
								<div class="entry-container ">
									<main class="blog">
										<div class='grid-row clearfix'>
											<div class='grid-col grid-col-12'>
												<section class='cws-widget'>
													<section class='cws_widget_content'>

												<!-- see gallery_shortcode() -->
											<div id="ngallery-1" class="ngallery clearfix column-2">

											<div class="content_append" data-carousel-column="3">

											<?php foreach ($books as $key => $value) { ?>
												
											
												<div class="iso-item">
												<div class="gallery-text">
												<div class="title" style="color:#b31217!important;font-size: 1.50em;"></div><br>
															
												<div class="flip-card">
													<a href="<?php echo $value->url;?>">
													<div class="flip-card-inner">
														<div class="flip-card-front">
															<img src="<?=base_url()?>site/uploads/books/<?php echo $value->image_front?>" class="small_book" alt="Avatar">
														</div>
														<div class="flip-card-back small_book">
															<img src="<?=base_url()?>site/uploads/books/<?php echo $value->image_back?>"  class="small_book">
														</div>
													</div>
												</div>
												</a>
												
														</div>
														<br><br>
													
													</div>
												
											<?php } ?>
											</div>
											</div>
													</section>
												</section>
											</div>
										</div>
									</main>
									
								</div>
								<!-- .entry-container -->
							</div>
						</div>
						
						<!-- ***************** - END Image floating - *************** -->
						<br>
									<div style="text-align: center;">
										<?php if($books_count > 6 ) { ?> 
										<p class="more-link cws_button" id="more_content" style="background: #f93d22;padding: 2% 15%; border-radius: 9px;" total_count = "<?php echo $books_count?>" >மேலும் பார்க்க </p>
										<?php } ?>
									</div>
									
						</main>

								<!-- LEFT PART END -->

								<?php include("aside.php");?>



							
								<div class="kids_clear"></div>
							</div>

						</div>
						<div class="bg-level-2 second-part"></div>
					</div>

				</section>

			</div>
			
		</div>
		<style type="text/css">
			p{
				font-size: smaller;
			}
		</style>


	<style>
		.flip-card {
  /* background-color: transparent; */
  width: 263px;
  height: 350px;
  /* perspective: 1000px; */
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  /* box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); */
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-card-front {
  /* background-color: #bbb; */
  color: black;
}

.flip-card-back {
  /* background-color: #2980b9; */
  color: white;
  transform: rotateY(180deg);
}
.small_book{
	/* padding:35px; */
	height: 400px;
}

	</style>

<script type="text/javascript">
	$(document).ready(function(){

		start = 0;

		$(document).on("click","#more_content",function(){
			
			start = start+6;

			$.ajax({
			        url: "<?php echo base_url();?>web/get_more_content_for_books",
			        method: "POST",
			        dataType: "json",
			        data:{
			          start: start
			        },
			        success: function(data){

      				 $(".content_append").append(data.contents);
      				 total_count = $("#more_content").attr("total_count");

      				 if(data.total >= total_count){
      				 	$("#more_content").hide();
      				 }

			        }
			  });

		});
	});
</script>