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.
