Skip to content

Instantly share code, notes, and snippets.

@albell

albell/window resizing and autoheight in cycle2

Created March 9, 2013 00:35
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save albell/5121754 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save albell/5121754 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. baloneysandwiches created this gist Mar 9, 2013.
    69 changes: 69 additions & 0 deletions window resizing and autoheight in cycle2
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,69 @@
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset='utf-8' />
    <meta name="viewport" content="width=device-width">
    <meta name='description' content='' />
    <title></title>

    <style>
    .cycle-slideshow {
    outline: 2px dashed red;
    width: 800px;
    max-width: 100%;
    }
    .cycle-slideshow > div {width: 100%}

    img {
    display: block;
    height: auto !important;
    max-width: 100%;
    }

    #prev, #next {
    float: left;
    margin: 20px;
    outline: 1px dashed blue;
    width: 100px;
    }

    #kittycounter {float: left}

    .disabled {opacity: .2}
    </style>
    </head>
    <body>

    <div class="cycle-slideshow"
    data-cycle-allow-wrap="false"
    data-slides=">div"
    data-cycle-fx="scrollHorz"
    data-paused="true"
    data-cycle-auto-height="calc"
    data-cycle-prev="#prev"
    data-cycle-next="#next"
    data-cycle-caption="#kittycounter"
    data-cycle-caption-template="Image {{slideNum}} of {{slideCount}}"
    >
    <div>
    <img src="http://placekitten.com/g/800/800" />
    <p>Slide 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div>
    <img src="http://placekitten.com/g/800/100" />
    <p>Slide 2. Quisque ultrices, elit nec aliquet lacinia, enim diam pellentesque lectus, eu bibendum arcu sem et mauris. Ut eget nibh non magna scelerisque eleifend. Aenean quis sapien a tellus elementum ultrices. Praesent sagittis placerat ipsum, a tempor magna porta ut. Duis id urna quis velit interdum vestibulum non eget eros. Donec sed augue non libero faucibus vulputate. Phasellus quis tellus lorem. Quisque ultrices, elit nec aliquet lacinia, enim diam pellentesque lectus, eu bibendum arcu sem et mauris. Ut eget nibh non magna scelerisque eleifend. Aenean quis sapien a tellus elementum ultrices. Praesent sagittis placerat ipsum, a tempor magna porta ut. Duis id urna quis velit interdum vestibulum non eget eros. Donec sed augue non libero faucibus vulputate. Phasellus quis tellus lorem.</p>
    </div>
    </div>

    <div class="slideshow-controls">
    <a href=# id="prev">Previous</a>
    <p id="kittycounter"></p>
    <a href=# id="next">Next</a>
    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js"><\/script>')</script>
    <script src="http://malsup.github.com/jquery.cycle2.js"></script>

    </body>
    </html>