[Resolved] pan and zoom effect in the sliders

Hi Alexia

Thanks for your question 🙂

The challenge with mobile devices is that videos aren’t able to autoplay due to battery life concerns. The inability to auto-play is a function of the mobile browser. It is possible to auto pan using jQuery. I looked around now and couldn’t seem to find a WordPress plugin to help. You can see jQuery auto pan being used here: http://www.itbrigadeinc.com/post/2013/02/05/Auto-Panning-with-jQuery.aspx. It works on my phone. I think this is something I can help you implement. I won’t be sure till I’ve done it though. I’ll reply tomorrow once I’ve given it a go and will let you know if I have a solution.

Sure 🙂

I looked hard for a plugin or simple jQuery solution but couldn’t find one. I’ve used the exact script used IT Brigade in the link I sent as the demo. Here is how I’ve implemented their solution:

1. If you don’t have a Custom CSS plugin installed then go to Plugins > Add New and install Simple Custom CSS. Also, install a plugin called Code Snippets.
2. Test with a demo page. Go to Pages > Add New, create a test page.
3. Insert the following in the Text tab of the page:

<div class="wrap" style="display: block;">
<img id="panimg" src="http://localhost/ultra/wp-content/uploads/2016/04/breaking-wave.jpeg" />
</div>

http://localhost/ultra/wp-content/uploads/2016/04/breaking-wave.jpeg the image URL must be replaced with your image URL. You can get the image URL by going to Media, locating the image and then grabbing the URL from the right column meta box.

4. Go to Appearance > Custom CSS and insert:

/* Pan Image */
.wrap {
    display: none;
    position: relative;
    height: 500px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    padding: 0;
    width: 100%;
}

#panimg {
    display: none;
    left: 0;
    position: absolute;
    top: 0;
    max-width: none;
}

The 500px value above must be changed to the height of your image.

5. Go to Snippets > Add New, create a new snippet, call Image Panning, add the following to the snippet body:

function ultra_image_pan() {
  if ( is_page( 701 )  ) { ?>
	<script type="text/javascript">
	  jQuery( function($){
		$(window).load(function ()
		{
			// auto panning
			PanPicture = function () {
				$(".wrap").show();
				$(".wrap").children("#panimg").show();
				$(".wrap").children("#panimg").animate({
					"left": "800px"
				}, 20000);
				$(".wrap").children("#panimg").animate({
					"left": "0px"
				}, 20000);
				// refill the animation queue after animations done
				$(".wrap").children("#panimg").queue(

				function () {
					PanPicture();
					$(".wrap").children("#panimg").dequeue();
				});
			};
			//setTimeout( function() { PanPicture(); }, 1000 );
			//$(".wrap").children("#panimg").load(function() { PanPicture(); });
			PanPicture();
		});
	  });
	</script>
  <?php }
}
add_action( 'wp_head', 'ultra_image_pan' );

In this line if ( is_page( 701 ) ) { ?> 701 must be replaced with your test page ID. When editing your test page, the ID is in the URL, it’s the only number there.

The 800px value found in the snippets must be changed, you can work out the value it needs to be as follows:

Your image width / 2 + half the width of the container. In the case of Ultra full width it would be:

Your image width / 2 + 775

If you can get the demo working locally we’ll need to make other changes to the sizes used in the custom CSS and the left pan used in the script.

I want the text should slide from right having a background color and that text end should tough right end and that should be of some fixed width always.

Is there any way to start slide from bottom to top? One more thing, how to give dynamic slider time for each slider?

Please help