We Keep Coding

Cannot display slider in jquery response

I have successfully implemented slider on view page but in jquery response i dont understand y slider is not moving and i dont know where i am doing wrong. Actually i ve loaded data in jquery response which is coming from database.
Here is my successful view page for slider:
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" style="width:640px;">
<div class="modal-content">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" id="slider">
<?php $count=1; if($inspection_images !=''){ foreach($inspection_images as $img){?>
<div class="item <?php if($count==1){ echo 'active'; } ?>">
<img class="img-responsive" src="<?php echo base_url();?>uploads/inspection/<?php echo $img->attachment_saved_name; ?>" alt="...">
<div class="carousel-caption">
<?php echo $img->attachment_name.' ('.$img->column_name.')'; ?>
</div>
</div>
<?php $count++; }} ?>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
which successfully produces this:
and now i want to do the same thing in jquery reponse to set those data in slider:
function galleryselectetemplate()
{
var c = $('#gallery option:selected').val();
var gt = $('#templategallery option:selected').val();
// alert(gt);
$.ajax({
cache: false,
dataType:'json',
type: 'POST',
url: site_url+'Gallery/inspection_gallery',
data: {client:c,gt:gt},
success: function(resp)
{
// alert((JSON.stringify(resp)));
// var count=1;
var json_arr = JSON.parse(JSON.stringify(resp));
<?php $count=1; ?>
if(json_arr != null)
{
<?php $count=1; ?>
$('#img').empty();
for(var ind = 0;ind < json_arr.length;ind++)
{
/* $('#img').append('<img src="<?php echo base_url(); ?>uploads/inspection/'+json_arr[ind]['attachment_saved_name']+'" class="img-responsive"></img>');*///shows fit smaller image
$('#img').append('<a onclick="viewImage(\''+json_arr[ind]['attachment_saved_name']+'\')" title="'+json_arr[ind]['attachment_original_name']+'" href="javascript:;"><img src="<?php echo base_url(); ?>uploads/inspection/'+json_arr[ind]['attachment_saved_name']+'" width="300" height="200" class="img-responsive"></img></a>');//showing very larger img and i dont know y it is not getting in viewImage?
/* $('#slider').append('<img class="img-responsive " src="<?php echo base_url();?>uploads/inspection/'+json_arr[ind]['attachment_saved_name']+'" alt="..."></img>');*/
$('#slider').html('<div class="item <?php if($count==1){ echo 'active'; } ?>"><img class="img-responsive " src="<?php echo base_url();?>uploads/inspection/'+json_arr[ind]['attachment_saved_name']+'" alt="..."></img></div>');
<?php $count++; ?>
}
}
}
});
// var ins= $("#inspectionid").val();
// alert(c);
// alert(gt);
// alert(ins);
}
but i get this only:
, slider is not moving. Any idea where in my jquery i am doing wrong?

After Ajax response, when you bind HTML in your slider div, you have to call $('.carousel').carousel();
function galleryselectetemplate()
{
var c = $('#gallery option:selected').val();
var gt = $('#templategallery option:selected').val();
// alert(gt);
$.ajax({
cache: false,
dataType:'json',
type: 'POST',
url: site_url+'Gallery/inspection_gallery',
data: {client:c,gt:gt},
success: function(resp)
{
// alert((JSON.stringify(resp)));
// var count=1;
var json_arr = JSON.parse(JSON.stringify(resp));
<?php $count=1; ?>
if(json_arr != null)
{
<?php $count=1; ?>
$('#img').empty();
for(var ind = 0;ind < json_arr.length;ind++)
{
/* $('#img').append('<img src="<?php echo base_url(); ?>uploads/inspection/'+json_arr[ind]['attachment_saved_name']+'" class="img-responsive"></img>');*///shows fit smaller image
$('#img').append('<a onclick="viewImage(\''+json_arr[ind]['attachment_saved_name']+'\')" title="'+json_arr[ind]['attachment_original_name']+'" href="javascript:;"><img src="<?php echo base_url(); ?>uploads/inspection/'+json_arr[ind]['attachment_saved_name']+'" width="300" height="200" class="img-responsive"></img></a>');//showing very larger img and i dont know y it is not getting in viewImage?
/* $('#slider').append('<img class="img-responsive " src="<?php echo base_url();?>uploads/inspection/'+json_arr[ind]['attachment_saved_name']+'" alt="..."></img>');*/
$('#slider').html('<div class="item <?php if($count==1){ echo 'active'; } ?>"><img class="img-responsive " src="<?php echo base_url();?>uploads/inspection/'+json_arr[ind]['attachment_saved_name']+'" alt="..."></img></div>');
<?php $count++; ?>
}
}
$('.carousel').carousel();
}
});
// var ins= $("#inspectionid").val();
// alert(c);
// alert(gt);
// alert(ins);
}

Javascript from PHP (wordpress)

I created a new WordPress theme. When I moved it into an IIS webserver it fails.
Here's my code:
<?php get_header(); ?>
<h2><?php the_title();?></h2>
<div class="infoBox" id="infoTxt">
<?php
if(get_the_title() == 'Home'){
$page = get_page_by_title( get_the_title());
$Pagecontent = apply_filters('the_content', $page->post_content);
$ContentArray = explode(";",$Pagecontent);
echo $ContentArray[count($ContentArray) -1];
<script type="text/javascript">
var info = <?php echo json_encode($ContentArray) ?>;
document.getElementById('infoTxt').innerHTML = info[1];
setInterval(function()
{
var i = Math.round((Math.random()) * info.length);
if (i == info.length) --i;
document.getElementById('infoTxt').innerHTML = info[i];
}, 5 * 1000);
</script>
<?php
}
else{
$page = get_page_by_title( get_the_title());
$content = apply_filters('the_content', $page->post_content);
$InfoboxStr = substr($content, 0, strpos($content, '#:'));
echo $InfoboxStr;
}
?>
</div><!--End InfoTxt-->
<div id="Flagbox">
<ul style="list-style-type:none;">
<li><img class="flagContainer" alt="English" src="<?php bloginfo('stylesheet_directory'); ?>/img/GbFlag.png""/></li>
<li><img class="flagContainer" alt="Deutsch" src="<?php bloginfo('stylesheet_directory'); ?>/img/GmFlag.png""/></li>
<li><img class="flagContainer" alt="French" src="<?php bloginfo('stylesheet_directory'); ?>/img/FrFlag.png""/></li>
</ul>
</div> <!-- end Flag Box-->
<div style="margin-bottom:25%;">
</div>
<?php get_footer(); ?>
It is because of the JavaScript but I have some problem fixing this, I have first of all tried to echo the JavaScript, but I then got a problem with the first line of the script which is: var info = <?php echo json_encode($ContentArray) ?>;
When I ex. tried to
Echo 'var info = ' + echo json_encode($ContentArray) ?> + ";"
I just gets an http 500-error. Do any of you have an idea of what I can try to fix my problem

If you want to use the <Script> tag, you need to close the php tag, in here:
echo $ContentArray[count($ContentArray) -1];
<script type="text/javascript">
So it should look like that:
?>
<script>
[..]
</script>
<?php
The best practice it that you should place the JS either in at the top or bottom of your file or in another file.

The Problem is that you did not close the PHP Tags before entering the <Script> Block... In other words; you were still in PHP Mode when you wrote your Javascript as if you were writing it on a normal HTML Document. Sure you can output Javascript via PHP but then, you may have to build that up.
Here you go with something that might assist:::
<?php get_header(); ?>
<h2><?php the_title();?></h2>
<div class="infoBox" id="infoTxt">
<?php
if(get_the_title() == 'Home'){
$page = get_page_by_title( get_the_title());
$Pagecontent = apply_filters('the_content', $page->post_content);
$ContentArray = explode(";",$Pagecontent);
echo $ContentArray[count($ContentArray) -1];
?>
<script type="text/javascript">
var info = <?php echo json_encode($ContentArray) ?>;
document.getElementById('infoTxt').innerHTML = info[1];
setInterval(function() {
var i = Math.round((Math.random()) * info.length);
if (i == info.length){ --i; }
document.getElementById('infoTxt').innerHTML = info[i];
}, 5 * 1000);
</script>
<?php
}else{
$page = get_page_by_title( get_the_title());
$content = apply_filters('the_content', $page->post_content);
$InfoboxStr = substr($content, 0, strpos($content, '#:'));
echo $InfoboxStr;
}
?>
</div><!--End InfoTxt-->
<div id="Flagbox">
<ul style="list-style-type:none;">
<li><img class="flagContainer" alt="English" src="<?php bloginfo('stylesheet_directory'); ?>/img/GbFlag.png""/></li>
<li><img class="flagContainer" alt="Deutsch" src="<?php bloginfo('stylesheet_directory'); ?>/img/GmFlag.png""/></li>
<li><img class="flagContainer" alt="French" src="<?php bloginfo('stylesheet_directory'); ?>/img/FrFlag.png""/></li>
</ul>
</div> <!-- end Flag Box-->
<div style="margin-bottom:25%;">
</div>
<?php get_footer(); ?>

Open Google Maps InfoWindow on link click outside of map

This is javascript I use to make all markers and set click listener
var infowindow = new google.maps.InfoWindow();
var markernovi, i;
for (i = 0; i < lokacije.length; i++) {
var ll = lokacije[i][2];
var latlng = ll.split(',');
markernovi = new google.maps.Marker({
position: new google.maps.LatLng(parseFloat(latlng[0]), parseFloat(latlng[1])),
map: mapObject,
icon: 'img/pins/' + key + '.png',
});
google.maps.event.addListener(markernovi, 'click', (function (markernovi, i) {
return function () {
infowindow.setContent(lokacije[i][0]);
infowindow.open(mapObject, markernovi);
}
})(markernovi, i));
markers.push(markernovi);
}
}
google.maps.event.addDomListener(window, 'load' , initialize);
function myClick(id){
google.maps.event.trigger(markers[id], 'click');
}
And I have this to list all locations on page :
<?php
foreach($lokacijebuy1 as $sve) {
?>
<div class="col-lg-6 col-md-12 col-sm-6">
<div class="img_wrapper">
<div class="img_container">
<a href="#" onclick="myClick(0);" >
<img src="http://evidentiraj.me/gkcard/slikemjesta/<?php echo $sve['photo']; ?>" width="800" height="533" class="img-responsive" alt="">
<div class="short_info">
<h3><?php echo $sve['ime2']; ?></h3>
<em><?php echo $sve['adresa']; ?></em>
<p>
<?php echo $sve['opis2']; ?>
</p>
</div>
</a>
</div>
</div><!-- End img_wrapper -->
</div><!-- End col-md-6 -->
<?php }
?>
And no matter which one I click only infowindow I open is the first one in array.
You can see page live here : http://evidentiraj.me/gorskikotarcard/locationsbuy.php
And I found that the only thing I need to change to display other marker is number inside myClick
<a href="#" onclick="myClick(1);" >
ANSWER:
only thing I did was to add counter in my <a href tag
Now it looks like this:
<?php
$counter = 0;
foreach($lokacijebuy1 as $sve) {
?>
<div class="col-lg-6 col-md-12 col-sm-6">
<div class="img_wrapper">
<div class="img_container">
<a href="#" onclick="myClick(<?php echo $counter; ?>);" >
<img src="http://evidentiraj.me/gkcard/slikemjesta/<?php echo $sve['photo']; ?>" width="800" height="533" class="img-responsive" alt="">
<div class="short_info">
<h3><?php echo $sve['ime2']; ?></h3>
<em><?php echo $sve['adresa']; ?></em>
<p>
<?php echo $sve['opis2']; ?>
</p>
</div>
</a>
</div>
</div><!-- End img_wrapper -->
</div><!-- End col-md-6 -->
<?php
$counter++;
}
?>

It's because you render the a element with function myClick with input argument set to 0, and you use this argument as an index in the markers array inside your function, which is still the first marker in the array. You need to change the way you render the a element to get results like this:

Bootstrap carousel news slides timing wrong

I've been developing a wordpress template with a bootstrap (3.3.6.) carousel news slider. But the slides timing is all wrong after a few seconds. I already set a timer in custom.js, but it only worked on the news button (replacement of indicator), while the slides are moving way too fast after a few seconds.The weirdest thing is, if I change the bootstrap link to the cdn, the slides move properly but the news button are not moving at all. Any ideas on how to fix this?
This is the website for you to review: http://tfcakalimantan.org
The front-page.php
<?php
$args = array(
'post_type' => 'post',
'tag' => 'featured',
'posts_per_page' => 5
);
$the_query = new WP_Query( $args );
?>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="list-group col-sm-4" style="padding-right: 0px;"> <?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<li data-target="#myCarousel" data-slide-to="<?php echo $the_query->current_post; ?>" class="list-group-item <?php if( $the_query->current_post == 0) echo 'active'; ?>"><h5><?php the_title(); ?></h5></li><?php endwhile; endif; ?>
</ol>
<?php rewind_posts(); ?>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<?php
$thumbnail_id = get_post_thumbnail_id();
$thumbnail_url = wp_get_attachment_image_src( $thumbnail_id, 'thumbnail-size', true );
$thumbnail_meta = get_post_meta( $thumbnail_id, '_wp_attachment_image_alt', true);
?>
<div class="item <?php if( $the_query->current_post == 0) echo 'active'; ?>">
<img src="<?php echo $thumbnail_url[0]; ?>" class="img-responsive" alt="<?php echo $thumbnail_meta; ?>">
<div class="carousel-caption">
<p><?php the_title(); ?></p>
</div></div>
<?php endwhile; endif; ?>
</div><!-- End Item -->
</div><!-- End Carousel Inner -->
</div>
<!-- Controls -->
<div class="row">
<div class="carousel-controls">
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<i class="fa fa-arrow-circle-left fa-2x"></i>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<i class="fa fa-arrow-circle-right fa-2x"></i>
</a>
</div>
</div>
</div><!-- End Carousel -->
The custom.js
// Carousel
$(document).ready(function(){
var clickEvent = false;
$('#myCarousel').carousel({
interval: 2000
}).on('click', '.list-group li', function() {
clickEvent = true;
$('.list-group li').removeClass('active');
$(this).addClass('active');
}).on('slid.bs.carousel', function(e) {
if(!clickEvent) {
var count = $('.list-group').children().length -1;
var current = $('.list-group li.active');
current.removeClass('active').next().addClass('active');
var id = parseInt(current.data('slide-to'));
if(count == id) {
$('.list-group li').first().addClass('active');
}
}
clickEvent = false;
});
});
$(window).load(function() {
var boxheight = $('#myCarousel .carousel-inner').innerHeight();
var itemlength = $('#myCarousel .item').length;
var triggerheight = Math.round(boxheight/itemlength+1);
$('#myCarousel .list-group-item').outerHeight(triggerheight);
});
The style.css
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
#myCarousel .carousel-caption {
left:0;
right:0;
bottom:0;
text-align:left;
padding:10px;
background:rgba(0,0,0,0.6);
text-shadow:none;
font-family: 'Droid Sans', sans-serif;
color: #FFFFFF;
}
#myCarousel .list-group {
position:absolute;
top:0;
right:0;
font-family: 'Pontano Sans', sans-serif;
}
#myCarousel .list-group-item {
border-radius:0px;
cursor:pointer;
}
#myCarousel .list-group .active {
background-color:#6D9755;
}
#myCarousel .item {
height: 300px;
}
.carousel-controls {display:none;}

How to stop slider when hover in javascript

Im stuck with javascript part.please help me to solve this. I want to stop slider animation when mouse hover.
this is my code. i used worpresstheme. then slider load with wordpress part. how can i stop slider when mouse hover.
$query=new WP_Query($args);
if($query->have_posts()) {
$hasSliderEmpty=false;
echo '<div class="slides-container">';
echo '<div onmousemove="myMoveFunction()" onmouseout="myOutFunction" id="home_slider">
<section class="autoheight home_slider">
<section class="inner-slider">
<div id="slider_562472b018d72">
<div class="slides-container">';
$c=0;
while($query->have_posts()) {
$query->the_post();
echo get_the_post_thumbnail(get_the_ID(),'large');
}
global $wpdb;
$vimeoLink= $wpdb->get_var("SELECT meta_value FROM fts_postmeta WHERE post_id = '$event_id' and meta_key='_event_after_movie_link'");
if($vimeoLink != ''){
//echo $vimeoLink;
echo '<iframe src="//player.vimeo.com/video/'.$vimeoLink.'" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
}
echo '</div>';
echo '</div>
<div class="col-lg-12 landing-text-pos image_content wow animated fadeInDown" data-wow-duration="1s" data-wow-delay="1s" style="top:35%;">
<div class="slider_inner_content">
<div class="container align-center" style="padding-top:15px;">
</div>
</div>
</div>
<script type="text/javascript">
window.globalSlides = "#slider_562472b018d72";
window.globalSliderSpeed = "5000";
window.globalSlidesActive = "yes";
</script>
<script type="text/javascript">
window.globalHeaderTransparentActive = "yes";
</script>
</section>
</section>
</div>
</div>';
?>