- This topic has 10 replies, 3 voices, and was last updated 8 years, 2 months ago by Andrew Misplon.
- AuthorPosts
- April 27, 2016 at 10:56 am #3415
Alexia JolliotParticipantHi 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
AlexApril 27, 2016 at 7:08 pm #3418
Andrew MisplonKeymasterHi 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.
April 28, 2016 at 7:01 am #3419
Alexia JolliotParticipantHi 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,
AlexiaApril 28, 2016 at 4:27 pm #3420
Andrew MisplonKeymasterSure 🙂
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.
April 28, 2016 at 4:28 pm #3421
Andrew MisplonKeymasterIn 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.
April 29, 2016 at 5:58 am #3425
Alexia JolliotParticipantHi 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 !April 29, 2016 at 11:21 am #3426
Andrew MisplonKeymasterThanks 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 🙂
September 8, 2016 at 9:04 am #4791
ananyaojhaParticipantI 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.
September 8, 2016 at 10:48 am #4792
Andrew MisplonKeymasterHi 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 🙂
September 8, 2016 at 3:01 pm #4799
ananyaojhaParticipantIs there any way to start slide from bottom to top? One more thing, how to give dynamic slider time for each slider?
Please help
September 8, 2016 at 6:22 pm #4801
Andrew MisplonKeymasterUnfortunately, 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.
- AuthorPosts
You must be logged in to reply to this topic.