Home / Premium Pro Plugins / pageAnimate Web-Page Slider

pageAnimate Web-Page Slider

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)


This jQuery plugin is a full web page slider for navigating between net pages. For instance, you could possibly have your house web page on one slide, contact web page on one other, and so forth. It’s and works in all main browsers, together with Web Explorer 6 ( :o ) and cell browsers.

Because 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’s nothing I do know of that can break the slider, and you may add an infinite quantity of slides. That is precisely what it’s worthwhile to boost your web site!

Though that is designed for full window content material, you possibly can simply as simply use this as a conventional jQuery content material slider. Actually, the pageAnimate might be higher than different sliders since it really works fantastically in Web Explorer 6!

Be aware: When you view the CodeCanyon preview in a cell browser, CodeCanyon’s rendering received’t work in any respect. It’s essential go to http://creativewebsites.me/pageAnimate/preview to see it in motion.

Model 1.1 UPDATE

Model 1.1 comes with two new options: the flexibility to provide every slide a novel URL (with the usage of hash) and an auto advancing perform in order that the slider mechanically cycles via all slides constantly. Each can’t be enabled on the identical time (I can’t consider anybody that will need that anyway).

When you have the earlier model put in and also you replace to this model, just remember to hardcode the ‘data-slide=”zero”’ attribute into the div that has a category of .pageAnimate. Like so:

<div class="pageAnimate" data-slide="zero">  </div>

Additionally, you have to 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 which means individuals can solely see your homepage!). No, after all not. You possibly can add a fallback ‘href’ hyperlink to the triggers that go to a slide. So when JavaScript is disabled, this set off won’t go to a slide within the pageAnimate, however will simply proceed within the regular strategy to one other web page (which you outlined within the ‘href’).

Does the pageAnimate slider pull Content material from different Internet-Pages?

No, the plugin itself doesn’t pull content material from different web-pages. Though you could possibly 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 drag content material out of your web-server with Ajax, simply use this code:

<script sort="textual content/javascript">

(Simply 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 article is going to go to slip 2</a>

Discover the quantity added to the top of the category title? That little quantity defines what slide shall be animated to. However 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_triggerthree”. 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 might solely be adopted when JavaScript is disabled. So which means guests will nonetheless be capable of view a cloned web page elsewhere in your website if they’ve JavaScript disabled.

Under no circumstances – the script does all of the be just right for you.

How do I make this into a traditional Content material Slider and never a Internet-Web page Slider?

Straightforward – all you do is change a single line within the ‘settings’ of the jQuery script. You have to to have a div (or one other related tag) as a container for the pageAnimate slider. Merely outline that div within the script.

Are there any Issues or Bugs?

  1. When the browser window is zoomed in or out in IE eight, the slides don’t mechanically resize to change into full-screen. I’ve tried for ages to discover a answer, however can’t. Nonetheless, they DO resize when the precise window is dragged smaller or bigger. That is distinctive to IE eight. This shouldn’t be a giant deal since there received’t be too many individuals zooming out and in on IE8.
  2. When utilizing jQuery 1.eight.1, Firefox freezes when many triggers are clicked in fast succession. Works nice with jQuery 1.7.2.
  3. The slider’s navigation fully breaks down once you zoom in on a smartphone. This may 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">
  4. The slider’s animation could be slightly jumpy on previous smartphones – although it’s not too dangerous.


Check Also


Double Colors

DOWNLOAD It’s countless recreation. You want faucet for rotate blocks. Contact similar colours! Watch video ...


Love Calculator

DOWNLOAD Love calculator is a enjoyable software the place buddies and can calculate the share ...