Ajax Updates |
- Page Peel with Jquery Plugin
- jQuery Flick
- Agile Carousel v2.0
- Milkbox using Mootools
- FancyBox using Jquery
| Posted: 15 Sep 2009 10:23 AM PDT A jquery plugin to implement a page peel effect to place ads on your site. If you haven’t seen it by now, check out the upper right corner of this page, or check out the new page peel in the bottom left of this box! Now, the one contained inside of the box has its limitations. You have to have enough room to display the full page out (this one’s set up as 500×500). Also, I’ve set the bottom padding of this box to 105px so I don’t cover any content. You could also indent the content 105px or just cover your content. Whatever floats your boat. I guess I should show you a bit of code on how to accomplish this… here it goes. Adding to Your Website To add this you’ll need jQuery and jQuery.pagePeel.js, then add the following to the head of your document:
The area in bold is the DOM element you want place the page peel inside of. If you want to add it to the body, place it right under the opening '' tag. If you want it added inside a div, place it right after the opening ' ' tag. Be sure that div's position is set to relative in you CSS. Options options, options, options... That's the main thing I think about when building plugins, and this one is filled with them. They go inside the open/close brackets The ones displayed are the default options. SET WIDTH / HEIGHT OF SMALL AD smallWidth: 120 smallHeight: 120 smallBG: 'pp-src/smallBG.png' // if you are not using flash, this is where your small ad image is located SET WIDTH / HEIGHT OF INTRO introWidth: 300 introHeight:300 SET WIDTH / HEIGHT OF BIG AD (SAME AS .SWF) bigWidth: 500 bigHeight: 500 bigBG: 'pp-src/bigBG.png' // if you are not using flash, this is where your large ad image is located bigAd: 'pp-src/bigAd.jpg' // if you are using flash, this is where your ad image is located bigSWF: 'pp-src/page-peel-big.swf' // if your flash file is in a different directory ADD LINK AND TARGET OPTIONS adLink: 'blank' // this is where you insert a URL (i.e. http://www.smple.com) || if left 'blank' no link will be applied adLinkTarget: '_blank' // this is where you specify your target (i.e. '_parent' or '_blank') SET POSITION OF YOUR AD hPosition: 'right' // can use 'left' or 'right' vPosition: 'top' // can use 'top' or 'bottom' CHOOSE WHETHER TO USE FLASH OR NOT flash: true note: Only upper-right source .fla's are included for both with or without an intro. There is also a lower-left for demonstration purposes. Feel free to edit the files to suite your needs, but remember to change the file path if you change the file name. WHETHER TO USE INTRO ANIMATION OR NOT AND WHAT FILE TO USE introAnim: false bigSWFIntro: 'pp-src/page-peel-big-intro.swf' // this is the default file location for the intro animation file note: The intro option is currently set up to only work in the upper-right hand corner, however can be changed if you edit the source .fla. Demo: http://www.smple.com/pagePeel Download: http://www.smple.com/pagePeel/pagePeel.zip Source: http://smple.com/2008/12/15/jquery-plugin-page-peel/  Related Listings:
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Posted: 15 Sep 2009 09:53 AM PDT This plugin adds Apple iPod/iPhone (firmware 2.0+) flick/scroll functionality to jQuery. Use built in Touch methods including ontouchstart, ontouchend and ontouchmove. Includes rubber banding if the user scrolls past the top/bottom of the scrollable region. There is also an internal division ontouchstart to place over any clickable elements. This prevents items that are in the scrollable region from being clicked while you are in mid scroll. Demo: http://www.manifestinteractive.com/iphone/flick/ Download: http://plugins.jquery.com/files/jquery.flick.js.txt Source: http://plugins.jquery.com/project/flick Related Listings:
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Posted: 15 Sep 2009 09:27 AM PDT Agile Carousel is a JQuery plugin that lets you create a carousel with flexible settings.
Demo: http://www.agilecarousel.com/examples/full_example Download: http://plugins.jquery.com/files/jquery.agile_carousel-beta.2.0.zip Source: http://plugins.jquery.com/node/4033 Related Listings:
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Posted: 14 Sep 2009 08:54 PM PDT As long as I’ll have the time to do it, I’ll try to help anyone who ask for some help with Milkbox implementation or for little customizations, but I’ll definitely favour people that make a donation (see the bottom of this page). Main features * Swf support. You can add swf links to your galleries as well as images. Use the rev attribute to tell width and height of the swf file. * AutoSize and maxHeight options. AutoSize is enabled by default; if needed, it makes photos smaller, so they’ll fit the browser window. If you want them not to be higher then a certain height, just set the maxHeight option. * AutoPlay and autoPlayDelay options. You can set them globally or on a per-gallery basis, as well as in JavaScript calls. * XML galleries. Instead of writing HTML links and let Milkbox to automatically collect them, you can write one or more galleries via XML and load them with the addGalleries() method. You can then show any file of any gallery with a single JavaScript or ActionScript (Using ExternalInterface) call, and with custom auto-play options. * Launch from JavaScript. You can use showGallery() to launch any gallery item with custom autoplay options from JavaScript and therefore, even from Flash via ExternalInterface. * Milkbox hides select and textarea tags while playing; also, there’s a option (removeTitle) that lets you decide if the browser will pop up or not his default tooltips when you hover the Milkbox links. Defaults to true. * ImageOfText option. If your lang is not eng, and don’t want to see “1 of 15″, just use this option. I’m italian, so I usually set it to ‘di’. Defaults to ‘of’. * Transitions are minimal: I like fast navigation. Anyway, you can use any of the MooTools’s Fx.Transitions effects. * Next and prev buttons are in the bottom section, near the close button. This way I think I make it more usable by not hiding anything and keeping the navigation all in one place. Also there’s a loop in the next and prev buttons: if Milkbox is showing the last image in the gallery and you click the next button, it will let you see the first image; similarly if you’re seeing the first one, the last one will be shown by clicking the prev button. And last but not least, there’s an auto-sizing border-left in the nav section, that helps to visually separate the buttons from the caption. * Keyboard navigation: • Next image: right arrow or space bar • Previous image: left arrow • Close milkbox: esc key * The close button is just a cross, no ‘close’ word: this way no language is involved. In fact, there are 3 ways to close it: click the close button; click the overlay; press the esc key. * All the graphic interface is customizable via CSS or js options. You can even download the buttons graphics (.psd and .ai) and modify them! * YUI compressed. The files you’ll find in the download section, include a lighter yui-compressed version (milkbox-yc.js) How to use Milkbox 1. Make sure that there is a XHTML DOCTYPE declaration at the very top of the page. XHTML transitional or strict are good.
* - The core library. * - The Assets plugin
5. Add a rel="milkbox" attribute to any link tag to activate the Milkbox. Optionally, add a title attribute. If you have a set of related images that you would like to group, include a group name between square brackets in the rel attribute, or separate it from the 'milkbox' word with some other character: for example, if you'd like to validate your page as xhtml 1.1, you could use a colon or an underscore. If you want to add tags inside the title property (for example a link), please use html entities and no quotes, then eventually style them with css: the relevant id is #mbDescription.
Demo: http://reghellin.com/milkbox/ Download: http://www.reghellin.com/milkbox/milkbox2.3.0.zip Source: http://reghellin.com/milkbox/ Related Listings:
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Posted: 14 Sep 2009 08:48 PM PDT FancyBox is tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page. It was built using the jQuery library. Licensed under the MIT License Features: * Adds a nice drop shadow under the zoomed item * Groups related items and adds navigation (preloades images) * Can display images, inline, ajax and iframed content * Customizable through settings and CSS * Support fancy transitions by using easing plugin How to implement First, make sure you are using valid DOCTYPE, this is required for FancyBox to look and function correctly. 1. Include nessesary JS files
Don`t forget to change image paths if CSS file is not in the same directory as images used by FancyBox
(< a href >) For images
Iframe:
Note: You may want to set hideOnContentClick to false if you display iframed or inline content and it containts clickable elements (for example - play buttons for movies, links to other pages) 4. Fire plugin using jQuery selector If you are not familiar with jQuery, please, read at least this tutorial for beginners Sample examples:
Demo: http://fancybox.net/example Download: http://code.google.com/p/fancybox/downloads/detail?name=jquery.fancybox-1.2.1.zip Source: http://fancybox.net/ Related Listings:
|
| You are subscribed to email updates from Ajax Updates To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.