more than one slideToggle in page - javascript

I have a simple code with slideToggle function that is working fine in 4 divs, it opens hidden content all at the same time in this Divs.
It changes the image when clicked, but only the first one, not the rest, how can i do it for all?
this is the code for the 4 buttons repeats equaly, it opens all, but wont change image in all:
<div class="show" style="display:none"><h1>THE TEXT TO APPEAR</h1></div>
<img id="bg" class="loadMore" src="<?php echo get_template_directory_uri(); ?>/img/masGris.svg" />
$(document).ready(function() {
$('.loadMore').click(function() {
$('.show').slideToggle('1100');
var src = $("#bg").attr('src') == "<?php echo get_template_directory_uri(); ?>/img/less.svg" ? "<?php echo get_template_directory_uri(); ?>/img/masGris.svg" : "<?php echo get_template_directory_uri(); ?>/img/less.svg";
$("#bg").attr('src', src);
return false;
});
});

Change the $("#bg") of selector with $(this) .because id is unique one.for all image try with each()
updated
$(document).ready(function() {
$('.loadMore').click(function() {
$('.show').slideToggle('1100');
$('.loadMore').each(function(){
var src = $(this).attr('src') == "<?php echo get_template_directory_uri(); ?>/img/less.svg" ? "<?php echo get_template_directory_uri(); ?>/img/masGris.svg" : "<?php echo get_template_directory_uri(); ?>/img/less.svg";
$(this).attr('src', src);
})
return false;
});
});

This only changes the icon that i clicked in. What about to change it all images, no matther with one i click? someone?

Related

How to lazy load videos with jquery or javascript

So I am trying to the load a embed video after a image(Splash-Imag) is clicked. The Delay should be 1.5 Seconds
<div id="mv-info">
<div id="content-embed" style="<?php $splash = info_movie_get_meta('fondo_player'); if(empty($splash)) { echo 'display:block;';}?>">
<div class="mplay">
<?php if (get_sub_field('type_player') == "p_iframe") {?>
<?php if($dato = get_sub_field('embed_player')) { ?>
<iframe src="<?php echo $dato; ?>" frameborder="0" allowfullscreen></iframe>
<?php }?>
</div>
Here $dato is the embed URL, Once I click the splash-image(class) in div class mvi-info the splash image goes and video pops out. But what i want to do is delay the video for 1.5 seconds or less so that it doesn't hinder my page speed.
I used this code but it doesn't seem to work
<script type="application/javascript">
$('.mvi-cover').click(function(){
var iframe = $('.mplay iframe').each(function(item){
var src= $(this).data('src');
$(this).attr("src",src);
});
$( ".splash-image" ).fadeOut(function(){
$( ".splash-image" ).remove()
});
$('#content-embed').fadeIn();
})
</script>
If anyone can help me then I will be really grateful.
You could use some jQuery objects to load the iframes without appending them to DOM. And using a timeout, you could do this 1,5 second after the page has finished loading.
Then, on a click event, change the src attribute of the iframe next to the clicked splash image (not all). Since the browser already has loaded the content, it will be instantanous.
I am pretty sure you have many iframes like this because you use a PHP loop. DO NOT use id in that kind of loop that produces HTML. It ends up in multiple time the same id. Use classes instead.
Try that to load the iframes 1.5 sec after page load:
$(document).ready(function () {
let iframes = $(".mplay iframe");
setTimeout(function () {
iframes.each(function (index) {
console.log(`Looping through iframes... #${index+1}`)
// Create a temporary jQuery object just to load
let temp = $("<iframe>")[0];
temp.src = $(this).data("src");
// Make sure the content gets loaded
temp.on("load", ()=> console.log(`The content of Iframe #${index+1} is loaded... The url was ${$(this).data("src")}`) )
});
},1500);
});
And this to handle the click events on the splash images:
$(".mvi-cover").click(function () {
let src = $(this).data("src");
$(this).attr("src", src);
let embed = $(this).next(".content-embed");
$(this).fadeOut(function () {
$(this).remove();
embed.fadeIn();
});
});
I am not 100% sure of your rendered HTML structure... But you get the idea.
Try this:
<div id="mv-info">
<?php if($splash = info_movie_get_meta('fondo_player')) {?><a title="<?php the_title(); ?>" class="thumb mvi-cover splash-image" style="background-image: url(<?php echo $splash;?>)"></a><?php }?>
<?php }?>
<div id="content-embed" style="<?php $splash = info_movie_get_meta('fondo_player'); if(empty($splash)) { echo 'display:block;';}?>">
<div class="mplay">
<?php if (get_sub_field('type_player') == "p_iframe") {?>
<?php if($dato = get_sub_field('embed_player')) { ?>
<iframe data-src="<?php echo $dato; ?>" frameborder="0" allowfullscreen></iframe>
<?php }?>
</div>
<script type="application/javascript">
$('.mvi-cover').click(function(){
var iframe = $('.mplay iframe').each(function(item){
var src= $(this).data('src');
$(this).attr("src",src);
});
$( ".splash-image" ).fadeOut(function(){
$( ".splash-image" ).remove()
});
$('#content-embed').fadeIn();
})
</script>
This code works fine for delay for one source. But not able to get it right for multiple sources.
<div class="mplay">
<?php if (get_sub_field('type_player') == "p_iframe") {?>
<?php if($dato = get_sub_field('embed_player')) { ?>
<script>
window.setTimeout(function () {
var iframe = document.getElementById('myIframe');
iframe.setAttribute('src', '<?php echo $dato;?>');
}, 1500);
</script>
<iframe id="myIframe" src="" frameborder="0" allowfullscreen></iframe>
<?php }?>

How do I trigger this hover function each time a new image has focus?

How can I hide all the images in a recordset except the image with the mouse hover on?
Images are displayed from the database and I am trying to manipulate how the images respond when a user hovers on any particular image.
Based on what I have read here on stackoverflow I came up with the following that actually works but with one limitation
On page load it works fine but once you start moving from image to image nothing happens.
I want only the active or image with hover to show while hiding the rest.
$(document).ready(function() {
$('.teamDisplay').hover(function(){
var infoFont = $(".imageDiv")
var $imgLink = $(this).children(infoFont).attr("data-imgPath");
$('.memberPicBg').css('background-image', 'url(' + $imgLink + ')');
$('.teamDisplay').addClass('imageDivOff');
$(this).addClass('imageDivOn');
}, function(){
$('.memberPicBg').css('background-image', 'url(' + $imgLink + ')');
$('.teamDisplay').addClass('imageDivOn');
$(this).addClass('imageDivOff');
});
});
I am also using css to show or hide the images but the hover function appears to work just once on page load.
How do I trigger this hover function each time a new image has focus?
This is the website with the feature I hope to replicate
UPDATE
The html code
`<div class="memberPicBg">
<?php do { ?>
<span class="teamDisplay">
<?php
// Show If File Exists (region1)
if (tNG_fileExists("../images/team/", "{members.tmemberphoto}")) {
?>
<span class="imageDiv" data-imgPath="../images/team/<?php echo $row_members['tmemberphoto']; ?>">
<span class="teamMemberNameH"><?php echo $row_members['tmember']; ?></span>
<span class="teamMemberTitleH"><?php echo $row_members['tmemberposition']; ?></span><br /><br />
<img src="../images/team/<?php echo $row_members['tmemberphoto']; ?>" alt="<?php echo my_meta_description($row_members['tmember'],6); ?>" border="0" /> </span>
<?php
// else File Exists (region1)
} else { ?>
<span class="teamMemberNameH"><?php echo $row_members['tmember']; ?></span>
<span class="teamMemberTitleH"><?php echo $row_members['tmemberposition']; ?></span>
<?php }
// EndIf File Exists (region1)
?>
</span>
<?php } while ($row_members = mysql_fetch_assoc($members)); ?>
</div>`
NB: apologising if I am not clear enough.

Button to reload the contents of a div which contains php

I have a div containing php that loads a random image from a directory. This bit works fine when i reload the page. The code:
<div id="imageArea">
<?php
$dir = 'images/assets/';
$images = scandir($dir);
$i = rand(2, sizeof($images)-1);
?>
<img src="images/assets/<?php echo $images[$i]; ?>" alt="<?php echo str_replace(array('.jpg', '.png', '.gif'), '', $images[$i]); ?>"/>
</div>
And further down the page i have another div that contains a button. I want it so that when people click this button it loads a new random image, i guess it would reload the div, but i don't want it to reload the page, is that possible? The button:
<div id="newPic">
<input type="button" value="Reload" id="Reload"/>
</div>
I have tried:
<script>
$(document).ready(function(){
$("#Reload").click(function(){
$("#imageArea").html("result reloaded successfully");
});
});
</script>
and:
$(document).ready(function(){
$("#Reload").click(function(){
$("#imageArea").html(ajax_load).load(loadUrl);
});
});
I am new to php and javascript and so i have been following other peoples instructions.
Thank you
split your php script to another file (just echo the img tag), and then use ajax to call that page.
$("#reload").click(function(){
$.ajax({
url:"demo.php",success:function(ajax_load){
$("#imageArea").html(ajax_load)
}});
});
php file
<?php
$dir = 'images/assets/';
$images = scandir($dir);
$i = rand(2, sizeof($images)-1);
?>
<img src="images/assets/<?php echo $images[$i]; ?>" alt="<?php echo str_replace(array('.jpg', '.png', '.gif'), '', $images[$i]); ?>"/>
have you tried to use ajax to update the div with the image?
here's the code
$(document).ready(function(){
$('#clickme').click(function(){
var number = 1 + Math.floor(Math.random() * 10);
$('#contentimg').attr('src','0'+number+'.jpg');
});
});
this would work given that the images are in the same folder else give the src of image accordingly

javascript lightbox2 - how to add class to the opened img?

I am having trouble with the lightbox2 plugin.
I have an image who has class on it, and I want that the class will also be added when the image opened in lightbox.
is it possible?
<a href="fileUpload/uploads/<?php echo $picture['gallery_src']; ?>" data-lightbox=<?php echo '"image-'.$picture['gallery_id'].'"' ?>>
<img src=<?php echo '"fileUpload/uploads/'.$picture['gallery_src'].'"';?> id="filter-target" style="width:600px;">
</a>
Here's a cleaned up version of your PHP. Remember to remove your duplicate IDs
echo '<a href="fileUpload/uploads/'.$picture['gallery_src'].'" data-lightbox="image-'.$picture['gallery_id'].'">';
echo '<img src="fileUpload/uploads/'.$picture['gallery_src'].'" id="filter-target" style="width:600px;">';
echo '</a>';
You can add classes and data attributes to the image being viewed by running the following code:
$('body').on('click', 'a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]', function(e) {
$('#lightbox .lb-image')
.addClass('filter-blur')
.data('pb-blur-amount', 5);
});
Here's a demo

Javascript slideshow background image go back to selected page image on hover out

On this Wordpress site: http://www.2eenheid.de/cloud/ theres a slideshow with a menu. Whenever a user hovers over the menu item the background image changes to its accompanying image. When a user clicks on an image it stays on that accompanying image. It is also supposed to change back to the accompanying image when a user hovers over a different menu item (without clicking).
It does this in a way, but it remembers the last image it was hovered on instead of the page's accompanying image.
So in short:
When a user clicks on 'cloud' it changes to its accompanying image and stays on hover out.
When a user hovers on e.g. 'Webhosting' and then 'Unit4 multivers', the background image changes back to the accompanying image of 'Webhosting' as this is the last item it remembers.
It's supposed to change back to the 'Cloud' accompanying image, because the user is on this page.
Anyone any idea what I did wrong here?
JAVASCRIPT
<script type="text/javascript">
$(function () {
var imgsrc = '';
$('ul.slideshow-menu').find('a').hover(function () {
imgsrc = $('.pikachoose').css('background-image');
var newImg = $(this).attr('src');
$('.pikachoose').stop().fadeOut('slow', function () {
$(this).css({
'background-image': 'url(' + newImg + ')'
}).fadeTo('slow', 1);
});
}, function () {
$('.pikachoose').stop().fadeOut('slow', function () {
$(this).css({
'background-image': imgsrc
}).fadeTo('slow', 1);
});
});
});
</script>
HTML
<div id="slideshow-main">
<ul class="slideshow-menu">
<li class="<?php if (is_page('supportenbeheer')) { echo "current_page_item"; }?>"><a title="Support / Beheer" href="/supportenbeheer" src="<?php bloginfo('template_directory'); ?>/images/slideshow/slideshow-4.jpg"><img src="<?php bloginfo('template_directory'); ?>/images/slideshow/slideshow-4.jpg" alt="2Eenheid"/><span>Support / Beheer</span></a></li>
<li class="<?php if (is_page('implementatie')) { echo "current_page_item"; }?>"><img src="<?php bloginfo('template_directory'); ?>/images/slideshow/slideshow-5.jpg" alt="2Eenheid"/><span>Implementatie</span></li>
<li class="<?php if (is_page('cloud')) { echo "current_page_item"; }?>"><img src="<?php bloginfo('template_directory'); ?>/images/slideshow/slideshow-11.jpg" alt="2Eenheid"/><span>Cloud</span></li>
<li class="<?php if (is_page('webhosting-en-hosting')) { echo "current_page_item"; }?>"><img src="<?php bloginfo('template_directory'); ?>/images/slideshow/slideshow-8.jpg" alt="2Eenheid"/><span>Webhosting / Hosting</span></li>
<li class="<?php if (is_page('unit4-multivers')) { echo "current_page_item"; }?>"><img src="<?php bloginfo('template_directory'); ?>/images/slideshow/slideshow-2.jpg" alt="2Eenheid"/><span>Unit4 Multivers</span></li>
</ul>
</div>
If I understand correctly I think the problem is that you want to set the value of imgsrc after a click rather than before a change due to hover.

Categories

Resources