| blob | 10614a7330e6f559fee6e9dc8f029bf4d5bfdd41 |
2 <html>
4 <head>
11 <!-- Syntax highlighting -->
15 <!-- jQuery (required) & jQuery UI (for this demo only) -->
21 <!-- Anything Slider optional plugins -->
24 <!-- Anything Slider -->
28 <!-- Ideally, add the stylesheet(s) you are going to use here,
29 otherwise they are loaded and appended to the <head> automatically and will over-ride the IE stylesheet below -->
32 <!-- AnythingSlider optional FX extension -->
35 <!-- Demos page only -->
42 </head>
44 <body>
59 </div>
65 <!-- AnythingSlider #1 -->
67 <li><img src="demos/images/slide-civil-1.jpg" alt="" title="In Soviet Russia, concrete pours you!"></li>
68 <li><img src="demos/images/slide-env-1.jpg" alt="" title="How many supervisors are there? Wrong! 5, who is taking the picture?"></li>
69 <li><img src="demos/images/slide-civil-2.jpg" alt="" title="Alas, the pylon would never make it to the hydrant, her true love."></li>
70 <li><img src="demos/images/slide-env-2.jpg" alt="" title="Take a left at the traffic circle."></li>
71 </ul>
72 <!-- END AnythingSlider #1 -->
73 <br />
77 <div>
78 <ul>
79 <li>Hover over the demo 1 slider to reveal the thumbnail navigation links - This sliding feature is part of the core AnythingSlider plugin (<code>toggleControls</code> is set to true).</li>
81 <ul>
82 <li>For this demo, the thumbnail images are premade; but with some server side scripting and modification to the <code>navigationFormatter</code> code, you should be able to create and link to your own thumbnail images.</li>
83 <li>CSS is required to override the metallic theme CSS for thumbnail images to be visible (resize and remove negative text indentation), or you can make a new theme.</li>
86 return '<img src="demos/images/th-slide-' + ['civil-1', 'env-1', 'civil-2', 'env-2'][i-1] + '.jpg">';
87 }</pre>
88 </li>
89 </ul>
90 </li>
92 <ul>
93 <li>Click on the current slider image to open a light box. Press escape or click on the (X) in the lower right corner to close it.</li>
94 <li>Additional CSS is required to modify the Colorbox plugin. The CSS expands the image to completely fill the inside the colorbox popup. Adjust as desired to keep the image proportional.</li>
95 <li>The script attaches a colorbox popup to all images inside the slider. Add a class to the images to modify this behaviour.</li>
96 <li>The colorbox popup will contain all the current slider images. In the script the name "group" is added to all images in the "rel" attribute. This can be done in the HTML to target only the images to be shown in the colorbox - then remove the <code>.attr('rel','group')</code> in the script.</li>
97 </ul>
98 </li>
100 </ul>
101 </div>
104 <div>
106 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
118 </div>
121 <div>
123 #slider1 {
124 width: 400px;
125 height: 300px;
126 list-style: none;
127 }
128 /* CSS to expand the image to fit inside colorbox */
130 /* Change metallic theme defaults to show thumbnails */
131 div.anythingControls {
132 bottom: 25px; /* thumbnail images are larger than the original bullets; move it up */
133 }
134 .anythingSlider-metallic .thumbNav a {
135 background-image: url();
136 height: 30px;
137 width: 30px;
138 border: #000 1px solid;
139 border-radius: 2px;
140 -moz-border-radius: 2px;
141 -webkit-border-radius: 2px;
142 text-indent: 0;
143 }
144 .anythingSlider-metallic .thumbNav a span {
145 visibility: visible; /* span changed to visibility hidden in v1.7.20 */
146 }
147 /* border around link (image) to show current panel */
148 .anythingSlider-metallic .thumbNav a:hover,
149 .anythingSlider-metallic .thumbNav a.cur {
150 border-color: #fff;
151 }
152 /* reposition the start/stop button */
153 .anythingSlider-metallic .start-stop {
154 margin-top: 15px;
155 }</pre>
156 <br>
163 </div>
167 $('#slider1')
168 .anythingSlider({
169 toggleControls : true,
170 theme : 'metallic',
171 navigationFormatter : function(i, panel){ // add thumbnails as navigation links
172 return '<img src="demos/images/th-slide-' + ['civil-1', 'env-1', 'civil-2', 'env-2'][i - 1] + '.jpg">';
173 }
174 })
175 // target all images inside the current slider
176 // replace with 'img.someclass' to target specific images
177 .find('.panel:not(.cloned) img') // ignore the cloned panels
178 .attr('rel','group') // add all slider images to a colorbox group
179 .colorbox({
180 width: '90%',
181 height: '90%',
182 href: function(){ return $(this).attr('src'); },
183 // use $(this).attr('title') for specific image captions
184 title: 'Press escape to close',
185 rel: 'group'
186 });
187 });</pre>
188 </div>
189 </div>
191 <br><br>
195 <!-- AnythingSlider #2 -->
198 <div>
200 <img src="demos/images/251356.jpg" alt="tomato sandwich" style="float: right; margin: 0 0 2px 10px;" />
203 <ul>
209 </ul>
210 </div>
211 </div>
212 </li>
215 <blockquote>In awe I watched the waxing moon ride across the zenith of the heavens like an ambered chariot towards the ebon void of infinite space wherein the tethered belts of Jupiter and Mars hang forever festooned in their orbital majesty. And as I looked at all this I thought... I must put a roof on this lavatory.<p>~ Les Dawson</p></blockquote>
216 </div>
217 </li>
220 </li>
223 <blockquote>Life is conversational. Web design should be the same way. On the web, you’re talking to someone you’ve probably never met – so it’s important to be clear and precise. Thus, well structured navigation and content organization goes hand in hand with having a good conversation.</blockquote>
225 </div>
226 </li>
229 </li>
230 </ul>
231 <!-- END AnythingSlider #2 -->
233 <br>
238 <div>
239 <ul>
241 <li>No additional CSS is required, unless it is used for a specific element (see the captions section).</li>
243 <ul>
244 <li>The effects are set up so that the slider element on each panel is in its default (final) position in the "inFx" definition (element positions to zero, opacity to 1, etc) and the "outFX" definitions are set the other position the element is in to achieve the animation.</li>
245 <li>The script binds to the "slide_init" (for "outFx" animation) and "slide_complete" (for "inFx" animation) anythingSlider events.</li>
246 <li>The base effects are predefined shortcut methods. I have included the custom effect equivalents to these base effects in the script examples.</li>
247 </ul>
248 </li>
250 <ul>
251 <li>Base effects are standard effects: <code>top</code>, <code>bottom</code>, <code>left</code>, <code>right</code>, <code>fade</code>, <code>expand</code>, <code>listLR</code>, <code>listRL</code>, <code>caption-Top</code>, <code>caption-Right</code>, <code>caption-Bottom</code>, <code>caption-Left</code>.</li>
254 '.selector1' : [ 'effect(s)', 'size', 'time', 'easing' ],
255 '.selector2' : [ 'effect(s)', 'size', 'time', 'easing' ]
256 });</pre>
257 'size', 'time' and 'easing' are optional, but they must remain in that order. So if you want to add an effect time, you must also set a size - <code>[ 'effect(s)', 'size', 'time' ]</code>. To add an easing, all parameters must be included.</li>
258 <li>Defaults: If 'size', 'time' or 'easing' is not defined, it will be set to its default value:<br><br>
259 <ul>
264 </ul>
265 </li>
267 <ul>
268 <li><code>top</code>, <code>bottom</code>, <code>left</code>, <code>right</code>: Default 'inFx' position is zero, 'outFx' position is based on the initial slider height and width.</li>
270 <li><code>expand</code>: Default 'inFx' sets the width to 100%, left and right positions to 0%; the 'outFx' width is set to 10%, left and right set to 50% to somewhat center the image. When changing this size option, use percentage values, but anything more than 20% the image position will noticeably be not centered.</li>
271 <li><code>listLR</code>: Default 'inFx' left position is zero; 'outFx' position will make ':odd' elements move (L)eft and ':even' elements move (R)ight the width of the slider.</li>
272 <li><code>listRL</code>: Default 'inFx' left position is zero; 'outFx' position will make ':odd' elements move (R)ight and ':even' elements move (L)eft the width of the slider.</li>
273 <li><code>caption-{direction}</code>: This effect is opposite of the others. The default 'inFx' positions the element so it is in view while the 'outFx' positions the element out of view. See demo 3 for more details.</li>
274 </ul>
275 </li>
276 <li>Combine any of these standard effects as desired (e.g. "top fade"); but of course, using 'top bottom' will not work as you expect (unless you wanted to blow up your computer ;) LOL).</li>
277 </ul>
278 </li>
280 <ul>
281 <li>Custom effects allow you to use any of the standard jQuery animation parameters (e.g. top, left, margin, padding, width, height, etc). See the examples below.</li>
283 <li>When using custom effects it is important that each element with an 'inFx' method has a matching 'outFx' method, or those elements will be abnormally positioned and/or disappear from view.</li>
284 <li>Standard setup for custom effects is as follows (there is no specific order required):<br><br>
286 inFx : {
289 },
290 // out = the animation that occurs when you slide "out" of a panel
291 // (it also occurs before the "in" animation)
292 outFx : {
294 '.selector2' : { left : '-200px' }
295 }</pre></li>
296 <li>Defaults: if 'time' or 'easing' is not defined in the custom effects code, it will be set to its default value:<br><br>
297 <ul>
301 </ul>
302 </li>
303 </ul>
304 </li>
305 </ul>
306 </div>
309 <div>
311 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
322 </div>
326 #slider2 {
327 width: 600px;
328 height: 350px;
329 list-style: none;
330 }</pre>
331 There is no change from the standard HTML setup, unless you want to add more specific classes so you can target them with effects.<br><br>
335 <img src="demos/images/251356.jpg" alt="tomato sandwich" style="float: right;
351 the heavens like an ambered chariot towards the ebon void of infinite space
352 wherein the tethered belts of Jupiter and Mars hang forever festooned in
353 their orbital majesty. And as I looked at all this I thought... I must put
358 <img class="expand" src="demos/images/slide-tele-1.jpg" alt="">
365 Thus, well structured navigation and content organization goes hand in hand
373 <img class="fade" src="demos/images/slide-tele-2.jpg" alt="">
376 </div>
380 $('#slider2') // Demo 2 code, using FX base effects
381 .anythingSlider({
382 resizeContents : false,
383 navigationFormatter : function(i, panel){
385 }
386 })
387 .anythingSliderFx({
388 // base FX definitions
389 // '.selector' : [ 'effect(s)', 'size', 'time', 'easing' ]
390 // 'size', 'time' and 'easing' are optional parameters, but must be kept in order if added
395 '.textSlide img,.fade' : [ 'fade' ],
396 '.textSlide li' : [ 'listLR' ]
397 });
398 });</pre>
399 * Note: Each definition should end with a comma except for the last - see examples above.
400 </div>
404 $('#slider2') // Demo 2 code, using FX full control
405 .anythingSlider({
406 resizeContents : false,
407 navigationFormatter : function(i, panel){
409 }
410 })
411 .anythingSliderFx({
412 // base FX definitions can be mixed and matched in here too.
413 '.fade' : [ 'fade' ],
416 // inFx = the animation that occurs when you slide "in" to a panel
417 inFx : {
423 },
424 // out = the animation that occurs when you slide "out" of a panel
425 // (it also occurs before the "in" animation)
426 outFx : {
434 }
435 });
436 });</pre>
437 * Note: Each definition should end with a comma except for the last - see examples above.
438 </div>
439 </div>
441 <br><br>
444 <!-- AnythingSlider #3 -->
447 <!-- Note this caption is before the image, all others it is after -->
450 </li>
453 <div class="caption-right">How many supervisors are there? Wrong! 5, who is taking the picture?</div>
454 </li>
457 <div class="caption-bottom">Alas, the pylon would never make it to the hydrant, her true love.</div>
458 </li>
462 </li>
463 </ul>
464 <!-- END AnythingSlider #3 -->
466 <br>
471 <div>
472 <ul>
474 <ul>
475 <li>The image needs to be set to 100% height and width because AnythingSlider will only automatically expand solitary objects; but here we have a caption!</li>
476 <li>Note the caption widths & heights include the padding, so for example the top & bottom caption height is set to 30px instead of 50px to include the 10px padding... same goes for the height of all the captions.</li>
477 <li>If you are using the close button script, make sure you use the full width and/or height (include padding) as well.</li>
478 </ul>
479 </li>
480 <li>In the HTML, note that the top caption comes before the image; whereas the bottom, left and right caption HTML comes after.</li>
482 <ul>
484 <ul>
485 <li>This code will reveal a caption when hovering over a slider panel, and hide on mouse out.</li>
486 <li>There is a lot of extra code, for captions in multiple positions, so ideally remove the unused portions to maximize the efficiency of the code.</li>
488 </ul>
489 </li>
491 <ul>
493 <li>Code examples are included below to show and reveal captions using base and custom FX. These code examples reveal the caption when the panel comes into view and hide it as it scrolls out of view.</li>
494 <li>A short additional script adds a close button (x) to each caption to allow closing the caption while on a specific panel. CSS to position the button is needed and included.</li>
495 </ul>
496 </li>
497 <li>The script needs to hide the caption when out of view (especially for right and left captions) otherwise they interfere with other panels of the slider.</li>
498 </ul>
499 </li>
500 </ul>
501 </div>
504 <div>
506 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
517 </div>
521 #slider3 {
522 width: 500px;
523 height: 400px;
524 list-style: none;
525 }
526 /* images with caption */
527 #slider3 img {
528 width: 100%;
529 height: 100%;
530 }
531 /* position the panels so the captions appear correctly */
532 #slider3 .panel { position: relative; }
533 /* captions */
534 #slider3 .caption-top, #slider3 .caption-right,
535 #slider3 .caption-bottom, #slider3 .caption-left {
536 background: #000;
537 color: #fff;
538 padding: 10px;
539 margin: 0;
540 position: relative;
541 z-index: 10;
542 opacity: .8;
543 filter: alpha(opacity=80);
544 }
545 /* Top caption - padding is included in the width (480px here, 500px in the script), same for height */
546 #slider3 .caption-top {
547 left: 0;
548 top: 0;
549 width: 480px;
550 height: 30px;
551 }
552 /* Right caption - padding is included in the width (130px here, 150px in the script), same for height */
553 #slider3 .caption-right {
554 right: 0;
555 bottom: 0;
556 width: 130px;
557 height: 180px;
558 }
559 /* Bottom caption - padding is included in the width (480px here, 500px in the script), same for height */
560 #slider3 .caption-bottom {
561 left: 0;
562 bottom: 0;
563 width: 480px;
564 height: 30px;
565 }
566 /* Left caption - padding is included in the width (130px here, 150px in the script), same for height */
567 #slider3 .caption-left {
568 left: 0;
569 bottom: 0;
570 width: 130px;
571 height: 180px;
572 }
573 /* Caption close button */
574 .caption-top .close, .caption-right .close,
575 .caption-bottom .close, .caption-left .close {
576 font-size: 80%;
577 cursor: pointer;
578 float: right;
579 display: inline-block;
580 }</pre>
581 </div>
588 In Soviet Russia, concrete pours you!
595 How many supervisors are there? Wrong! 5, who is taking the picture?
601 Alas, the pylon would never make it to the hydrant, her true love.
607 Take a left at the traffic circle.
611 </div>
615 $('#slider3')
616 .anythingSlider()
617 /* this code will make the caption appear when you hover over the panel
618 remove the extra statements if you don't have captions in that location */
619 .find('.panel')
620 .find('div[class*=caption]').css({ position: 'absolute' }).end()
621 .hover(function(){ showCaptions( $(this) ) }, function(){ hideCaptions( $(this) ); });
623 showCaptions = function(el){
624 var $this = el;
625 if ($this.find('.caption-top').length) {
626 $this.find('.caption-top')
627 .show()
629 }
630 if ($this.find('.caption-right').length) {
631 $this.find('.caption-right')
632 .show()
634 }
635 if ($this.find('.caption-bottom').length) {
636 $this.find('.caption-bottom')
637 .show()
639 }
640 if ($this.find('.caption-left').length) {
641 $this.find('.caption-left')
642 .show()
644 }
645 };
646 hideCaptions = function(el){
647 var $this = el;
648 if ($this.find('.caption-top').length) {
649 $this.find('.caption-top')
650 .stop()
652 $this.find('.caption-top').hide(); });
653 }
654 if ($this.find('.caption-right').length) {
655 $this.find('.caption-right')
656 .stop()
658 $this.find('.caption-right').hide(); });
659 }
660 if ($this.find('.caption-bottom').length) {
661 $this.find('.caption-bottom')
662 .stop()
664 $this.find('.caption-bottom').hide(); });
665 }
666 if ($this.find('.caption-left').length) {
667 $this.find('.caption-left')
668 .stop()
670 $this.find('.caption-left').hide(); });
671 }
672 };
674 // hide all captions initially
675 hideCaptions( $('#slider3 .panel') );
676 });</pre>
677 </div>
681 $('#slider3')
682 .anythingSlider()
683 .anythingSliderFx({
684 // '.selector' : [ 'caption', 'distance/size', 'time', 'easing' ]
685 // 'distance/size', 'time' and 'easing' are optional parameters
686 '.caption-top' : [ 'caption-Top', '50px' ],
688 '.caption-bottom' : [ 'caption-Bottom', '50px' ],
690 })
691 /* add a close button (x) to the caption */
692 .find('div[class*=caption]')
693 .css({ position: 'absolute' })
695 .find('.close').click(function(){
696 var cap = $(this).parent(),
697 ani = { bottom : -50 }; // bottom
698 if (cap.is('.caption-top')) { ani = { top: -50 }; }
699 if (cap.is('.caption-left')) { ani = { left: -150 }; }
700 if (cap.is('.caption-right')) { ani = { right: -150 }; }
701 cap.animate(ani, 400, function(){ cap.hide(); } );
702 });
703 });</pre>
704 </div>
708 $('#slider3')
709 .anythingSlider()
710 /* this "custom" code is the equivalent of the base caption functions */
711 .anythingSliderFx({
712 inFx: {
717 },
718 outFx: {
723 }
724 })
725 /* add a close button (x) to the caption */
726 .find('div[class*=caption]')
727 .css({ position: 'absolute' })
729 .find('.close').click(function(){
730 var cap = $(this).parent(),
731 ani = { bottom : -50 }; // bottom
732 if (cap.is('.caption-top')) { ani = { top: -50 }; }
733 if (cap.is('.caption-left')) { ani = { left: -150 }; }
734 if (cap.is('.caption-right')) { ani = { right: -150 }; }
735 cap.animate(ani, 400, function(){ cap.hide(); } );
736 });
737 });</pre>
738 </div>
740 </div>
742 </div>
744 </body>
746 </html>