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>';
?>
Related
I need to adjust my code so that the video is played in the modal that is opened when the user clicks on it.
This code was implemented in a modal that was to display images.
I use JS: https://dimsemenov.com/plugins/magnific-popup/documentation.html
PHP:
<?php
$url = 'https://www.youtube.com/feeds/videos.xml?channel_id=ID';
$xml = simplexml_load_file($url);
$ns = $xml->getDocNamespaces(true);
$xml->registerXPathNamespace('a', 'http://www.w3.org/2005/Atom');
$elementos = $xml->xpath('//a:entry');
$conteudo = $elementos[0];
$videos_pagina = "12";
$page = isset($_GET['pagina'])?intval($_GET['pagina']-1):0;
$total_paginas = ceil(count($elementos)/$videos_pagina);
if (isset($_GET['pagina']) && is_numeric($_GET['pagina'])) {
$pagina = (int) $_GET['pagina'];
} else {
$pagina = 1;
}
if ($pagina > $total_paginas) {
$pagina = $total_paginas;
}
if ($pagina < 1) {
$pagina = 1;
}
$offset = ($pagina - 1) * $videos_pagina;
$range = 3;
$prevpage = $pagina - 1;
$nextpage = $pagina + 1;
$anterior = $baseurl."/videos/pagina/".$prevpage;
$proxima = $baseurl."/videos/pagina/".$nextpage;
?>
HTML:
<section class="about-section pb30">
<div class="container">
<div class="row">
<?php
foreach (array_slice($elementos, $page*$videos_pagina, $videos_pagina) as $item) {
$media = $item->children('http://search.yahoo.com/mrss/');
$yt = $item->children('http://www.youtube.com/xml/schemas/2015');
$miniatura = $media->group->thumbnail->attributes()->url->__toString();
$titulo = $item->title;
$url_embed = "https://www.youtube.com/embed/".$yt->videoId;
?>
<div class="col-sm-6 col-md-6 col-lg-4">
<div class="gallery_item">
<img class="img-fluid img-circle-rounded w100" src="<?php echo $miniatura; ?>" alt="<?php echo $titulo; ?>">
<div class="gallery_overlay"></span></div>
</div>
</div>
<?php } ?>
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="gallery_item" align="center"><br>
<button type="button" <?php if ($pagina > 1) { }else{ echo "disabled"; } ?> onclick="location.href='<?php echo $anterior; ?>';" class="btn btn-lg btn-thm">Página anterior</button>
<button type="button" <?php if ($pagina != $total_paginas) { }else{ echo "disabled"; } ?> onclick="location.href='<?php echo $proxima; ?>';" class="btn btn-lg btn-thm">Próxima página</button>
</div>
</div>
</div>
</div>
</section>
Currently when the user clicks on the video he opens the modal, however I need the video to be loaded.
How should I do?
You can easily embed or place the YouTube video inside a Bootstrap modal like you do on the normal web pages. Just get the code to embed the video from YouTube site and place it inside the .modal-body element. But there is small problem; the YouTube video doesn't stop automatically when you close the modal window. It will still play in the background.
To solve this problem you can simply toggle the url value of the YouTube's video iframe src attribute dynamically using the jQuery. Let's try out the following example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of Embedding YouTube Video inside Bootstrap Modal</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.bs-example{
margin: 20px;
}
.modal-content iframe{
margin: 0 auto;
display: block;
}
</style>
<script>
$(document).ready(function(){
/* Get iframe src attribute value i.e. YouTube video url
and store it in a variable */
var url = $("#cartoonVideo").attr('src');
/* Assign empty url value to the iframe src attribute when
modal hide, which stop the video playing */
$("#myModal").on('hide.bs.modal', function(){
$("#cartoonVideo").attr('src', '');
});
/* Assign the initially stored url back to the iframe src
attribute when modal is displayed again */
$("#myModal").on('show.bs.modal', function(){
$("#cartoonVideo").attr('src', url);
});
});
</script>
</head>
<body>
<div class="bs-example">
<!-- Button HTML (to Trigger Modal) -->
Launch Demo Modal
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">YouTube Video</h4>
</div>
<div class="modal-body">
<iframe id="cartoonVideo" width="560" height="315" src="//www.youtube.com/embed/YE7VzlLtp-4" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I have a flexslider with one video. The code is like this:-
HTML:
if(count($bannerlist)>0)
{
$v = 0;
foreach($bannerlist as $key=>$row)
{
if($row['Banner']['media_type'] == 'i')
{
?>
<li>
<img src="<?php echo $this->webroot.$row['Banner']['image_name']; ?>" />
<div class="flexCaption">
<div class="container">
<div class="col-md-6 pull-right">
<div class="valiGn">
<h2><?php echo $row['Banner']['title'];?></h2>
<!--<h3>Assurance</h3>-->
<p><?php echo $row['Banner']['description'];?></p>
<!--<a class="linkView" href="#">View Details</a>-->
</div>
</div>
</div>
</div>
</li>
<?php
}
else if($row['Banner']['media_type'] == 'v')
{
$v++;?>
<li id="slide<?php echo $v;?>">
<video id="myVideo<?php echo $v;?>" class="classFlexVideo" autoplay loop>
<source src="<?php echo $this->webroot.$row['Banner']['image_name'];?>" type="video/mp4">
<!--<source src="<?php echo $this->webroot?>images/Balasore.webm" type="video/webm; codecs=vp8, vorbis">-->
</video>
<img src="<?php echo $this->webroot?>images/bg3.jpg" />
<div class="flexCaption">
<div class="container">
<div class="col-md-6 pull-right">
<div class="valiGn">
<h2><?php echo $row['Banner']['title'];?></h2>
<p><?php echo $row['Banner']['description'];?></p>
</div>
</div>
</div>
</div>
</li>
<?php
}
}
}
Javascript/Jquery:-
$('.flexslider').flexslider({
animation: "slide",
direction: "vertical",
animationLoop: false,
directionNav: false,
video: true,
slideshow: false,
manualControls: ".flex-control-nav li",
itemMargin: 10,
start:function(){
/*myVideo1.play();*/
},
before: function(){
$('video').get(0).pause();
}
});
$('#vidPlay1').click(function(){ // click on first dots to play video
myVideo1.play();
});
I am fetching the images/video from the database and so there could be more than one video. In that case, the id of the video object could be like myVideo1, myVideo2, myVideo3,.... and so on. I need to write codes like myVideo1.play(), myVideo2.play(), etc.
In PHP, we can create dynamic variables like
$var = 'myHouse';
$$var then denotes $myHouse.
Is there something similar in javascript? Say for example,
var videoVar = eval('myVideo' + i);
videoVar.play();
The preferred way to access elements by their ID is to use document.getElementById, so this is what you can do:
var video = document.getElementById('myVideo' + i)
video.play()
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:
I have a php that looks like this
<?php
echo "<html><head><meta charset='utf-8'>";
echo "<script type='text/javascript' src='scripts/bootstrap.js'></script>";
echo "<script type='text/javascript' src='scripts/jquery_latest.js'></script>";
echo "<link rel='stylesheet' type='text/css' href='css/style.css'>";
echo "<link rel='stylesheet' type='text/css' href='css/bootstrap_combined.css'>";
//echo "<script type='text/javascript' src='scripts/gallery.js'> - other gallery
echo "<script type='text/javascript' src='scripts/bootstrapgallery.js'></script>";
echo" <title>Gallery Display</title></head><body>";
echo "<div id ='wrapper'>";
echo "<header>";
echo "<h1>The Ultimate Gallery Compiler</h1>";
echo "<div id='menu'><a class='head' href='index.html'>Upload Photo</a> <a class='head' href='gallery.html'>Browse Gallery</a></div>";
echo "</header>";
echo "<div id='content'>";
echo "<h2>Browse Gallery</h2>";
$subfolder = $_POST["category"];
$text = $_POST["category_text"];
if ($subfolder == "0"){
echo("Please <a href='gallery.html'>go back</a> and select a category");
echo "</div><br><br>";
echo "<footer>";
echo "<p class='foot'>© Copyright 2015-2016 MMA2 Rachel Gallen, Ysabel Pheifer and Rebecca Merrigan.</p>";
echo "</footer>";
echo "</div>";
exit();
}
$countcontents = file_get_contents("categories.txt"); //read file to get count
$countarray = explode('*', $countcontents); //get count of each category into an array
//get array using array_push
$folders = glob('images/*');
$categories= array();
foreach($folders as $folder) {
$folder = pathinfo($folder);
array_push($categories, $folder["filename"]);
}
//output title according to if the gallery has images in it or not
for($i=0; $i< count($countarray); $i++)
{
if ($subfolder == $categories[$i]){
if (intval($countarray[$i]) == 0) {
echo "<h3>No images have been uploaded for the " .$text. " category yet</h3>";
}
else
{
echo "<h3>Here are the images for the " .$text. " category</h3>";
echo "<p>There are ".$countarray[$i]." photos in this category</p><br>";
}
}
}
$folder = "images/".$subfolder."/";
// Open the appropriate subfolder, and display its contents.
if ($dir = opendir($folder)) {
$images = array();
while (false !== ($file = readdir($dir))) {
if ($file != "." && $file != "..") {
$images[] = $file;
}
}
closedir($dir);
}
$count=0;
$class= '';
echo'<div id="myCarousel" class="carousel slide">';
// <!-- Carousel items -->
foreach($images as $image) {
$count++;
if ( $count == 1 ){ $class = 'active ';}
else{ $class='';}
echo'<div class="carousel-inner">';
echo"<div class='".$class."item'>";
echo "<img src='".$folder.$image. "'</img></div>";
echo '</div>';
}
//<!-- Carousel nav -->
echo'<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>';
echo'<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>';
echo '</div>';
echo '<ol class="carousel-linked-nav pagination">
<li class="active">•</li>
<li>•</li>
<li>•</li>
</ol>';
echo"<br><br>";
echo "<p> </p><a href='gallery.html'>Reselect</a>";
echo "</div>";
echo "<footer>
<p class='foot'>© Copyright 2015-2016 MMA2 Rachel Gallen, Ysabel Pheifer and Rebecca Merrigan.</p>
</footer>";
echo "</div>";
echo "</body></html>";
?>
As you can see bootstrap (min) is included, along with the combined css and jquery 11.3. the bootstrapgallery.js is a function that i took from a fiddle
// invoke the carousel
$('#myCarousel').carousel({
interval: 3000
});
/* SLIDE ON CLICK */
$('.carousel-linked-nav > li > a').click(function() {
// grab href, remove pound sign, convert to number
var item = Number($(this).attr('href').substring(1));
// slide to number -1 (account for zero indexing)
$('#myCarousel').carousel(item - 1);
// remove current active class
$('.carousel-linked-nav .active').removeClass('active');
// add active class to just clicked on item
$(this).parent().addClass('active');
// don't follow the link
return false;
});
/* AUTOPLAY NAV HIGHLIGHT */
// bind 'slid' function
$('#myCarousel').bind('slide', function() {
// remove active class
$('.carousel-linked-nav .active').removeClass('active');
// get index of currently active item
var idx = $('#myCarousel .item.active').index();
// select currently active item and add active class
$('.carousel-linked-nav li:eq(' + idx + ')').addClass('active');
});
I have the link being tested out here. The first image shows but neither the arrows or the buttons work. I feel like i must be missing something blatantly obvious, but the code is the same as my fiddle so i don't understand!
Help! Thanks :) And Merry Christmas hohoho
EDIT:
this is my source:
<!doctype html>
<html><head><meta charset='utf-8'>
<script type='text/javascript' src='scripts/jquery_latest.js'></script>
<script type='text/javascript' src='scripts/bootstrap.js'></script>
<link rel='stylesheet' type='text/css' href='css/style.css'>
<link rel='stylesheet' type='text/css' href='css/bootstrap_combined.css'>
<!---echo "<script type='text/javascript' src='scripts/gallery.js'>-->
<script type='text/javascript' src='scripts/bootstrapgallery.js'></script>
<title>Gallery Display</title></head><body>
<div id ='wrapper'>
<header>
<h1>The Ultimate Gallery Compiler</h1>
<div id='menu'><a class='head' href='index.html'>Upload Photo</a> <a class='head' href='gallery.html'>Browse Gallery</a></div>"</header>
<div id='content'>
<h2>Browse Gallery</h2>
<h3>Here are the images for the Fashion/Lifestyle category</h3><p>There are 9 photos in this category</p><br><div id="myCarousel" class="carousel slide"><div class="carousel-inner"><div class='active item'><img src='images/1/dress3_20151216.jpg'</img></div></div><div class="carousel-inner"><div class='item'><img src='images/1/after_20151212.jpg'</img></div></div><div class="carousel-inner"><div class='item'><img src='images/1/partydress_20151212.jpg'</img></div></div><div class="carousel-inner"><div class='item'><img src='images/1/blacksatinwithvintagediamanteencrustedclasp_20151219.jpg'</img></div></div><div class="carousel-inner"><div class='item'><img src='images/1/shoesforwedding_20151216.jpg'</img></div></div><div class="carousel-inner"><div class='item'><img src='images/1/pyjamas_20151215.jpg'</img></div></div><div class="carousel-inner"><div class='item'><img src='images/1/interviewdress_20151212.jpg'</img></div></div><div class="carousel-inner"><div class='item'><img src='images/1/blacksatinwithvintagediamanteencrustedclasp_20151221.jpg'</img></div></div><div class="carousel-inner"><div class='item'><img src='images/1/jacket_20151213.jpg'</img></div></div><a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a><a class="carousel-control right" href="#myCarousel" data-slide="next">›</a></div><ol class="carousel-linked-nav pagination">
<li class="active">•</li>
<li>•</li>
<li>•</li>
</ol><br><br><p> </p><a href='gallery.html'>Reselect</a></div><footer>
<p class='foot'>© Copyright 2015-2016 MMA2 Rachel Gallen, Ysabel Pheifer and Rebecca Merrigan.</p>
</footer></div></body></html>
Your HTML structure should look like below, but you have a carousel-inner class wrapping each item in your HTML loop, which should not be.
Should be like this:
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<img src="" alt=""/>
</div>
<div class="item">
<img src="" alt=""/>
</div>
</div>
</div>
Yours looks like this:
<div id="myCarousel" class="carousel slide">
<div class="item">
<img src="" <="" img="">
</div>
<div class="carousel-inner">
<div class="item">
<img src="" <="" img="">
</div>
</div>
<div class="carousel-inner">
<div class="item">
<img src="" <="" img="">
</div>
</div>
</div>
I am having a problem with my website.
The padding-top of div class="row slide-content" is acting weird.
For some slides it is about 223px and for other slides it uses a different padding.
PHP
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="home-slider">
<ul class="slides">
<?php while ($slide =& $loop->next()): ?>
<li>
<div class="row slide-content">
<div class="large-10 large-centered columns text-center">
<?php if ( ! empty( $slide->button ) ) : ?>
<div class="SLIDERLOGO">
<?php echo $slide->button; ?>
</div><?php endif; ?><?php if ( ! empty( $slide->ititle ) || ! empty( $slide->caption ) ) : ?>
<div class="hero-title">
<div class="large-3 columns nopad border-bottom">
</div>
<div class="large-6 columns text-center">
<?php if ( ! empty( $slide->ititle ) ) : ?>
<h4 class="text-white alt-h">
<?php echo $slide->ititle; ?></h4><?php endif; ?>
</div><?php if ( empty( $slide->ititle ) ) : ?>
<div class="large-6 columns nopad border-bottom">
</div><?php endif; ?>
<div class="large-3 columns nopad border-bottom">
</div>
<h1 class="text-white">
<?php echo $slide->caption; ?></h1>
</div><!--end of hero title-->
<?php endif; ?>
</div>
</div><img alt="<?php echo esc_attr( $slide->alt ); ?>" class=
"slider-bg" src=
"%3C?php%20echo%20esc_attr(%20$slide-%3Eimg%20);%20?%3E">
</li><?php endwhile; ?>
</ul>
</div><!--end of Home slider-->
</body>
</html>
The logo is inserted here
<?php echo $slide->button; ?>
Both logo's are exactly the same dimensions
JS
// Append HTML 's as CSS Background for slides
// also center the content of the slide
jQuery('.home-slider .slides li').each(function () {
var imgSrc = jQuery(this).children('.slider-bg').attr('src');
jQuery(this).css('background', 'url("' + imgSrc + '")');
jQuery(this).children('.slider-bg').remove();
var slideHeight = jQuery(this).height();
var contentHeight = jQuery(this).children('.slide-content').height();
var padTop = (slideHeight / 2) - (contentHeight / 2);
jQuery(this).children('.slide-content').css('padding-top', padTop);
});
It wont happen every time but sometimes the padding between the logo and the top of the page changes. I hope i have explained wel enough :)
Many thanks!
Daan
try running your code on $(window).load(function() { }); instead of at the bottom of the page, chances are if you are working with larger slide images that not all of them are fully loaded before your calculations are applying.
The new code would look like this...
jQuery(window.load(function() {
jQuery('.home-slider .slides li').each(function () {
var imgSrc = jQuery(this).children('.slider-bg').attr('src');
jQuery(this).css('background', 'url("' + imgSrc + '")');
jQuery(this).children('.slider-bg').remove();
var slideHeight = jQuery(this).height();
var contentHeight = jQuery(this).children('.slide-content').height();
var padTop = (slideHeight / 2) - (contentHeight / 2);
jQuery(this).children('.slide-content').css('padding-top', padTop);
});
});