image carousel showing all images


Tags: jquery,html,css

Problem :

for some flipping reason my image carousel is showing all the images at once. I don't know why but I think it has something to do with my css.

#full_image {
 overflow:hidden;
 position:absolute;
}

#full_image ul li img {
 width:100%;
 max-width:100%;
 list-style: none outside none;
 position: relative;
 overflow: hidden;
}

#full_image .full_close {
 background: url('icons/zoom-on.png') no-repeat;
 top: 10px;
 cursor: pointer;
 height: 29px;
 opacity: 1;
 position: absolute;
 width: 29px;
 z-index: 999;
 right: 10px;
}

#full_image .next_big {
 background: url('icons/arrow-right.png') no-repeat;
 top: 50%;
 cursor: pointer;
 height: 29px;
 opacity: 1;
 position: absolute;
 width: 29px;
 z-index: 999;
 right: 0px;
}
#full_image .prev_big {
 background: url('icons/arrow-left.png') no-repeat;
 top: 50%;
 cursor: pointer;
 height: 29px;
 opacity: 1;
 position: absolute;
 width: 29px;
 z-index: 999;
 left: 0px;
 color: #222;
}

<div id="full_image"> 
    <ul><li><img src="'+img+'" /></a></li></ul> 
    <a href="#" class="full_close"></a>
    <a href="#" class="button next_big"></a>
    <a href="#" class="button prev_big"></a>
 </div>

How I'm loading up the images.

$.each(get_org_images, function (i, img) {
      if (i > 0){
          $('#full_image ul').append('<li><img src="' + img + '"/></li>');} });


Solution :

i dont know what you mean with, "they show at once". What do you expect them to do? Maybe some more info. would help.

but, you could do some performance stuff like:

var parent = $('#full_image').find("ul");
$.each(get_org_images, function (i, img) {
      if (i > 0){
          parent.append('<li><img src="' + img + '"/></li>');} });

Dont have to select each time the parent in the each. And $('#full_image').find("ul") is better selector then $('#full_image ul')

you can do simply that:

parent.append('<li><img style="display:none;" src="' + img + '"/></li>');} });

which .hide() would do.


    CSS Howto..

    How to slow down the last few frames in a CSS sprite animation?

    CSS border shape - how to cut off rectangle right upper corner [duplicate]

    how to add css on click and remove it when they click close button [closed]

    Nginx server (not showing changes) - Delete cache?

    how to fix a display difference between chrome and firefox for css relative position?

    How does Facebook generate the animated placeholder news items?

    How to place an icon on the first line and text on the second line?

    How to invert the anchoring inside a `
    ` to the bottom instead of the top?

    How to select a td by position of its relative th?

    how to decrease space between headings?

    in a css three column setup using the float:left how do I horizontally centre an image inside each column

    How to make multiple breaks using CSS?

    How do I make text and other items look like chalk without a specialized font using only HTML and CSS? [closed]

    How to increase the width size of JQuery UI Tooltip by its default value?

    How to apply effect just to background image and not text

    How to hide and retrieve a URL in CSS with Javascript

    CSS: how to set screen layout according to the different dimension

    How to stretch an input button to available width and center it's text using CSS padding and text-indent?

    In the ordered sequence of words: “Word1, Word2, Word3”: how to have 1 and only 1 hyperlink on “Word1” & “Word3”? Thus, skip a word in a single link?

    CakePHP: How to use PHP to dynamically use a CSS property type in an MVC framework

    How to Change Default Bootstrap Fluid Grid 12 Column Gutter Width

    How to create a circle with text coming out of it like rays [closed]

    How to resize button without cutting the text inside

    How does one override the JQuery UI styles?

    How to display scroll bar onto a html table

    Applying new css to elements with jQuery, how to add transition?

    How to send HTML to an embedded WebView without running a local webserver?

    How to add border inner side of image using CSS

    How to do a dynamic pulsating button in javascript?

    How to change color of caret when drop down button is hovered