cycle2 slideshow with jquery caption is out of place

StackOverflow https://stackoverflow.com/questions/21531200

Domanda

Hi i am trying to make the images resize to 75% of the actual height and width. The problem is that when i do it the container seems to stay 100% of the size. I'll show it:

code:

<!-- some pretty fonts for this demo page - not required for the slider -->
<link
    href='http://fonts.googleapis.com/css?family=Source+Code+Pro|Open+Sans:300'
    rel='stylesheet' type='text/css'>

<!-- load jQuery and the plugin -->
<script
    src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
<style>
/* Demo CSS - You do not need this css in your own slider */
html {
    height: 100%;
}

body {
    font-family: "Open Sans", helvetica, arial;
    height: 100%;
}

h2 {
    font-size: 48px;
    margin-top: 8px;
    margin-bottom: 8px;
    color: #2778ec;
}

#container {
    width: 100%;
    height: 100%;
    padding-bottom: 80px;
}
</style>
</head>

<body>

    <div id="container">

        <h2>Photos of the day</h2>
        <div style='float: left'>
            <form name='form1' action='FriendsListServlet' method='get'>
                <input type='submit' name='btnsalvar' value='Photos of the day'>
            </form>
        </div>
        <div>
            <form name='form2' action='MapServlet' method='get'>
                <input type='submit' name='btnsalvar' value='My day in map'>
            </form>
        </div>
        <!--  data-cycle-pause-on-hover="true"-->
        <div class="cycle-slideshow"
            data-cycle-caption-plugin=caption2
            data-cycle-auto-height=container>
            <div class="cycle-overlay"></div>
            <c:forEach items="${photosName}" var="photo">
                <img src='images/<c:out value="${photo}" />'
                    title="Automatically generated caption" data-cycle-title="Spring"
                    data-cycle-desc="Sonnenberg Gardens" width="75%" height="75%" />
            </c:forEach>
        </div>
    </div>
</body>

The result is the following:

http://tinypic.com/r/25ptm4i/8

this is the result i am trying to produce.

http://tinypic.com/r/11tq7eo/8

È stato utile?

Soluzione

Case this might happen to someone i found the solution, the solution was some .css and .js that i didnt imported. They are the following.

<script
    src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.caption2.js"></script>

<link rel=stylesheet href="http://fonts.googleapis.com/css?family=Acme">
<link rel=stylesheet href="http://jquery.malsup.com/cycle2/site.css">
<link rel=stylesheet href="http://jquery.malsup.com/cycle2/demo/demo-slideshow.css">
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top