| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | <script> $('.fx-slider').cycle(); </script> <!-- ############################################# --> <!-- ############### SLIDER IMAGE ################ --> <!-- ############################################# --> <div class="fx-slider-image no-repeat back-pos-center contain w-100-p" style="background-image:url(<?php echo get_field('fx_back'); ?>);" > <div class="fx-slider" data-cycle-slides="> div" data-cycle-fx="fade" data-cycle-reverse="false" data-cycle-timeout="3000" data-cycle-manual-speed="500" data-cycle-prev="#prev" data-cycle-next="#next" data-cycle-pager="#pager" data-cycle-pager-template="<a href=#> </a>" > <?php $i=0; while( have_rows('fx_slider') ) : the_row(); ?> <div class="fx-slider-image no-repeat back-pos-center contain w-100-p <?php if($i)echo 'dis-none"'; ?>" style="background-image:url(<?php echo get_sub_field('image'); ?>);" ></div> <?php $i++; ?> <?php endwhile; ?> </div> </div> <script> var img = new Image(); img.onload = function() { windowwidth=$(window).width(); offset=this.width / this.height; new_height=(windowwidth/offset); $(".fx-slider-image").css({"height":new_height}); } img.src = '<?php echo get_field('fx_back'); ?>'; $(document).ready(function(){ var loaded_offset = $(".fx-slider-image").width() / $(".fx-slider-image").height(); $(window).resize(function() { windowwidth=$(window).width(); new_height=(windowwidth/loaded_offset); $(".fx-slider-image").css({"height":new_height}); }); }); </script> |