Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

Multiple jQuery click events for Bootstrap 3 Carousel Items

Set up a Bootstrap 3 carousel here: http://test.lt11.com/about/inside/

Each slide potentially contains both an image and a video. If both a video and image are present, the image is displayed first and the video is hidden. On top of the image is a "View Video" button that once clicked, the image fades away and the video is revealed. I'm pulling this off with the following jQuery code:

$(document).ready(function(){

$(".play").click(function(){ $(".post_video").toggleClass("post_video_visible"); $(".play").toggleClass("hidden"); }); });

The issue I am having is that when one of the "View Video" buttons are clicked on any slide for any video, the image and button fades away on all slides rather than just that single slide. Here is the relevant code for my carousel:

if ( $img != '' and $video_embed !='' ) { 
                echo '<div class="post_header_img_wrapper">';
                echo '<div class="post_header_img">';
                echo '<img class="stretch" src="'; ?><?php echo $img; ?><?php echo '">';
                echo '<div class="play-video-wrap">';
                echo '<button type="button" class="play btn btn-default">View Video</button>';
                echo '</div>'; //end .play-video-wrap
                echo '</div>'; //end .post_header_img
                echo '</div>'; //end .post_header_img_wrapper
                echo '<div class="post_video_wrapper'; ?><?php if ( $cinemascope == 'on' ) { echo ' cinemascope'; } ?><?php echo '">';
                echo '<div class="post_video">';
                echo $video_embed;
                echo '</div>'; //end .post_video
                echo '</div>'; //end .post_video_wrapper
                }

Is there any way to set this up so each button only triggers the event for its respective content? Over my head! Thanks for the help!

User Gravatar

bigchokeslam

Posted Jun 11 2014 15:37 UTC

$25


  • Assigned To nightbook2333
  • Solved
  • javascript
    jquery
    php
  • 3661 Views

5 Replies


Your issue is that your click event is selecting every instance of .post_video and .play and toggling the classes. You need to specify that you really only mean the one. Theres not enough info here to be sure what that would look like.

One solution, depending on your setup it may or maynot work, would be the following:

In your click event, rather than

$(".post_video") and $('.play')

use

$(this).closest('.post_video').toggleClass('post_video_visible') 

and

$(this).closest('.play').toggleClass('hidden')

respectively.

You may also look at http://php.net/manual/en/language.types.string.php -> Heredoc for better ways of dumping html out of PHP.

User Gravatar

graham-p-heath

Posted Jun 11 2014 15:55 UTC

You can also target them directly by setting an id or a rel. Might be faster than a find.

User Gravatar

a53mp

Posted Jun 11 2014 15:58 UTC

You can take advantage of the jQuery parent() function to properly target the associated video or closest() and find() functions should also work:

Using parent():

$(document).ready(function(){
   $(".play").click(function(){
      $(this).toggleClass("hidden");
      $(this).parent().parent().parent().parent().find('.post_video').toggleClass('post_video_visible');
   }); 
});

Using closest() and find():

$(document).ready(function(){
   $(".play").click(function(){
      $(this).toggleClass("hidden");
      $(this).closest('.item-inner').find('.post_video').toggleClass('post_video_visible');
   }); 
});

Hope that helps, Cheers

User Gravatar

nightbook2333

Posted Jun 11 2014 16:19 UTC

Solution

This didn't solve your task? Get your own custom solution.

Hey, basically all buttons are hiding because the code says so:). In the line where you say:

$('.play').click(...)

you tell JQuery to listen for click events on all elements that have CSS clas 'play'. Then inside the callback there is:

$(".play").toggleClass("hidden");

Which for the same reason as above applies the 'hidden' class to all elements with class 'play' thus buttons disappear.

All you need to do... Your 2 lines of code inside the .click callback shoud change to this 2 lines of code and all will work:

$('.play').click(function(e) {
    $(this).toggleClass("hidden");
    $(this).parents('.item-inner').find('.post_video').toggleClass('post_video_visible');
});

Here is a working example plunked for testing you can also play with.

Another thing is noticed when inspecting the code is that there is a javascript code inside your html which in general is not a good thing. It blocks the loading of the page and is is messy for maintaining. You should consider extracting all '...' code parts from the templates/pages files and put them inside a xxxx.js file and load it via the build in wordpress functions: wp_register_script(...) and wp_enqueue_script(...)

Best luck with your project!

User Gravatar

ColorfullyMe

Posted Jun 11 2014 22:11 UTC

Awesome guys! Thank you so much!

User Gravatar

bigchokeslam

Posted Jun 12 2014 8:04 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions