[Resolved] pan and zoom effect in the sliders

  • Author
    Posts
  • #3415

    Alexia Jolliot
    Participant

    Hi Andrew,

    Is it possible to add pan and effect on the slide of the main page slider ?
    So far the only way i found is to play a movie instead of adding slides… but then the slide doesn’t play on mobile devices, instead it shows as a movie and once you click on play, it plays the movie on a full window, so you aren’t on the main page anymore… not the effect i am looking for.

    Do you have a solution?

    here is the website if you want to have a look : http://www.bhutanconcierge.com

    Many thanks
    Alex

    #3418

    Andrew Misplon
    Keymaster

    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.

    #3419

    Alexia Jolliot
    Participant

    Hi Andrew,

    Thanks for your quick reply. I’m amazed by the support provided on a free service 🙂

    I had a look at the the website and the jQuery. This can probably work out and give the effect I’m looking for.

    Looking forward to hearing from you
    Cheers,
    Alexia

    #3420

    Andrew Misplon
    Keymaster

    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.

    #3421

    Andrew Misplon
    Keymaster

    In closing. This is a relatively complex custom development solution. The mobile video solution you have right now isn’t that bad. The video opens up, you can view it and you’re still at the same URL, you aren’t taken to another page. It’s worth thinking about keeping it vs attempting the above. Up to you of course.

    #3425

    Alexia Jolliot
    Participant

    Hi Andrew,

    Thanks a lot.
    This is all relatively new for me. it’s my first website, and I’m still trying to sort my way out despite all the great widgets, plug ins and the quite organized interface. I think i will stay with the current option or go back to a normal slide.
    Coding is unknown to me 🙁 and kind of scary.
    Thanks a lot for the support !

    #3426

    Andrew Misplon
    Keymaster

    Thanks for your feedback. I think your current solution is a good compromise. Ideally, there would be a plugin for this effect. Sorry I couldn’t find one.

    If you have any further questions of any sort, please, let me know.

    All the best with your site 🙂

    #4791

    ananyaojha
    Participant

    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.

    #4792

    Andrew Misplon
    Keymaster

    Hi ananyaojha

    Thanks for reaching out. Unfortunately, I don’t know of a free plugin that provides this functionality. That isn’t to say there isn’t one out there, I just haven’t used one yet.

    If you’d like any further assistance, please, open a new topic using the form at the bottom of this page: https://purothemes.com/support/forum/ultra-theme/. Alternatively, if you’re using Ultra Premium, feel free to reach out to us via email.

    Thanks 🙂

    #4799

    ananyaojha
    Participant

    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

    • This reply was modified 5 years, 9 months ago by ananyaojha.
    #4801

    Andrew Misplon
    Keymaster

    Unfortunately, the code above isn’t mine, it’s a script we used. The source is here. If you require developer assistance for this code I can recommend trying Codeable.io or Upwork.com. Unfortunately, we’re not able to provide development assistance for a task like this. Sorry.

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

Scroll to top