|
|
| Line 5: |
Line 5: |
| | {{Team:Amsterdam/js-image-slider.css}} | | {{Team:Amsterdam/js-image-slider.css}} |
| | <html> | | <html> |
| - | <script type="text/javascript" src="https://2012.igem.org/Template:Team:Amsterdam/js-image-slider.js?action=raw" > </script>
| + | <script type="text/javascript" src="https://2012.igem.org/Template:Team:Amsterdam/js-image-slider.js?action=raw" > </script> |
| | </html> | | </html> |
| | <div id="content-area"> | | <div id="content-area"> |
| Line 26: |
Line 26: |
| | <img src="https://static.igem.org/mediawiki/2012/d/d7/Amsterdam_Slide-1.jpg" /> | | <img src="https://static.igem.org/mediawiki/2012/d/d7/Amsterdam_Slide-1.jpg" /> |
| | </div> | | </div> |
| - | <div id="htmlcaption" style="display: none;">
| |
| - | <em>HTML</em> caption. Link to <a href="http://www.google.com/">Google</a>.
| |
| - | </div>
| |
| - | </div>
| |
| - |
| |
| - | <div class="div2">
| |
| - | <ul>
| |
| - | <li>Copy source code and paste it to your own page. All source codes/files are inside the <b>demo1.html</b> file and the "<b>\themes\1\</b>" folder</li>
| |
| - | <li>You can choose from 17 transitional effects via the <b>sliderOptions</b> in the js-image-slider.js file.
| |
| - | Visit <a href="http://www.menucool.com/slider/javascript-image-slider-demo1" target="_blank">Online Demo 1</a> to see how each effect looks and how to customize</li>
| |
| - | <li><b>Navigation Bullets</b>: a built-in control that does not need any HTML markup. It will be generated automatically by the JavaScript.
| |
| - | <p>The CSS class selector <span class="green">.navBulletsWrapper</span> can be used to change its positon and style.</p>
| |
| - | <p>If you don't want it, just hide it via CSS: <span class="green cn">div.navBulletsWrapper {display:none;}</span></p>
| |
| - | </li>
| |
| - | <li><b>HTML Caption: </b>Captions are set through each slide image's <span class="cn">alt</span> attribute. If the caption contains HTML content,
| |
| - | you can put the content inside a DIV or SPAN element(usually styled as <span class="cn">display:none</span>),
| |
| - | and set the <span class="cn">alt</span> as "#(the content container's id)". For example: <span class="cn">alt="#caption4"</span></li>
| |
| - | <li><b>Free to use</b> when advanced features (integrated thumbnails, video support) are not in use.
| |
| - | </li>
| |
| - | <li>Other demos (demo 2 - 6) are using advanced features. They will not work on production server without a valid license.</li>
| |
| - | </ul>
| |
| | </div> | | </div> |
| | </body> | | </body> |
"
