Insert The Following Code Before End of - Tag.: Link Script Script Script Script Script Script

TWO.
Insert the following code before end of </head>-tag.

 <link href="css/least.min.css" rel="stylesheet" />  <script src="http://code.jquery.com/jquery-latest.js" defer="defer"></script>  <script src="js/least.min.js" defer="defer"></script>  <script src="js/jquery.lazyload.min.js" defer="defer"></script>
THREE.
Insert the following code right after the <body>-tag.
<section> <ul id="gallery"> <li id="fullPreview"></li> <li> <a href="img/full/1.jpg"></a> <img data-original="img/thumb/1.jpg" src="img/effects/white.gif" width="240" height="150" alt="Ocean" /> <div class="overLayer"></div> <div class="infoLayer"> <ul> <li> <h2> Ocean </h2> </li> <li> <p> View Picture </p> </li> </ul> </div> <div class="projectInfo"> <strong> Day, Month, Year: </strong> sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </div> </li> </ul> </section>
FOUR.
Now you need to call the plugin with your Gallery ID (default - #gallery).
$(document).ready(function(){ $('#gallery').least(); });
OPTIONS:
You can use the following default options:
'random': true/false (default to true) 'lazyload': true/false (default to true) 'scrollToGallery': true/false (default to true)
CHANGELOG:
V.1.5 (03. July 2013)
Newtest LazyLoad library (1.8.4) Newtest jQuery library (2.0.1) LazyLoad loading bugfix
V.1.4 (26. June 2013)

Added image loader
V.1.3 (19. June 2013)

Added a new option "scrollToGallery" New pictures
V.1.2 (06. June 2013)

Transformation to a jQuery Plugin by Jorge Epuan - @csslab Adding Changelog Some small Bugfixes
V.1.1 (30. April 2013)

Changing file ending from .less to .scss Smaler Download Cleanup .js and .scss files Adding ReadMe file Some small Bugfixes
DONE!
..:: Options
Default Value
Variable
Description
Va Op
tooltipWidth
200
The width in pixels that you would like the tooltip to be Whether the tooltip should sit to the left or right of the form The width in pixels that you would like the offset of the tooltip to be Whether the progress bar should be displayed or not Whether the helper text should be shown or not Set the font size of the helper text in pixels The hash color reference of the helper text The hash color reference of the progress bar background
tooltipPosition
right
left
tooltipOffset
50
showProgressBar
true
tru
showHelper
true
tru
tooltipFontSize
14
tooltipFontColor
ffffff
progressBarBackground
ffffff
Variable
Default Value
Description
Va Op
progressBarColor
6EA5E1
The hash color reference of the progress bar The padding for the tooltip in pixels Whether to animate the tooltip or not
tooltipPadding tooltipAnimate
10 true
tru
Basic Example
Loading the Scripts
FlipClock.js requires a few files to work properly. The minified source contains all the clock faces for maximum portability.
<html> <head> <link rel="stylesheet" href="/assets/css/flipclock.css"> </head> <body> <div class="your-clock"></div>
<script src="/assets/js/libs/jquery.js"></script> <script src="/assets/js/flipclock/libs/prefixfree.min.js"></script> <script src="/assets/js/flipclock/flipclock.min.js"></script> </body> </html>
Instantiating
FlipClock.js requires jQuery for DOM manipulation. It works a typical jQuery plugin, but instead of returning a jQuery object, a FlipClock object is returned.
var clock = $('.your-clock').FlipClock({ // ... your options here });
var clock = new FlipClock($('.your-clock'), { // ... your options here });
Note, both these examples would produce the example same thing. Use the syntax that works best for you.
Options
autoStart
(boolean) If this is set to false, the clock will not auto start. The default value is true.
countdown
(boolean) If this is set to true, the clock will count down instead of up. The default value is false.
callbacks
(object) An object of callback functions that are triggered at various times. For more information, view the callback documentation.
classes
(object) This is an object of CSS classes to use to append to DOM objects
clockFace
(string) This is the name of the clock that is used to build the clock display. The default value isHourlyCounter.
defaultClockFace
(string) This is the default clock face to use if the defined clock face does not exist. The default value isHourlyCounter.
Methods
The following methods all belong to the FlipClock.Factory class.
start()
This method will start the clock just call the .start() method on an FlipClock object.
clock.start(function() { // this (optional) callback will fire each time the clock flips });
stop()
This method will stop the clock just call the .start() method on an FlipClock object.
clock.stop(function() { // this (optional) callback will fire after the clock stops });
setTime()
This method will set the clock time after it has been instantiated just call the .setTime() method on an FlipClock object.
clock.setTime(3600);
setCountdown()
This method will change the clock from counting up or down.
clock.setCountdown(true);
getTime()
To get the clock time after it has been instantiated just call the .getTime() method on an FlipClock object.
var time
= clock.getTime(); // Returns the FlipClock.Time object
Callbacks
destroy
This callback is triggered when the timer is destroyed
create
This callback is triggered when the clock face is created
init
This callback is triggered when the FlipClock object is initialized
interval
This callback is triggered with each interval of the timer
start
This callback is triggered when the clock is started
stop
This callback is triggered when the clock is stopped
reset
This callback is triggered when the timer has been reset
What is Fullsize all about?

Fullsize is an attempt to get a new <IMG> attribute called fullsize into the next version of HTML. Hopefully this site will get the attention of the W3C, and they will add fullsize to HTML and make it a standard. This is an attempt to bring something truely useful to all web developers and is by no means a completely polished idea, but rather a step in the right direction. Please visit the Fullsize Google Group to add your thoughts on how you think this idea can be improved upon. Please vote for Fullsize at the bottom of this page and add your name to the list of those who support the Fullsize idea.
Update:
Many thanks to Ian Hickson for being kind enough to email back and forth with me about Fullsize being added into HTML 5. In the end he said he would not add it into HTML 5, but encouraged me to have the different browser vendors add native support for it in the actual browsers. So if any of you know anyone who works on Safari, Firefox, Opera, etc. Please let me know :)
Quixly is Digital Delivery & File Sharing, The Easy Way. Sign up now for FREE!
Ads by Yoggrt
How would Fullsize work?

There are MANY fantastic javascript/AJAX solutions out there to view a larger version of an image by displaying it as a in-page pop-up or lightbox pop-up. So many solutions in fact that it is rare to visit a website with a photo gallery that does not already utilize one of these solutions. So why not make it a standard? Why not let the browsers take care of the heavy lifting rather than us web developers via javascript? I propose adding a fullsize attribute to the <IMG> tag. By which you can references a
larger (or fullsize) version of the SRC image. Browsers could then include native support to display the fullsize image in a pop-up. Check out the video at the bottom of the page for more details. Even More Details at the Google Group Example of fullsize in action:
<img src="me.jpg" alt="Me" fullsize="me-big.jpg" />
Fullsize FAQs
Please watch the second video at the bottom of this page and visit the Fullsize Google Group for answers to your questions or concerns. - Why do would you want to add a fullsize attribute, can't you just use Javascript? The Fullsize attribute would be designed to make a common practice (image popups) a breeze to setup and use. Remember that Fullsize would only be active if the <IMG> tag has a fullsize attribute. If you do not add in the fullsize attribute, you can use your own custom javascript in it's place. - If Javascript is turned off would fullsize be broken? I am proposing that fullsize be supported natively by the browser. So if javascript is on or off... it is irrelevant. - I would not want this kind of thing controlled by the browser, because then I would have no control over how it looks. If fullsize is added to the next version of HTML, there could be CSS support for this (details here). However I do not see the NEED for the additional CSS support. If you don't like the way the browser displays it, use javascript. Though it would be nice to have the CSS support, I do not see it as necessary.
jQuery Fullsize Plug-in

Even though Fullsize is not currently in the next HTML spec (yet :), you can still get Fullsize for FREE! I created a jQuery Plug-In that does just what is described above and what you see in the video below. Since there is no fullsize attribute for the <IMG> tag yet, I am using thelongdesc attribute instead. longdesc is a completely valid image attribute and is meant to contain a URL to a description of the image. The Fullsize jQuery plug-in is super easy to use, and provides a kick start to
standardizing the way image pop-ups look and work.
Fullsize has been tested & works in: Safari, Firefox, Chrome, Opera, IE 8, IE 7, and IE 6. It works great in IE 6, but you will need to add your own transparent PNG support using your preferred method. I suggest DD BelatedPNG
Only 12kb!
The minified version of Fullsize is just 12kb! The commented version is just 16kb! After you download Fullsize, leave all the files inside the fullsize folder and reference the JS & CSS files like this and everything will work: <link href="your_path_here/fullsize/fullsize.css" media="screen" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="your_path_here/fullsize/jquery.fullsize.js"></script> To attach Fullsize to all the images on your page, all you need to do is: $("img").fullsize(); Fullsize will only attach itself to images that have a longdesc attribute on the <IMG> tag. Example: <img src="me.jpg" alt="me" longdesc="me-big.jpg" /> Fullsize can only be attached to images. Here is the list of options available to the plug-in: shadow - true or false (true by default) : Puts a drop shadow around the image when it is clicked. zoomInSpeed - number (200 by default) : Speed to zoom in the image on click. zoomOutSpeed - number (200 by default) : Speed to zoom out the image on click. fadeInSpeed - number (250 by default) : Speed to fade in the image on click. fadeOutSpeed - number (250 by default) : Speed to fade out the image on click. leftOffset - number (0 by default) : Offsets the Fullsize Popup Image to the left the number of pixels specified. topOffset - number (0 by default) : Offsets the Fullsize Popup Image from the top the number of pixels specified. iconOffset - number (8 by default) : Offsets the Fullsize Icon (top & left) by the number of pixels specified, relative to the current element. forceTitleBar - true or false (false by default) : Forces the Title Bar to be present even when the Title attribute is empty. extraTrigger - selector (null by default) : Selector of an extra Fullsize popup trigger. Adds an additional Fullsize Icon to the Selector Element. Requires parentSteps. parentSteps - number (0 by default) : Climbs up the number of parents specified starting from the current element, then looks for extraTrigger. Requires extraTrigger. destroy - true or false (false by default) : Unbinds all events to the selector, and removes all Fullsize elements from the page. start - callback function : Custom function that is run when the Fullsize Icon is clicked. stop - callback function : Custom function that is run when the Fullsize Popup is closed. Here is an example of using Fullsize with options: $(".wrapper img").fullsize({shadow: false, iconOffset: 2, extraTrigger: ".myClass", parentSteps: 2});
Here is how you would destroy the above Fullsize call: $(".wrapper img").fullsize({destroy: true});

Insert The Following Code Before End of - Tag.: Link Script Script Script Script Script Script

Caricato da

Informazioni sul documento

Descrizione originale:

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Insert The Following Code Before End of - Tag.: Link Script Script Script Script Script Script

Caricato da

Copyright:

Formati disponibili

TWO.

Insert the following code before end of </head>-tag.

V.1.4 (26. June 2013)

V.1.3 (19. June 2013)

V.1.2 (06. June 2013)

V.1.1 (30. April 2013)

<html> <head> <link rel="stylesheet" href="/assets/css/flipclock.css"> </head> <body> <div class="your-clock"></div>

<script src="/assets/js/libs/jquery.js"></script> <script src="/assets/js/flipclock/libs/prefixfree.min.js"></script> <script src="/assets/js/flipclock/flipclock.min.js"></script> </body> </html>

var clock = $('.your-clock').FlipClock({ // ... your options here });

var clock = new FlipClock($('.your-clock'), { // ... your options here });

= clock.getTime(); // Returns the FlipClock.Time object

What is Fullsize all about?

How would Fullsize work?

jQuery Fullsize Plug-in

standardizing the way image pop-ups look and work.

Potrebbero piacerti anche