A noobie tries to use jQuery with an existing javascript plugin

jeremy58 · April 27, 2021, 7:36am

This is a learning project for me, and I know virtually nothing about js/jquery, so bear with me…

I am trying to build a gallery layout for a Wordpress site.

I am using an existing Jquery gallery/slider called royalSlider.

I know how to create the out-of-the-box sliders easy enough, but I want to get beyond that by adding other functions that interface with the slider.

The documentation tells me I can work with the slider by specific functions, but I can’t make heads or tails of how to do it.

For example the the block below is from the documentation. What I want to do is create a button that will “enterFullscreen()” and “goTo(1)”. EnterFullscreen opens the slider in fullscreen mode and goTo(1) would go to the first slide.

Assuming that the slider is already on the DOM, what would the markup look like to create the button?

// All public methods can be called jQuery-way - $(".royalSlider").royalSlider('startAutoPlay');

// Another example: $(".royalSlider").royalSlider('goTo', 3);

var slider = $(".royalSlider").data('royalSlider');

slider.goTo(3); // go to slide with id

slider.next();  // next slide

slider.prev();  // prev slide

slider.enterFullscreen();

Martyr2 · April 27, 2021, 6:45pm

First you would create a standard HTML button. Give it an ID to make things easy for jQuery to find it.

<button type="button" id="go-full-screen">Go Full Screen</button>

Next we need to tell jQuery to find this button (inside the document ready function) and attach a click listener event to the button.

// Inside of $(document).ready and to be safe after your var slider definition...
$('#go-full-screen').click(function() {
    // When the button is clicked, find our slider and call enterFullScreen()
    slider.enterFullScreen();
    slider.goTo(1);
});

The idea here is that when a click is detected on your button with the ID of go-full-screen it will use your slider variable to then call the enterFullscreen() function on it. This assumes of course that you have defined the slider variable as you show above and thus should be in the global scope.

Another option is to locate the slider again and use that. It is a little less efficient, but should work all the same…

// Inside of $(document).ready...
$('#go-full-screen').click(function() {
    let slider = $(".royalSlider").data('royalSlider');
    // When the button is clicked, find our slider and call enterFullScreen()
    slider.enterFullScreen();
    slider.goTo(1);
});

Give that a try and see what happens. If that doesn’t seem to work, show us your full code along with the error message you see in your developer tools console window.

jeremy58 · April 27, 2021, 8:37pm

I’m certainly doing something wrong, but here is my code. I’ve made a template_part for this theme, so all of the slider-related stuff is in there. The slider itself functions as anticipated.

<?php $featured_thumb_id = get_post_meta($post->ID, '_thumbnail_id', true);
      $featured_thumb_data = get_post_meta($featured_thumb_id,'_wp_attachment_metadata', true);
      $featured_thumb_url = wp_get_original_image_url( $featured_thumb_id );
      $featured_thumb_height = $featured_thumb_data["height"];
      $featured_thumb_width = $featured_thumb_data["width"];
      $featured_thumb_alt = $featured_thumb_data["foo"];
      $featured_thumb_caption = wp_get_attachment_caption($featured_thumb_id);
	var_dump();

	$gallery_images = get_field('post_gallery');
	
?>

<?php
wp_enqueue_style('royalslider-styles', get_stylesheet_directory_uri() . '/assets/plugins/royalslider/royalslider.css');
    wp_enqueue_style('royalslider-skin', get_stylesheet_directory_uri() . '/assets/plugins/royalslider/rs-default.css');
    wp_enqueue_script('royalslider-script', get_stylesheet_directory_uri() . '/assets/plugins/royalslider/jquery.royalslider.min.js', array('jquery'), '1.0.6', false);
    wp_enqueue_script( 'rs-thumbs-init2', get_stylesheet_directory_uri() . '/parts/gallery/init/post-default-thumbs-init.js', array('jquery'), '1.0.6', true );


?>

<?php if ($gallery_images) {
	echo "I have a gallery";} ?>

<style>
#post-default-slider {width:100%}
#post-default-slider {height:400px}
</style>




<div id="post-default-slider" class="royalSlider rsDefault">
    <?php echo "<a class=\"rsImg\" data-rsw=\"$featured_thumb_width\" data-rsh=\"$featured_thumb_height\"  data-rsBigImg=\"$featured_thumb_url\" href=\"$featured_thumb_url\"> <img width=\"96\" height=\"72\" class=\"rsTmb\" src=\"$featured_thumb_url\" />
	<div class=\"overlay\"> <h4>I am overlay</h4> </div>
		</a>"; ?>
</div>

 <script>
jQuery(document).ready(function($) {

  $('#post-default-slider').royalSlider({
    fullscreen: {
      enabled: true,
      nativeFS: true
    },
    controlNavigation: <?php if ($gallery_images){echo "'thumbnails'";} else {echo "'none'";}?>,
    autoScaleSlider: true, 
    autoScaleSliderWidth: 600,     
    autoScaleSliderHeight: 480,
    loop: false,
    imageScaleMode: 'fit-if-smaller',
    navigateByClick: true,
    numImagesToPreload:2,
    arrowsNav:true,
    arrowsNavAutoHide: true,
    arrowsNavHideOnTouch: true,
    keyboardNavEnabled: true,
    fadeinLoadedSlide: true,
    globalCaption: true,
    globalCaptionInside: false,
    thumbs: {
      appendSpan: true,
      firstMargin: true,
      paddingBottom: 4
    }
  });

    $('.rsContainer').on('touchmove touchend', function(){});

});


$('#go-full-screen').click(function() {
slider.enterFullScreen();
slider.goTo(1);
});
        
</script>

<button type="button" id="go-full-screen">
<?php echo"<img src=\"$featured_thumb_url\">"; ?>
</button>

JQMIGRATE: Migrate is installed, version 3.3.2
VM480:6327 Uncaught TypeError: $ is not a function
    at VM480:6327
(anonymous) @ VM480:6327
VM481:6340 Uncaught SyntaxError: Unexpected token ')'
goMap.min.js?ver=2.1.0.13:1 Leaflet | OpenStreetMap API Loaded :)
goMap.min.js?ver=2.1.0.13:1 osm
goMap.min.js?ver=2.1.0.13:1 osm
post-default-thumbs-init.js?ver=1.0.6:1 Uncaught SyntaxError: Unexpected token '<'
5[Violation] Added non-passive event listener to a scroll-blocking <some> event. Consider marking event handler as 'passive' to make the page more responsive. See <URL>
comment-reply.min.js?ver=5.7.1:2 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
d @ comment-reply.min.js?ver=5.7.1:2
t @ comment-reply.min.js?ver=5.7.1:2
jquery.min.js?ver=3.5.1:2 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
add @ jquery.min.js?ver=3.5.1:2
s.event.add @ jquery-migrate.min.js?ver=3.3.2:2
(anonymous) @ jquery.min.js?ver=3.5.1:2
each @ jquery.min.js?ver=3.5.1:2
each @ jquery.min.js?ver=3.5.1:2
ke @ jquery.min.js?ver=3.5.1:2
on @ jquery.min.js?ver=3.5.1:2
(anonymous) @ (index):6322
e @ jquery.min.js?ver=3.5.1:2
t @ jquery.min.js?ver=3.5.1:2
comment-reply.min.js?ver=5.7.1:2 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
d @ comment-reply.min.js?ver=5.7.1:2
o @ comment-reply.min.js?ver=5.7.1:2
comment-reply.min.js?ver=5.7.1:2 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
d @ comment-reply.min.js?ver=5.7.1:2
o @ comment-reply.min.js?ver=5.7.1:2
comment-reply.min.js?ver=5.7.1:2 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
d @ comment-reply.min.js?ver=5.7.1:2
o @ comment-reply.min.js?ver=5.7.1:2
rs-default.css:1 GET http://dev.coosguide.com/dev2/wp-content/themes/Newspaper-child/assets/plugins/royalslider/rs-default.png 404 (Not Found)
rs-default.css:1 GET http://dev.coosguide.com/dev2/wp-content/themes/Newspaper-child/assets/plugins/preloaders/preloader-white.gif 404 (Not Found)
[Violation] Forced reflow while executing JavaScript took 55ms

system · July 28, 2021, 3:38am

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.