Databases
StackOverflow2013
Postsdbo
POContinuously fade a list of thumbnails on top of each other w/ Jquery (only showing 4 at all times?)
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POContinuously fade a list of thumbnails on top of each other w/ Jquery (only showing 4 at all times?)
    primarykey
    data
    text
    <p>I'm not exactly sure how to tackle this one. I've checked out the jQuery "Cycle" plugin, but haven't seen any exmaples of what I really need. </p> <p>How would you achieve fading in a list of thumbnails from the HTML (maybe something like: </p> <pre><code>&lt;ul id="container"&gt; &lt;li class="thumbnail"&gt; &lt;a href="www.link1.com"&gt; &lt;img src="1.jpg"/&gt;&lt;/a&gt; &lt;/li&gt; &lt;li class="thumbnail"&gt; &lt;a href="www.link2.com"&gt; &lt;img src="2.jpg"/&gt;&lt;/a&gt; &lt;/li&gt; &lt;li class="thumbnail"&gt; &lt;a href="www.link3.com"&gt; &lt;img src="3.jpg"/&gt;&lt;/a&gt; &lt;/li&gt; &lt;li class="thumbnail"&gt; &lt;a href="www.link4.com"&gt; &lt;img src="4.jpg"/&gt;&lt;/a&gt; &lt;/li&gt; &lt;li class="thumbnail"&gt; &lt;a href="www.link5.com"&gt; &lt;img src="5.jpg"/&gt;&lt;/a&gt; &lt;/li&gt; ...more &lt;/ul&gt; </code></pre> <p>I've created a sample .GIF to explain what i'm trying to do: <img src="https://i.stack.imgur.com/EnjtB.gif" alt="enter image description here"></p> <p>-There are a total of 4 boxes showing at all times</p> <p>-Jquery will pull the next image on the list, and fade it into one of the 4 boxes (random box every time). (image will fade in over the last image in the box). </p> <p>-This should only happen if there are more than 4 images inside the list. (stay static if we only have 4)</p> <p>-Would like to have the ability to add more images via HTML, not inside the JS...</p> <p>----UPDATE------ Kalle seems to have the correct solution, the only thing missing is the ability to control how many visible thumbnails you see at all times. </p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USanimuson
    1. USJoe
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POContinuously fade a list of thumbnails on top of each other w/ Jquery (only showing 4 at all times?)
      1. USJoe
      1. VTBountyStart
    2. VO
      singulars
      1. POContinuously fade a list of thumbnails on top of each other w/ Jquery (only showing 4 at all times?)
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POContinuously fade a list of thumbnails on top of each other w/ Jquery (only showing 4 at all times?)
      1. USsandeep
      1. VTFavorite
    1. COI added some code to Kalle's solution. He did all the work, so perhaps you can give that bounty to him. http://jsfiddle.net/JDHKn/4/
      singulars
      1. POContinuously fade a list of thumbnails on top of each other w/ Jquery (only showing 4 at all times?)
      1. USskabbes
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload