[ad_1]
To get this product on 50 % low cost contact me on this link
This jQuery plugin is a full web page slider for navigating between internet pages. For instance, you may have your house web page on one slide, contact web page on one other, and so forth. It is responsive and works in all main browsers, together with Internet Explorer 6 ( ) and cell browsers.
As the title suggests, you possibly can put something inside a slide (different jQuery content material, movies, and what-not), and every slide will scroll to view overflow similar to any regular web page. There is nothing I do know of that can fracture the slider, and you may add an infinite quantity of slides. This is precisely what it’s good to boost your web site!
Although that is designed for full window content material, you possibly can simply as simply use this as a conventional jQuery content material slider. In truth, the pageAnimate might be higher than different sliders since it really works attractively in Internet Explorer 6!
Note: If you view the CodeCanyon preview in a cell browser, CodeCanyon’s rendering gained’t work in any respect. You want to go to http://creativewebsites.me/pageAnimate/preview to see it in motion.
Version 1.1 UPDATE
Version 1.1 comes with two new options: the flexibility to present every slide a novel URL (with using hash) and an auto advancing operate in order that the slider robotically cycles by all slides repeatedly. Both can’t be enabled on the identical time (I can’t consider anybody that might need that anyway).
If you’ve got the earlier model put in and also you replace to this model, just be sure you hardcode the ‘data-slide=”0”’ attribute into the div that has a category of .pageAnimate. Like so:
<div class="pageAnimate" data-slide="0"> </div>
Also, you will want so as to add the next class to all of the slide triggers: .pageAnimate_trigger
What if JavaScript is Disabled?
This plugin runs totally on JavaScript – however what if JavaScript is disabled? Is the slider ineffective (and meaning folks can solely see your homepage!). No, in fact not. You can add a fallback ‘href’ hyperlink to the triggers that go to a slide. So when JavaScript is disabled, this set off is not going to go to a slide within the pageAnimate, however will simply proceed within the regular approach to one other web page (which you outlined within the ‘href’).
Does the pageAnimate slider pull Content from different Web-Pages?
No, the plugin itself doesn’t pull content material from different web-pages. Although you may do this with just a few strains of Ajax or PHP code, the script itself doesn’t have that performance and every slide’s/web page’s content material have to be added manually. To pull content material out of your web-server with Ajax, simply use this code:
<script sort="text/javascript"> $("#slide_id_or_class").load("http://www.yourserver.com/yourpage.html"); </script>
(Just change #slide_id_or_class” to the CSS id or class of the pageAnimate slide that you simply need to add to)
So how do I make the Slider go to a Slide?
It couldn’t be simpler – simply add this code:
<a category="pageAnimate_trigger pageAnimate_trigger1">This textual content will go to slip 2</a>
Notice the quantity added to the tip of the category title? That little quantity defines what slide will probably be animated to. But since all the pieces in JavaScript is zero-based (bear with me right here), we have to minus 1 off the slide quantity. So for instance, if we wish the slider to go to slip #four when the textual content is clicked, we might add this class: “pageAnimate_trigger3”. If we wish the slider to go to slip #6, we might add this class: “pageAnimate_trigger5”.
As talked about above, you possibly can add a hyperlink to the anchor tag, which may solely be adopted when JavaScript is disabled. So meaning guests will nonetheless have the ability to view a cloned web page elsewhere in your web site if they’ve JavaScript disabled.
Do I’ve to Manually add a hyperlink to Every Slide?
Not in any respect – the script does all of the give you the results you want.
How do I make this into a traditional Content Slider and never a Web-Page Slider?
Easy – all you do is change a single line within the ‘settings’ of the jQuery script. You might want to have a div (or one other comparable tag) as a container for the pageAnimate slider. Simply outline that div within the script.
Are there any Problems or Bugs?
- When the browser window is zoomed in or out in IE 8, the slides don’t robotically resize to grow to be full-screen. I’ve tried for ages to discover a answer, however can’t. However, they DO resize when the precise window is dragged smaller or bigger. This is exclusive to IE 8. This shouldn’t be a massive deal since there gained’t be too many individuals zooming out and in on IE8.
- When utilizing jQuery 1.8.1, Firefox freezes when many triggers are clicked in fast succession. Works positive with jQuery 1.7.2.
- The slider’s navigation utterly fractures down whenever you zoom in on a smartphone. This might be mounted by including this code to the <head> part of your HTML doc:
<meta title="viewport" content material="width=device-width; initial-scale=1; maximum-scale=1">
- The slider’s animation may be a bit of jumpy on previous smartphones – although it’s not too evil.
[ad_2]
To get this product on 50 % low cost contact me on this link