StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POSlider with visible slides from sides and costum animation
primarykey
Id
17676978
data
AcceptedAnswerId
0
AnswerCount
2
ClosedDate
CommentCount
4
CommunityOwnedDate
CreationDate
2013-07-16T12:50:25.813
FavoriteCount
0
LastActivityDate
2013-07-17T09:58:04.117
LastEditDate
2013-07-17T09:58:04.117
LastEditorUserId
1122741
OwnerUserId
1122741
ParentId
0
PostTypeId
1
Score
3
ViewCount
700
LastEditorDisplayName
text
Body
<h1>1. slider animation shema n1</h1> <p><img src="https://i.stack.imgur.com/Z9n6x.png" alt="enter image description here"></p> <h1>2. slider animation shema n2</h1> <p><img src="https://i.stack.imgur.com/Cld3D.png" alt="enter image description here"> Imagine that there are two sliders one behind another. Both moves synchroniously, to the same side. The first one moves with inertion, to strech, and the bottom one (the main one) starts moving from start.</p> <h1>3. This is how it should look like in browser</h1> <p><img src="https://i.stack.imgur.com/8TXHP.png" alt="enter image description here"></p> <h1>4. This is what I have achieved so far</h1> <p>HTML</p> <pre><code><div id="ghostCarousel"> <div id="content"> <div> <img src="http://dqsvds7jo3ykg.cloudfront.net/files/2011/12/Post-Apocalyptic1-820x330.jpg" /> </div> <div> <img src="http://dqsvds7jo3ykg.cloudfront.net/files/2011/12/Post-Apocalyptic1-820x330.jpg" /> </div> <div> <img src="http://dqsvds7jo3ykg.cloudfront.net/files/2011/12/Post-Apocalyptic1-820x330.jpg" /> </div> <div> <img src="http://dqsvds7jo3ykg.cloudfront.net/files/2011/12/Post-Apocalyptic1-820x330.jpg" /> </div> <div> <img src="http://dqsvds7jo3ykg.cloudfront.net/files/2011/12/Post-Apocalyptic1-820x330.jpg" /> </div> </div> <div class="bg-block"></div> <div id="gcNav"> <a href="#" class="left"></a> <a href="#" class="right"></a> </div> </code></pre> <p></p> <p>CSS</p> <pre><code>html, body { padding:0; margin:0; } #ghostCarousel { overflow: hidden; /*position: relative;*/ } #ghostCarousel #content > div { width: 820px; height: 330px; float: left; position: relative; /* nuemus padding reikia padding ploti nustatyt i 0*/ padding-left:15px; padding-right: 15px; /*z-index: 99;*/ } #ghostCarousel #content > div > img { filter: url("data:image/svg+xml;utf8,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'&gt;&lt;filter id=\'grayscale\'&gt;&lt;feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/&gt;&lt;/filter&gt;&lt;/svg&gt;#grayscale"); /* Firefox 10+, Firefox on Android */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */ /*z-index: 99;*/ } #content .active { z-index: 9999; } #content .active img { /*background: #FFF;*/ filter: url("data:image/svg+xml;utf8,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'&gt;&lt;filter id=\'grayscale\'&gt;&lt;feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/&gt;&lt;/filter&gt;&lt;/svg&gt;#grayscale") !important; -webkit-filter: grayscale(0%) !important; } .bg-block { width:880px; height: 500px; position: absolute; top: 0px; left: 50%; margin-left: -440px; background: #FFF; /*z-index: 100;*/ } #gcNav { width: 960px; position: absolute; top: 135px; left: 50%; /* move the left edge to the center … */ margin-left: -480px; /* … and move it to the left half the box’ width. */ /*z-index: 9999;*/ } #gcNav a { display: block; width: 40px; height: 80px; background: url("http://bisonai.infoaleja.lt/wp-content/themes/bisonai/img/controls.png") no-repeat; } #gcNav .left { background-position: 0 0; float: left; } #gcNav .right { background-position: -40px 0; float: right; } </code></pre> <p>JS</p> <pre><code> $(function () { var content = '#ghostCarousel #content'; var section = content + ' > div'; var v = $(window).width(); var w = $(section).width(); var c; var itemuKiekis = $('#content div').length; var vidurinioNr; var paddingPlotis = 30; var itemuSarasas = []; function ghostCarousel() { for (var i = 1; i <= itemuKiekis; i++) { itemuSarasas[i] = $('#content div:nth-child(' + (i) + ')').html(); $('#content h3').hide(); $('#content p').hide(); //console.log(itemuSarasas[i]); } if (itemuKiekis % 2 === 0) { c = ((w + paddingPlotis) * $(section).length - v + w) / 2; vidurinioNr = itemuKiekis / 2 + 1; var index = 1; for (var i = vidurinioNr; i <= itemuKiekis; i++) { $('#content div:nth-child(' + i + ')').html(itemuSarasas[index]); $('#content div:nth-child(' + index + ')').html(itemuSarasas[i]); console.log("i:" + i + " index:" + index); index++; } for (var i = 1; i <= vidurinioNr; i++) { $('#content div:nth-child(' + i + ')').html(itemuSarasas[index]); console.log("i:" + i + " index:" + index); index++; } } else { c = ((w + paddingPlotis) * $(section).length - v) / 2; vidurinioNr = (itemuKiekis + 1) / 2; var index = 1; for (var i = vidurinioNr; i <= itemuKiekis; i++) { $('#content div:nth-child(' + i + ')').html(itemuSarasas[index]); //console.log("i:" + i); index++; } for (var i = 1; i < vidurinioNr; i++) { $('#content div:nth-child(' + i + ')').html(itemuSarasas[index]); console.log("i:" + i); index++; } } $('#content div:nth-child(' + vidurinioNr + ')').attr("class", "active"); console.log("v:" + v); console.log("w:" + w); console.log("c:" + c); console.log("itemuKiekis:" + itemuKiekis); console.log("vidurinioNr:" + vidurinioNr); //TODO: keisti ilgi kad tilptu visos ft, jei netelpa $(content).width((w + paddingPlotis * 2) * $(section).length); $(content).css('margin-left', -c); $('#gcNav a.left').click(function (e) { e.preventDefault(); if ($(content).is(':animated')) return false; $('#content .active h3').fadeOut(); $('#content .active p').fadeOut(); $('#content div:nth-child(' + (vidurinioNr + 1) + ')').attr("class", "active"); $('#content div:nth-child(' + (vidurinioNr) + ')').removeClass("active"); $(content).animate({ marginLeft: '-=' + w }, 500, function () { var first = $(section).eq(0); $(section).eq(0).remove(); $(this).animate({ marginLeft: '+=' + w }, 0); $(this).append(first); $('#content .active h3').fadeIn(); $('#content .active p').fadeIn(); }); }); $('#gcNav a.right').click(function (e) { e.preventDefault(); if ($(content).is(':animated')) return false; $('#content .active h3').fadeOut(); $('#content .active p').fadeOut(); $('#content div:nth-child(' + (vidurinioNr - 1) + ')').attr("class", "active"); $('#content div:nth-child(' + (vidurinioNr) + ')').removeClass("active"); $(content).animate({ marginLeft: '+=' + w }, 500, function () { var end = $(section).length - 1; var last = $(section).eq(end); $(section).eq(end).remove(); $(this).animate({ marginLeft: '-=' + w }, 0); $(this).prepend(last); //$('#content div:nth-child(' + vidurinioNr + ')').attr("class","active"); $('#content .active h3').fadeIn(); $('#content .active p').fadeIn(); }); }); } ghostCarousel(); $(window).resize(function () { v = $(window).width(); w = $(section).width(); c = ((w + paddingPlotis) * $(section).length - v) / 2; $(content).css('margin-left', -c); }); }); </code></pre> <p>working jsfiddle example - <a href="http://jsfiddle.net/V9RyW/" rel="nofollow noreferrer">http://jsfiddle.net/V9RyW/</a></p> <p>If you check fiddle, you will see that pictures make straight line and goes one by one when clicked. Also, the incoming photo gets 'active' class.</p> <p>How to modify the code, that 1/3 of 3rd and 5th slide in n1 scheme would be hidden behind 4?</p> <p>Also, how to achieve animation like in shema n2?</p>
Tags
<html><css><slider>
Title
Slider with visible slides from sides and costum animation
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USRokas
UserOwnerUserId
1. USRokas
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
2. PO
  singulars
  PostTypePostTypeId
  PTAnswer
VotesPostIdCreationDate
1. VO
  singulars
  PostPostId
  POSlider with visible slides from sides and costum animation
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTDownMod
2. VO
  singulars
  PostPostId
  POSlider with visible slides from sides and costum animation
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
3. VO
  singulars
  PostPostId
  POSlider with visible slides from sides and costum animation
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
CommentsPostId

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.