Code to call Ajax
function display_floor(searchkey){
$.post("/wp-content/themes/resident360mark3/ajax_floor_slider.php", {"stype":searchkey}, function(result){
$("#floor-slider").html(result);
});
}
$('#allbed').click(function(){
$(".floor-slide").removeClass("floorplan-header-button-2");
$(".floor-slide").addClass( "floorplan-header-button" );
$(this).removeClass("floorplan-header-button");
$(this).addClass( "floorplan-header-button-2" );
display_floor();
});
$('#1bed').click(function(){
$(".floor-slide").removeClass("floorplan-header-button-2");
$(".floor-slide").addClass( "floorplan-header-button" );
$(this).removeClass("floorplan-header-button");
$(this).addClass( "floorplan-header-button-2" );
display_floor("1 Bedroom");
});
$('#2bed').click(function(){
$(".floor-slide").removeClass("floorplan-header-button-2");
$(".floor-slide").addClass( "floorplan-header-button" );
$(this).removeClass("floorplan-header-button");
$(this).addClass( "floorplan-header-button-2" );
display_floor("2 Bedroom");
});
display_floor();
$(document).ajaxStart(function () {
$('#floor-slider-container').css({"opacity":"0","transition":"0.5s"});
$('#floor-slider-load img').show();
});
$(document).ajaxStop(function () {
$('#floor-slider-container').css({"opacity":"1","transition":"0.5s"});
$('#floor-slider-load img').hide();
});
Ajax code
<?php
include("../../../wp-includes/class-phpass.php");
require_once('../../../wp-config.php');
global $user_ID;
$wp_user = new WP_User($user_ID);
?>
<div class="container">
<!-- ############################################# //-->
<!-- #################### SLIDER ################# //-->
<!-- ############################################# //-->
<?php
$searchkey=$_POST['stype'];
$args = array(
'orderby' => 'title',
'order' => 'asc',
'posts_per_page' => -1,
'post_type' => 'floorplans',
'meta_key' => 'bedrooms',
'meta_value' => $searchkey
);
$the_query = new WP_Query( $args );
setlocale(LC_MONETARY, 'en_US');
$number_of_posts=$the_query->post_count;
?>
<div class="text-center p-rel">
<div class="flex row justify-center w-92-p mg-auto my-slide">
<div class="flex col justify-center">
<div href="#" class="my-slide-prev"><img src="<?php echo THEME_DIR; ?>/images/black-left-arrow.png" /></div>
</div>
<div class="flex col grow-1 justify-center mgt-25 brk-600-mgt-0 my-slide-container">
<div class="p-rel slide-strip-holder">
<div class="flex row justify-center my-slide-outer">
<?php $i=0; if ( $the_query->have_posts()) : ?>
<?php while ($the_query->have_posts()) : $the_query->the_post(); $i++; ?>
<?php
if($i<$number_of_posts && $i!=2)$slide_state="my-slide-non-active";
if($i==1)$slide_state="my-slide-active";
if($i==2)$slide_state="my-slide-non-active my-slide-click-right";
?>
<div class="flex col justify-center">
<div>
<div id="my-slide-<?php echo $i; ?>" value="<?php echo $i; ?>" class="<?php echo " ".$slide_state; ?> my-slide-inner">
<div class="container floor-plan-inner-container mgt-20 site-black <?php echo $final_search?>">
<div class="flex row justify-center brk-600-col w-80-p brk-1800-w-90-p brk-1200-w-initial mg-auto floorplan-rows">
<div class="flex col justify-center w-50-p brk-600-w-initial floorplan-row">
<div class="flex col justify-center pdt-0 pdr-50 pdl-50 pdb-0 brk-600-pd-0 floor-plans-display-holder">
<div id="window-display-floor-<?php echo $i; ?>" class="dis-none-weak floor-plan-display-window-<?php echo $i; ?>"><a href="<?php echo get_field('main_floor_plan_image'); ?>" rel="lightbox"><img src="<?php echo get_field('main_floor_plan_image'); ?>" class="floor-plan-img" /></a></div>
<div id="window-display-photo-<?php echo $i; ?>" class="floor-plan-display-window-<?php echo $i; ?>"><a href="<?php echo get_field('main_photo_image'); ?>" rel="lightbox"><img src="<?php echo get_field('main_photo_image'); ?>" class="floor-plan-img" /></a></div>
<div id="window-display-360-<?php echo $i; ?>" class="w-100-p dis-none-weak floor-plan-display-window-<?php echo $i; ?>">
<div class="embed-container"><?php echo get_field('video_link'); ?></div>
</div>
</div>
<div class="flex row justify-center mg-auto floor-plans-icon-holder floor-plan-icons-holder-<?php echo $i; ?>">
<?php if(get_field('main_floor_plan_image')){ ?>
<div class="flex col justify-center">
<span id="display-floor-<?php echo $i; ?>" class="floorplan-icon-default font-webicons font-70 line-80 floorplan-icons fl-icon-1 mgr-15 mgl-15"><a class="floorplan-button">2D</a></span>
</div>
<?php } ?>
<?php if(get_field('main_photo_image')){ ?>
<div class="flex col justify-center">
<span id="display-photo-<?php echo $i; ?>" class="floorplan-icon-default font-webicons font-70 line-80 floorplan-icons floorplan-icon fl-icon-2 mgr-15 mgl-15"><a class="floorplan-button">3D</a></span>
</div>
<?php } ?>
<?php if(get_field('video_link')){ ?>
<div class="flex col justify-center">
<span id="display-360-<?php echo $i; ?>" class="floorplan-icon-default font-webicons font-70 line-80 floorplan-icons fl-icon-1 mgr-15 mgl-15"><a class="floorplan-button p-rel button-360-outer"><span class="font-icons button-360">e</span></a></span>
</div>
<?php } ?>
</div>
</div>
<div class="flex col justify-center w-50-p brk-600-w-initial brk-600-pd-20 floorplan-row">
<div class="mg-auto text-left">
<h1 class="site-font-2 font-50 brk-600-font-35 mgb-15 mgt-0 fl-title brk-600-dis-none site-color-3"><?php echo get_the_title(); ?></h1>
<h2 class="font-24 mgt-0 mgb-0 fl-bedrooms site-font-1 font-normal"><?php echo get_field('bedrooms'); ?><?php if(get_field('bedrooms') !="Private Bedroom"){ ?>/ <?php echo get_field('bathrooms'); ?> Bath<?php } ?> <br /> <?php echo get_field('square_feet'); ?> Sq. Ft. </h2>
<div class="flex row mgt-20">
<div class="flex col justify-center">
<span class="font-24 site-font-1">Starting At:</span>
</div>
<?php if(get_field('pricing_info')){ ?>
<div class="flex col justify-center pricing-info">
<span><?php echo get_field('pricing_info'); ?></span>
<img src="<?php echo THEME_DIR; ?>/images/info-icon.png" class="wd-20 mgl-10" />
</div>
<?php } ?>
</div>
<h3 class="font-45 brk-600-font-25 mgt-5 mgb-0 site-font-2 site-color-3"><?php echo get_field('start_price'); //money_format('%.2n', get_field('start_price')); ?></h3>
<?php if(get_field('date_available')){ ?>
<div class="mgt-10">
<span class="font-ebrima-bold font-19"><?php echo get_field('date_available'); ?></span>
</div>
<?php } ?>
<div class="mgb-30 mgt-90 brk-600-mgt-40 brk-600-mgb-10">
<a class="tour-button schedule-tour-click schedule-tour-pop">Schedule A Tour</a>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$('#display-floor-<?php echo $i; ?>').click(function(){
$(".floor-plan-display-window-<?php echo $i; ?>").fadeOut(500).css({"display":"none"});
$("#window-display-floor-<?php echo $i; ?>").fadeIn(500).css({"display":"block"});
$('.floor-plan-icons-holder-<?php echo $i; ?> span').removeClass( "floorplan-icon" );
$(this).addClass( "floorplan-icon" );
});
$('#display-photo-<?php echo $i; ?>').click(function(){
$(".floor-plan-display-window-<?php echo $i; ?>").fadeOut(500).css({"display":"none"});
$("#window-display-photo-<?php echo $i; ?>").fadeIn(500).css({"display":"block"});
$('.floor-plan-icons-holder-<?php echo $i; ?> span').removeClass( "floorplan-icon" );
$(this).addClass( "floorplan-icon" );
});
$('#display-360-<?php echo $i; ?>').click(function(){
$(".floor-plan-display-window-<?php echo $i; ?>").fadeOut(500).css({"display":"none"});
$("#window-display-360-<?php echo $i; ?>").fadeIn(500).css({"display":"block"});
$('.floor-plan-icons-holder-<?php echo $i; ?> span').removeClass( "floorplan-icon" );
$(this).addClass( "floorplan-icon" );
});
</script>
</div>
</div>
</div>
<?php $slide_state=''; $final_search=''; ?>
<?php endwhile; ?>
<?php else: ?>
<?php endif; wp_reset_query(); ?>
</div>
</div>
</div>
<div class="flex col justify-center">
<div href="#" class="my-slide-next"><img src="<?php echo THEME_DIR; ?>/images/black-right-arrow.png" /></div>
</div>
</div>
</div>
<!-- ############################################# //-->
<!-- ########## SLIDER JAVASCRIPT ############### //-->
<!-- ############################################# //-->
<script>
function check_slide_click(){
$( ".my-slide-click-left" ).unbind();
$( ".my-slide-click-right" ).unbind();
$( ".my-slide-active" ).unbind();
$( ".my-slide-outer img" ).unbind();
$('.my-slide-click-left').click(function(){
click_prev();
});
$('.my-slide-click-right').click(function(){
click_next();
});
$('.my-slide-active img').click(function () {
$(this).wrap('<a href="' + $(this).attr("src") + '" rel="lightbox" />');
$(this).parent('a').trigger('click');
});
}
function click_next(){
var active_val=$('.my-slide-active').attr('value');
var curent_active_id='#my-slide-' + active_val;
var old_active_id_left='#my-slide-' + (+active_val-1);
var old_active_id_right='#my-slide-' + (+active_val+1);
var new_active_id_right='#my-slide-' + (+active_val+2);
if(!$('.my-slide-outer').is(':animated')){
if(active_val<=<?php echo $number_of_posts-1; ?>){
var d = $('.my-slide-outer');
width=$('.my-slide-active').outerWidth();
d.animate({left:d.position().left-width+'px'},'slow');
$(curent_active_id).removeClass('my-slide-active');
$(curent_active_id).addClass('my-slide-non-active');
$(old_active_id_right).removeClass('my-slide-non-active');
$(old_active_id_right).addClass('my-slide-active');
$(curent_active_id).addClass('my-slide-click-left');
$(old_active_id_right).removeClass('my-slide-click-right');
$(new_active_id_right).addClass('my-slide-click-right');
$(old_active_id_left).removeClass('my-slide-click-left');
check_slide_click();
}
}
}
function click_prev(){
var active_val=$('.my-slide-active').attr('value');
var curent_active_id='#my-slide-' + active_val;
var old_active_id_left='#my-slide-' + (+active_val-1);
var old_active_id_right='#my-slide-' + (+active_val+1);
var new_active_id_left='#my-slide-' + (+active_val-2);
if(!$('.my-slide-outer').is(':animated')){
if(active_val>=2){
var d = $('.my-slide-outer');
width=$('.my-slide-active').outerWidth();
d.animate({left:d.position().left+width+'px'},'slow');
$(curent_active_id).removeClass('my-slide-active');
$(curent_active_id).addClass('my-slide-non-active');
$(old_active_id_left).removeClass('my-slide-non-active');
$(old_active_id_left).addClass('my-slide-active');
$(curent_active_id).addClass('my-slide-click-right');
$(old_active_id_left).removeClass('my-slide-click-left');
$(new_active_id_left).addClass('my-slide-click-left');
$(old_active_id_right).removeClass('my-slide-click-right');
check_slide_click();
}
}
}
function size_slide(){
var slide_width=$('.my-slide-container').width();
var active_val=$('.my-slide-active').attr('value');
var new_pos=((active_val-1)*-slide_width);
var slideheight = $('.my-slide-outer').height();
$('.my-slide-inner').css({"width":slide_width});
$('.my-slide-outer').css({"left":new_pos});
$('.my-slide-container').css({"height":slideheight});
$('.slide-strip-holder').css({"height":slideheight});
}
$(document).ready(function(){
setTimeout(size_slide, 200);
$('.my-slide-prev').click(function(){
click_prev();
});
$('.my-slide-next').click(function(){
click_next();
});
check_slide_click();
size_slide();
});
$(window).resize(function() {
size_slide();
});
</script>
</div>
<?php
include("../../../wp-includes/class-phpass.php");
require_once('../../../wp-config.php');
global $user_ID;
$wp_user = new WP_User($user_ID);
$searchkey=$_POST['stype'];
?>
<div id="content-slider">
<!-- ############################################# //-->
<!-- #################### SLIDER ################# //-->
<!-- ############################################# //-->
<?php
setlocale(LC_MONETARY, 'en_US');
$searchkey=$_POST['stype'];
$args = array(
'orderby' => 'title',
'order' => 'asc',
'posts_per_page' => -1,
'post_type' => 'floorplans',
'meta_key' => 'bedrooms',
'meta_value' => $searchkey
);
$the_query = new WP_Query( $args );
setlocale(LC_MONETARY, 'en_US');
$number_of_posts=$the_query->post_count;
?>
<div class="text-center p-rel">
<div class="flex row justify-center my-slide">
<div class="flex col justify-center">
<div href="#" class="my-slide-prev"><img src="<?php echo THEME_DIR; ?>/images/blue-left-arrow.png" class="pd-20 brk-700-wd-20" /></div>
</div>
<div class="flex col justify-center grow-1 my-slide-container p-rel">
<div class="flex row justify-center my-slide-outer">
<?php $i=0; ?>
<?php while ($the_query->have_posts()){ ?>
<?php $the_query->the_post(); ?>
<?php $i++; ?>
<?php
if($i<$number_of_posts+1)$slide_state="my-slide-non-active";
if($i==1)$slide_state="my-slide-active";
if($i==2)$slide_state="my-slide-non-active my-slide-click-right";
?>
<div class="flex col justify-center">
<div>
<div id="my-slide-<?php echo $i; ?>" value="<?php echo $i; ?>" class="<?php echo " ".$slide_state; ?> my-slide-inner">
<div class="container floor-plan-inner-container mgt-20 site-black <?php echo $final_search?>">
<div class="brk-600-col w-80-p brk-1800-w-90-p brk-1200-w-initial mg-auto floorplan-rows">
<div class="floorplan-row">
<div class="flex row brk-700-col justify-center">
<div class="flex col w-45-p brk-700-w-initial justify-center">
<div class="pdb-0 brk-600-pd-0 floor-plans-display-holder">
<div id="window-display-floor-<?php echo $i; ?>" class="dis-none floor-plan-display-window-<?php echo $i; ?>"><a href="<?php echo get_field('floorplan_image_1'); ?>" rel="lightbox"><img src="<?php echo get_field('floorplan_image_1'); ?>" class="floor-plan-img w-100-p" /></a></div>
<div id="window-display-photo-<?php echo $i; ?>" class="floor-plan-display-window-<?php echo $i; ?>"><a href="<?php echo get_field('floorplan_image_2'); ?>" rel="lightbox"><img src="<?php echo get_field('floorplan_image_2'); ?>" class="floor-plan-img w-100-p" /></a></div>
</div>
<div class="slide-content">
<?php if(get_field('floorplan_image_1') && get_field('floorplan_image_2')){ ?>
<div class="flex row justify-center mg-auto mgt-10 floor-plans-icon-holder floor-plan-icons-holder-<?php echo $i; ?>">
<?php if(get_field('floorplan_image_1')){ ?>
<div class="flex col justify-center">
<span class="display-floor-<?php echo $i; ?> floorplan-icon-default font-webicons floorplan-icons fl-icon-1 mgr-15 mgl-15 brk-600-mgl-5 brk-600-mgr-5"><a class="floorplan-button">2D</a></span>
</div>
<?php } ?>
<?php if(get_field('floorplan_image_2')){ ?>
<div class="flex col justify-center">
<span class="display-photo-<?php echo $i; ?> floorplan-icon-default font-webicons floorplan-icons floorplan-icon fl-icon-2 mgr-15 mgl-15 brk-600-mgl-5 brk-600-mgr-5"><a class="floorplan-button">3D</a></span>
</div>
<?php } ?>
</div>
<?php } ?>
</div>
</div>
<div class="flex col w-10-p brk-700-dis-none justify-center p-rel">
<div class="p-absolute all-sides-0 text-center">
<div class="ht-100-p border-0 border-rt-2 border-solid site-color-1 inline-block"></div>
</div>
</div>
<div class="flex col w-45-p brk-700-w-initial justify-center">
<div class="text-left site-color-1">
<h2 class="font-35 brk-1200-font-18 brk-900-font-14 fl-title font-w-700 mgt-15 mgb-5"><?php echo get_field('floor_plan_name');?></h2>
<h2 class="font-35 brk-1200-font-18 brk-900-font-14 fl-title font-w-700 mgt-15 mgb-5"><?php echo get_field('floor_plan_description'); ?></h2>
<ul class="line-170 pdl-20 font-18">
<li><?php echo get_field('bedrooms'); ?> Bed </li>
<li><?php echo get_field('bathrooms'); ?> Bath </li>
<li>SqFt <?php echo get_field('square_feet'); ?> </li>
<li>Starting At: <?php echo get_field('rent'); ?> </li>
</ul>
<div class="mgb-30 mgt-15 brk-600-mgt-40 brk-600-mgb-10">
<a class="outer-unit-button-<?php echo $i ?> schedule-tour-click w-30-p brk-1800-w-40-p brk-1200-w-70-p text-center mgr-10 site-color-1-bk site-color-2-bk-hover site-white site-white-hover pd-10 inline-block brk-1200-block brk-700-font-15">Check Availability</a>
<a class="schedule-tour-click w-30-p brk-1800-w-40-p brk-1200-w-70-p text-center site-color-1-bk site-color-2-bk-hover site-white-hover site-white pd-10 inline-block brk-700-block brk-1200-mgt-10 brk-1200-font-15" href="/floorplans">Apply Now</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
init_modal(<?php echo $i; ?>);
$('#window-display-floor-<?php echo $i; ?>').click(function(){
});
$('#window-display-photo-<?php echo $i; ?>').click(function(){
});
$(".outer-unit-button-<?php echo $i ?>").click(function(){
});
</script>
</div>
</div>
</div>
<?php $slide_state=''; $final_search=''; ?>
<?php } ?>
</div>
</div>
<div class="flex col justify-center">
<div href="#" class="my-slide-next"><img src="<?php echo THEME_DIR; ?>/images/blue-right-arrow.png" class="pd-20 brk-700-wd-20" /></div>
</div>
</div>
<div class="flex row justify-center p-absolute left-0 right-0 bottom-0 mgb-10 mgt-10 z-index-500">
<?php for ($x = 1; $x < $number_of_posts+1; $x++) { ?>
<div class="slide-page pager-<?php echo $x; ?> flex col justify-center pd-5 <?php if($x==1){ ?>site-color-1<?php }else{ ?>site-color-2<?php } ?> font-35 pointer site-color-1-hover transition-05" onclick="click_paginate(<?php echo $x; ?>,this);">●</div>
<?php } ?>
</div>
</div>
<!-- ############################################# //-->
<!-- ########## SLIDER JAVASCRIPT ############### //-->
<!-- ############################################# //-->
<script>
function check_slide_click(){
$( ".my-slide-click-left" ).unbind();
$( ".my-slide-click-right" ).unbind();
$( ".my-slide-active" ).unbind();
$( ".my-slide-outer img" ).unbind();
$('.my-slide-click-left').click(function(){
click_prev();
});
$('.my-slide-click-right').click(function(){
click_next();
});
$('.my-slide-active img').click(function () {
$(this).parent('a').trigger('click');
});
}
function click_paginate(targetslide,thiselement){
$('.slide-page').removeClass('site-color-1');
$('.slide-page').removeClass('site-color-2');
$('.slide-page').addClass('site-color-2');
$(thiselement).removeClass('site-color-2');
$(thiselement).addClass('site-color-1');
var d = $('.my-slide-outer');
width=$('.my-slide-active').outerWidth();
currentslide=$('.my-slide-active').attr("value");
if(targetslide>currentslide){
var active_val=$('.my-slide-active').attr('value');
var curent_active_id='#my-slide-' + active_val;
var old_active_id_left='#my-slide-' + (+active_val-1);
var old_active_id_right='#my-slide-' + (+active_val+1);
slideoffset=targetslide-currentslide;
d.animate({left:d.position().left-(width*slideoffset)+'px'},'slow');
$('#my-slide-' + targetslide).removeClass('my-slide-non-active');
$('#my-slide-' + targetslide).addClass('my-slide-active');
$(curent_active_id).removeClass('my-slide-active');
$(curent_active_id).addClass('my-slide-non-active');
$(curent_active_id).addClass('my-slide-click-right');
$(old_active_id_left).removeClass('my-slide-click-left');
$(old_active_id_right).removeClass('my-slide-click-right');
check_slide_click();
}
if(targetslide<currentslide){
num_posts=<?php echo $number_of_posts -1; ?>
var active_val=$('.my-slide-active').attr('value');
var curent_active_id='#my-slide-' + active_val;
var old_active_id_left='#my-slide-' + (+active_val-1);
var old_active_id_right='#my-slide-' + (+active_val+1);
slideoffset=currentslide-targetslide;
d.animate({left:d.position().left+(width*slideoffset)+'px'},'slow');
$('#my-slide-' + targetslide).removeClass('my-slide-non-active');
$('#my-slide-' + targetslide).addClass('my-slide-active');
$(curent_active_id).removeClass('my-slide-active');
$(curent_active_id).addClass('my-slide-non-active');
$(curent_active_id).addClass('my-slide-click-left');
$(old_active_id_right).removeClass('my-slide-click-right');
$(old_active_id_left).removeClass('my-slide-click-left');
check_slide_click();
}
}
function click_next(){
var active_val=$('.my-slide-active').attr('value');
var curent_active_id='#my-slide-' + active_val;
var old_active_id_left='#my-slide-' + (+active_val-1);
var old_active_id_right='#my-slide-' + (+active_val+1);
var new_active_id_right='#my-slide-' + (+active_val+2);
num_posts=<?php echo $number_of_posts -1; ?>
if(!$('.my-slide-outer').is(':animated')){
if(active_val<=num_posts){
var d = $('.my-slide-outer');
width=$('.my-slide-active').outerWidth();
d.animate({left:d.position().left-width+'px'},'slow');
$(curent_active_id).removeClass('my-slide-active');
$(curent_active_id).addClass('my-slide-non-active');
$(old_active_id_right).removeClass('my-slide-non-active');
$(old_active_id_right).addClass('my-slide-active');
$(curent_active_id).addClass('my-slide-click-left');
$(old_active_id_right).removeClass('my-slide-click-right');
$(new_active_id_right).addClass('my-slide-click-right');
$(old_active_id_left).removeClass('my-slide-click-left');
$('.slide-page').removeClass('site-color-1');
$('.slide-page').removeClass('site-color-2');
$('.slide-page').addClass('site-color-2');
$('.pager-' + (+active_val+1)).removeClass('site-color-2');
$('.pager-' + (+active_val+1)).addClass('site-color-1');
check_slide_click();
}else{
var active_val=1;
var curent_active_id='#my-slide-' + <?php echo $number_of_posts; ?>;
var old_active_id_left='#my-slide-1';
var old_active_id_right='#my-slide-' + (+active_val+1);
var new_active_id_left='#my-slide-' + (+active_val-2);
var d = $('.my-slide-outer');
width=$('.my-slide-active').outerWidth();
d.animate({left:d.position().left+(width*num_posts)+'px'},'slow');
$(curent_active_id).removeClass('my-slide-active');
$(curent_active_id).addClass('my-slide-non-active');
$(old_active_id_left).removeClass('my-slide-non-active');
$(old_active_id_left).addClass('my-slide-active');
$(curent_active_id).addClass('my-slide-click-right');
$(old_active_id_left).removeClass('my-slide-click-left');
$(new_active_id_left).addClass('my-slide-click-left');
$(old_active_id_right).removeClass('my-slide-click-right');
$('.slide-page').removeClass('site-color-1');
$('.slide-page').removeClass('site-color-2');
$('.slide-page').addClass('site-color-2');
$('.pager-' + (active_val)).removeClass('site-color-2');
$('.pager-' + (active_val)).addClass('site-color-1');
check_slide_click();
}
}
}
function click_prev(){
var active_val=$('.my-slide-active').attr('value');
var curent_active_id='#my-slide-' + active_val;
var old_active_id_left='#my-slide-' + (+active_val-1);
var old_active_id_right='#my-slide-' + (+active_val+1);
var new_active_id_left='#my-slide-' + (+active_val-2);
$('.slide-page').removeClass('site-color-1');
$('.slide-page').removeClass('site-color-2');
$('.slide-page').addClass('site-color-2');
$(new_active_id_left).removeClass('site-color-2');
$(new_active_id_left).addClass('site-color-1');
post_offset=2;
num_posts=<?php echo $number_of_posts -1; ?>;
if(!$('.my-slide-outer').is(':animated')){
if(active_val>=post_offset){
var d = $('.my-slide-outer');
width=$('.my-slide-active').outerWidth();
d.animate({left:d.position().left+width+'px'},'slow');
$(curent_active_id).removeClass('my-slide-active');
$(curent_active_id).addClass('my-slide-non-active');
$(old_active_id_left).removeClass('my-slide-non-active');
$(old_active_id_left).addClass('my-slide-active');
$(curent_active_id).addClass('my-slide-click-right');
$(old_active_id_left).removeClass('my-slide-click-left');
$(new_active_id_left).addClass('my-slide-click-left');
$(old_active_id_right).removeClass('my-slide-click-right');
$('.slide-page').removeClass('site-color-1');
$('.slide-page').removeClass('site-color-2');
$('.slide-page').addClass('site-color-2');
$('.pager-' + (+active_val-1)).removeClass('site-color-2');
$('.pager-' + (+active_val-1)).addClass('site-color-1');
check_slide_click();
}else{
active_val=num_posts;
curent_active_id='#my-slide-1';
old_active_id_left='#my-slide-' + (+active_val-1);
old_active_id_right='#my-slide-' + (+active_val+1);
new_active_id_right='#my-slide-' + (+active_val+2);
var d = $('.my-slide-outer');
width=$('.my-slide-active').outerWidth();
d.animate({left:d.position().left-(width*num_posts)+'px'},'slow');
$(curent_active_id).removeClass('my-slide-active');
$(curent_active_id).addClass('my-slide-non-active');
$(old_active_id_right).removeClass('my-slide-non-active');
$(old_active_id_right).addClass('my-slide-active');
$(curent_active_id).addClass('my-slide-click-left');
$(old_active_id_right).removeClass('my-slide-click-right');
$(new_active_id_right).addClass('my-slide-click-right');
$(old_active_id_left).removeClass('my-slide-click-left');
$('.slide-page').removeClass('site-color-1');
$('.slide-page').removeClass('site-color-2');
$('.slide-page').addClass('site-color-2');
$('.pager-' + (active_val+1)).removeClass('site-color-2');
$('.pager-' + (active_val+1)).addClass('site-color-1');
check_slide_click();
}
}
}
function size_slide(){
if ($(".query-check").css("order") >= "1" ){
slide_width_val=1;
active_val_counter=1;
}
if ($(".query-check").css("order") >= "2" ){
slide_width_val=1;
active_val_counter=1;
}
if ($(".query-check").css("order") >= "3" ){
slide_width_val=1;
active_val_counter=1;
}
if ($(".query-check").css("order") >= "4" ){
slide_width_val=1;
active_val_counter=1;
}
if ($(".query-check").css("order") >= "5" ){
slide_width_val=1;
active_val_counter=1;
}
var slide_width=$('.my-slide-container').width() /slide_width_val;
var active_val=$('.my-slide-active').attr('value');
var new_pos=((active_val-active_val_counter)*-slide_width);
var slideheight = $('.my-slide-outer').height();
$('.my-slide-inner').css({"width":slide_width});
$('.my-slide-outer').css({"left":new_pos});
}
size_slide();
$('.my-slide-prev').click(function(){
click_prev();
});
$('.my-slide-next').click(function(){
click_next();
});
check_slide_click();
$(window).load(function() {
size_slide();
})
$(window).resize(function() {
size_slide();
});
</script>
</div> <?php
include("../../../wp-includes/class-phpass.php");
require_once('../../../wp-config.php');
global $user_ID;
$wp_user = new WP_User($user_ID);
$searchkey=$_POST['stype'];
?>
<div id="content-slider">
<!-- ############################################# //-->
<!-- #################### SLIDER ################# //-->
<!-- ############################################# //-->
<?php
setlocale(LC_MONETARY, 'en_US');
$searchkey=$_POST['stype'];
$args = array(
'orderby' => 'title',
'order' => 'asc',
'posts_per_page' => -1,
'post_type' => 'floorplans',
'meta_key' => 'bedrooms',
'meta_value' => $searchkey
);
$the_query = new WP_Query( $args );
setlocale(LC_MONETARY, 'en_US');
$number_of_posts=$the_query->post_count;
?>
<div class="text-center p-rel">
<div class="flex row justify-center my-slide">
<div class="flex col justify-center">
<div href="#" class="my-slide-prev"><img src="<?php echo THEME_DIR; ?>/images/blue-left-arrow.png" class="pd-20 brk-700-wd-20" /></div>
</div>
<div class="flex col justify-center grow-1 my-slide-container p-rel">
<div class="flex row justify-center my-slide-outer">
<?php $i=0; ?>
<?php while ($the_query->have_posts()){ ?>
<?php $the_query->the_post(); ?>
<?php $i++; ?>
<?php
if($i<$number_of_posts+1)$slide_state="my-slide-non-active";
if($i==1)$slide_state="my-slide-active";
if($i==2)$slide_state="my-slide-non-active my-slide-click-right";
?>
<div class="flex col justify-center">
<div>
<div id="my-slide-<?php echo $i; ?>" value="<?php echo $i; ?>" class="<?php echo " ".$slide_state; ?> my-slide-inner">
<div class="container floor-plan-inner-container mgt-20 site-black <?php echo $final_search?>">
<div class="brk-600-col w-80-p brk-1800-w-90-p brk-1200-w-initial mg-auto floorplan-rows">
<div class="floorplan-row">
<div class="flex row brk-700-col justify-center">
<div class="flex col w-45-p brk-700-w-initial justify-center">
<div class="pdb-0 brk-600-pd-0 floor-plans-display-holder">
<div id="window-display-floor-<?php echo $i; ?>" class="dis-none floor-plan-display-window-<?php echo $i; ?>"><a href="<?php echo get_field('floorplan_image_1'); ?>" rel="lightbox"><img src="<?php echo get_field('floorplan_image_1'); ?>" class="floor-plan-img w-100-p" /></a></div>
<div id="window-display-photo-<?php echo $i; ?>" class="floor-plan-display-window-<?php echo $i; ?>"><a href="<?php echo get_field('floorplan_image_2'); ?>" rel="lightbox"><img src="<?php echo get_field('floorplan_image_2'); ?>" class="floor-plan-img w-100-p" /></a></div>
</div>
<div class="slide-content">
<?php if(get_field('floorplan_image_1') && get_field('floorplan_image_2')){ ?>
<div class="flex row justify-center mg-auto mgt-10 floor-plans-icon-holder floor-plan-icons-holder-<?php echo $i; ?>">
<?php if(get_field('floorplan_image_1')){ ?>
<div class="flex col justify-center">
<span class="display-floor-<?php echo $i; ?> floorplan-icon-default font-webicons floorplan-icons fl-icon-1 mgr-15 mgl-15 brk-600-mgl-5 brk-600-mgr-5"><a class="floorplan-button">2D</a></span>
</div>
<?php } ?>
<?php if(get_field('floorplan_image_2')){ ?>
<div class="flex col justify-center">
<span class="display-photo-<?php echo $i; ?> floorplan-icon-default font-webicons floorplan-icons floorplan-icon fl-icon-2 mgr-15 mgl-15 brk-600-mgl-5 brk-600-mgr-5"><a class="floorplan-button">3D</a></span>
</div>
<?php } ?>
</div>
<?php } ?>
</div>
</div>
<div class="flex col w-10-p brk-700-dis-none justify-center p-rel">
<div class="p-absolute all-sides-0 text-center">
<div class="ht-100-p border-0 border-rt-2 border-solid site-color-1 inline-block"></div>
</div>
</div>
<div class="flex col w-45-p brk-700-w-initial justify-center">
<div class="text-left site-color-1">
<h2 class="font-35 brk-1200-font-18 brk-900-font-14 fl-title font-w-700 mgt-15 mgb-5"><?php echo get_field('floor_plan_name');?></h2>
<h2 class="font-35 brk-1200-font-18 brk-900-font-14 fl-title font-w-700 mgt-15 mgb-5"><?php echo get_field('floor_plan_description'); ?></h2>
<ul class="line-170 pdl-20 font-18">
<li><?php echo get_field('bedrooms'); ?> Bed </li>
<li><?php echo get_field('bathrooms'); ?> Bath </li>
<li>SqFt <?php echo get_field('square_feet'); ?> </li>
<li>Starting At: <?php echo get_field('rent'); ?> </li>
</ul>
<div class="mgb-30 mgt-15 brk-600-mgt-40 brk-600-mgb-10">
<a class="outer-unit-button-<?php echo $i ?> schedule-tour-click w-30-p brk-1800-w-40-p brk-1200-w-70-p text-center mgr-10 site-color-1-bk site-color-2-bk-hover site-white site-white-hover pd-10 inline-block brk-1200-block brk-700-font-15">Check Availability</a>
<a class="schedule-tour-click w-30-p brk-1800-w-40-p brk-1200-w-70-p text-center site-color-1-bk site-color-2-bk-hover site-white-hover site-white pd-10 inline-block brk-700-block brk-1200-mgt-10 brk-1200-font-15" href="/floorplans">Apply Now</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$('#window-display-floor-<?php echo $i; ?>').click(function(){
});
$('#window-display-photo-<?php echo $i; ?>').click(function(){
});
$(".outer-unit-button-<?php echo $i ?>").click(function(){
});
</script>
</div>
</div>
</div>
<?php $slide_state=''; $final_search=''; ?>
<?php } ?>
</div>
</div>
<div class="flex col justify-center">
<div href="#" class="my-slide-next"><img src="<?php echo THEME_DIR; ?>/images/blue-right-arrow.png" class="pd-20 brk-700-wd-20" /></div>
</div>
</div>
<div class="flex row justify-center p-absolute left-0 right-0 bottom-0 mgb-10 mgt-10 z-index-500">
<?php for ($x = 1; $x < $number_of_posts+1; $x++) { ?>
<div class="slide-page pager-<?php echo $x; ?> flex col justify-center pd-5 <?php if($x==1){ ?>site-color-1<?php }else{ ?>site-color-2<?php } ?> font-35 pointer site-color-1-hover transition-05" onclick="click_paginate(<?php echo $x; ?>,this);">●</div>
<?php } ?>
</div>
</div>
<!-- ############################################# //-->
<!-- ########## SLIDER JAVASCRIPT ############### //-->
<!-- ############################################# //-->
<script>
function check_slide_click(){
$( ".my-slide-click-left" ).unbind();
$( ".my-slide-click-right" ).unbind();
$( ".my-slide-active" ).unbind();
$( ".my-slide-outer img" ).unbind();
$('.my-slide-click-left').click(function(){
click_prev();
});
$('.my-slide-click-right').click(function(){
click_next();
});
$('.my-slide-active img').click(function () {
$(this).parent('a').trigger('click');
});
}
function click_paginate(targetslide,thiselement){
$('.slide-page').removeClass('site-color-1');
$('.slide-page').removeClass('site-color-2');
$('.slide-page').addClass('site-color-2');
$(thiselement).removeClass('site-color-2');
$(thiselement).addClass('site-color-1');
var d = $('.my-slide-outer');
width=$('.my-slide-active').outerWidth();
currentslide=$('.my-slide-active').attr("value");
if(targetslide>currentslide){
var active_val=$('.my-slide-active').attr('value');
var curent_active_id='#my-slide-' + active_val;
var old_active_id_left='#my-slide-' + (+active_val-1);
var old_active_id_right='#my-slide-' + (+active_val+1);
slideoffset=targetslide-currentslide;
d.animate({left:d.position().left-(width*slideoffset)+'px'},'slow');
$('#my-slide-' + targetslide).removeClass('my-slide-non-active');
$('#my-slide-' + targetslide).addClass('my-slide-active');
$(curent_active_id).removeClass('my-slide-active');
$(curent_active_id).addClass('my-slide-non-active');
$(curent_active_id).addClass('my-slide-click-right');
$(old_active_id_left).removeClass('my-slide-click-left');
$(old_active_id_right).removeClass('my-slide-click-right');
check_slide_click();
}
if(targetslide<currentslide){
num_posts=<?php echo $number_of_posts -1; ?>
var active_val=$('.my-slide-active').attr('value');
var curent_active_id='#my-slide-' + active_val;
var old_active_id_left='#my-slide-' + (+active_val-1);
var old_active_id_right='#my-slide-' + (+active_val+1);
slideoffset=currentslide-targetslide;
d.animate({left:d.position().left+(width*slideoffset)+'px'},'slow');
$('#my-slide-' + targetslide).removeClass('my-slide-non-active');
$('#my-slide-' + targetslide).addClass('my-slide-active');
$(curent_active_id).removeClass('my-slide-active');
$(curent_active_id).addClass('my-slide-non-active');
$(curent_active_id).addClass('my-slide-click-left');
$(old_active_id_right).removeClass('my-slide-click-right');
$(old_active_id_left).removeClass('my-slide-click-left');
check_slide_click();
}
}
function click_next(){
var active_val=$('.my-slide-active').attr('value');
var curent_active_id='#my-slide-' + active_val;
var old_active_id_left='#my-slide-' + (+active_val-1);
var old_active_id_right='#my-slide-' + (+active_val+1);
var new_active_id_right='#my-slide-' + (+active_val+2);
num_posts=<?php echo $number_of_posts -1; ?>
if(!$('.my-slide-outer').is(':animated')){
if(active_val<=num_posts){
var d = $('.my-slide-outer');
width=$('.my-slide-active').outerWidth();
d.animate({left:d.position().left-width+'px'},'slow');
$(curent_active_id).removeClass('my-slide-active');
$(curent_active_id).addClass('my-slide-non-active');
$(old_active_id_right).removeClass('my-slide-non-active');
$(old_active_id_right).addClass('my-slide-active');
$(curent_active_id).addClass('my-slide-click-left');
$(old_active_id_right).removeClass('my-slide-click-right');
$(new_active_id_right).addClass('my-slide-click-right');
$(old_active_id_left).removeClass('my-slide-click-left');
$('.slide-page').removeClass('site-color-1');
$('.slide-page').removeClass('site-color-2');
$('.slide-page').addClass('site-color-2');
$('.pager-' + (+active_val+1)).removeClass('site-color-2');
$('.pager-' + (+active_val+1)).addClass('site-color-1');
check_slide_click();
}else{
var active_val=1;
var curent_active_id='#my-slide-' + <?php echo $number_of_posts; ?>;
var old_active_id_left='#my-slide-1';
var old_active_id_right='#my-slide-' + (+active_val+1);
var new_active_id_left='#my-slide-' + (+active_val-2);
var d = $('.my-slide-outer');
width=$('.my-slide-active').outerWidth();
d.animate({left:d.position().left+(width*num_posts)+'px'},'slow');
$(curent_active_id).removeClass('my-slide-active');
$(curent_active_id).addClass('my-slide-non-active');
$(old_active_id_left).removeClass('my-slide-non-active');
$(old_active_id_left).addClass('my-slide-active');
$(curent_active_id).addClass('my-slide-click-right');
$(old_active_id_left).removeClass('my-slide-click-left');
$(new_active_id_left).addClass('my-slide-click-left');
$(old_active_id_right).removeClass('my-slide-click-right');
$('.slide-page').removeClass('site-color-1');
$('.slide-page').removeClass('site-color-2');
$('.slide-page').addClass('site-color-2');
$('.pager-' + (active_val)).removeClass('site-color-2');
$('.pager-' + (active_val)).addClass('site-color-1');
check_slide_click();
}
}
}
function click_prev(){
var active_val=$('.my-slide-active').attr('value');
var curent_active_id='#my-slide-' + active_val;
var old_active_id_left='#my-slide-' + (+active_val-1);
var old_active_id_right='#my-slide-' + (+active_val+1);
var new_active_id_left='#my-slide-' + (+active_val-2);
$('.slide-page').removeClass('site-color-1');
$('.slide-page').removeClass('site-color-2');
$('.slide-page').addClass('site-color-2');
$(new_active_id_left).removeClass('site-color-2');
$(new_active_id_left).addClass('site-color-1');
post_offset=2;
num_posts=<?php echo $number_of_posts -1; ?>;
if(!$('.my-slide-outer').is(':animated')){
if(active_val>=post_offset){
var d = $('.my-slide-outer');
width=$('.my-slide-active').outerWidth();
d.animate({left:d.position().left+width+'px'},'slow');
$(curent_active_id).removeClass('my-slide-active');
$(curent_active_id).addClass('my-slide-non-active');
$(old_active_id_left).removeClass('my-slide-non-active');
$(old_active_id_left).addClass('my-slide-active');
$(curent_active_id).addClass('my-slide-click-right');
$(old_active_id_left).removeClass('my-slide-click-left');
$(new_active_id_left).addClass('my-slide-click-left');
$(old_active_id_right).removeClass('my-slide-click-right');
$('.slide-page').removeClass('site-color-1');
$('.slide-page').removeClass('site-color-2');
$('.slide-page').addClass('site-color-2');
$('.pager-' + (+active_val-1)).removeClass('site-color-2');
$('.pager-' + (+active_val-1)).addClass('site-color-1');
check_slide_click();
}else{
active_val=num_posts;
curent_active_id='#my-slide-1';
old_active_id_left='#my-slide-' + (+active_val-1);
old_active_id_right='#my-slide-' + (+active_val+1);
new_active_id_right='#my-slide-' + (+active_val+2);
var d = $('.my-slide-outer');
width=$('.my-slide-active').outerWidth();
d.animate({left:d.position().left-(width*num_posts)+'px'},'slow');
$(curent_active_id).removeClass('my-slide-active');
$(curent_active_id).addClass('my-slide-non-active');
$(old_active_id_right).removeClass('my-slide-non-active');
$(old_active_id_right).addClass('my-slide-active');
$(curent_active_id).addClass('my-slide-click-left');
$(old_active_id_right).removeClass('my-slide-click-right');
$(new_active_id_right).addClass('my-slide-click-right');
$(old_active_id_left).removeClass('my-slide-click-left');
$('.slide-page').removeClass('site-color-1');
$('.slide-page').removeClass('site-color-2');
$('.slide-page').addClass('site-color-2');
$('.pager-' + (active_val+1)).removeClass('site-color-2');
$('.pager-' + (active_val+1)).addClass('site-color-1');
check_slide_click();
}
}
}
function size_slide(){
if ($(".query-check").css("order") >= "1" ){
slide_width_val=1;
active_val_counter=1;
}
if ($(".query-check").css("order") >= "2" ){
slide_width_val=1;
active_val_counter=1;
}
if ($(".query-check").css("order") >= "3" ){
slide_width_val=1;
active_val_counter=1;
}
if ($(".query-check").css("order") >= "4" ){
slide_width_val=1;
active_val_counter=1;
}
if ($(".query-check").css("order") >= "5" ){
slide_width_val=1;
active_val_counter=1;
}
var slide_width=$('.my-slide-container').width() /slide_width_val;
var active_val=$('.my-slide-active').attr('value');
var new_pos=((active_val-active_val_counter)*-slide_width);
var slideheight = $('.my-slide-outer').height();
$('.my-slide-inner').css({"width":slide_width});
$('.my-slide-outer').css({"left":new_pos});
}
size_slide();
$('.my-slide-prev').click(function(){
click_prev();
});
$('.my-slide-next').click(function(){
click_next();
});
check_slide_click();
$(window).load(function() {
size_slide();
})
$(window).resize(function() {
size_slide();
});
</script>
</div>
