ساخت اسلاید شو-کمک فوری

[samett]

سلام
من می خوام برای وبلاگم یک اسلاید شو داشته باشم که محصولاتم رو معرفی کنم. میخوام چندین عکس کنار هم باشن نه اینکه یکی یکی حرکت کنند
مثل این سایت.
http://pap.blog.ir/ (http://pap.blog.ir)

مثلا از راست به چب چهارتا چهارتا یا 3تا 3تا حرکت کنند. من کد نویسی بلد نیستم. آیا کسی می تونه کد اماده ای شبیه به همین رو که قابل ویرایش(رنگ- اندازه و..) باشه رو برام اینجا قرار بده.
مثل همین عکس

131306

[omid0000]

این نرم افزار رو سرچ کن
Amazing Slider

[samett]

سلام
چه کمکی میکنه؟ من کد می خوام که سریع بالا بیاد.
منم قبلا از این نوع نرم افزارها استفاده کردم. ولی هیچ کدی آخر بهت نمیده که بتونی برای وبلاگ قرار بدی.

[CsharpNevisi]

http://www.ijquery.ir/category/slideshow/

[samett]

سلام
به سایتی که گفتین رفتم ولی هیچ کدوم از کدها کار نمیکنند.
و فقط خود کدها توی صفحه وبلاگ نمایش داده میشند بجای اینکه عکسهایی که لودکردم و ادرسشون روگذاشتم نشون بده.
یعنی واقعا نمیشه چنین اسلایدری توی وبلاگ گذاشت و کسی نمیدونه؟

[CsharpNevisi]

اونا یه ادرس اسکریپت و یه سی اس اس دارن ... اوناروهم باید اپلود کنی و آدرس اینترنتی بدی

[samett]

این همه دردسر برای یه اسلاید شو؟
گفتم من نه کد نویس بلدم نه حوصله این همه دنگ و فنگ دارم.
کدی میخوام مثل کدهای یک ابزار. که ساده بشه توی وبلاگ گذاشت. ولی چون اونجا تنوعش محدوده و اونی که من میخواستم و در تصویر بالا گذاشتم رو نداره از اونجا نگرفتم.
اگه میشه درمورد اون کدی که گفتین بیشتر توضیح بدین و چه کار باید کنم؟ اصلا اون کد رو از کجا بگیرم؟ دو نوع کد که بیشتر نیست. چجوری و کجای وبلاگ بزارم؟
بازم ممنون برای پیگیریتون.

[CsharpNevisi]

از لینکی که دادم یه اسلایدر انتخاب کن .. من مثل یک ابزار برات اوکی میکنم بهت کد میدم بزار تو وبلاگت

[samett]

سلام من این دوتا رو می خواستم

لینک 1 (http://www.ijquery.ir/slideshow/%D8%A7%D8%B3%D9%84%D8%A7%DB%8C%D8%AF%D8%B4%D9%88-flipping)
لینک 2 (http://www.ijquery.ir/effect/1470)

[CsharpNevisi]

اولیه :

<style>@import url(http://fonts.googleapis.com/css?family=Oswald|Lobster);
body { margin-top: 7%; background: #e9eadc; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3 N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0Jv eD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZS I+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2Vu ZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZS IgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9w IG9mZnNldD0iMTklIiBzdG9wLWNvbG9yPSIjZTllYWRjIiBzdG 9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAw JSIgc3RvcC1jb2xvcj0iI2FkYWNhMiIgc3RvcC1vcGFjaXR5PS IxIi8+CiAgPC9yYWRpYWxHcmFkaWVudD4KICA8cmVjdCB4PSIt NTAiIHk9Ii01MCIgd2lkdGg9IjEwMSIgaGVpZ2h0PSIxMDEiIG ZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwv c3ZnPg==); background: -moz-radial-gradient(center, ellipse cover, #e9eadc 19%, #adaca2 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(19%,#e9eadc), color-stop(100%,#adaca2)); background: -webkit-radial-gradient(center, ellipse cover, #e9eadc 19%,#adaca2 100%); background: -o-radial-gradient(center, ellipse cover, #e9eadc 19%,#adaca2 100%); background: -ms-radial-gradient(center, ellipse cover, #e9eadc 19%,#adaca2 100%); background: radial-gradient(ellipse at center, #e9eadc 19%,#adaca2 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e9eadc', endColorstr='#adaca2',GradientType=1 ); background-repeat: no-repeat; background-attachment: fixed; font-family: Oswald, Arial; text-align: center; color: #47473c; direction:rtl}
a { color: #47473c; font-family: Lobster; font-style: normal; text-decoration: none; font-size: 15px;}
a:hover { text-decoration: underline;}
h1 { font-family: Lobster; font-weight: normal; margin: 0;}
#container {margin: 0 auto;width: 1100px;max-width: 1100px;-webkit-perspective: 2000px; -moz-perspective: 2000px; -ms-perspective: 2000px; -o-perspective: 2000px; perspective: 2000px;} #information { margin-top: 1em; display: block; color: red; font-size: 20px; } #navigation a { display: inline-block; line-height: 2.8em; margin-right: 1em; width: 40px; height: 40px; background: rgba(0,0,0,0.1); color: #fff; border-radius: 40px; -webkit-transition: .3s ease-in; -moz-transition: .3s ease-in; -ms-transition: .3s ease-in; -o-transition: .3s ease-in; transition: .3s ease-in; } #navigation a.selected, #navigation a:hover { background: rgba(0,0,0,.3); text-decoration: none; }
#portfolio-item { display: none; } #portfolio { margin: 2em 0 1em; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; }
#portfolio div { display: inline-block; position: relative; vertical-align: top; margin: 1em; width: 200px; height: 150px; box-shadow: 0px 0px 25px rgba(0,0,0,.3); } #portfolio div span { text-align: right; position: absolute; color: #fff; background: rgba(0,0,0,0.6); width: 90px; padding: 5px 15px 7px; z-index: 1; right: -10px; bottom: 10px; } .animated { -webkit-transition: .9s ease-out; -moz-transition: .9s ease-out; -ms-transition: .9s ease-out; -o-transition: .9s ease-out; transition: .9s ease-out; } .flipped-horizontal-right { -webkit-transform: rotateY(360deg); -moz-transform: rotateY(360deg); -ms-transform: rotateY(360deg); -o-transform: rotateY(360deg); transform: rotateY(360deg); } .flipped-horizontal-left { -webkit-transform: rotateY(-360deg); -moz-transform: rotateY(-360deg); -ms-transform: rotateY(-360deg); -o-transform: rotateY(-360deg); transform: rotateY(-360deg); } .flipped-vertical-top { -webkit-transform: rotateX(360deg); -moz-transform: rotateX(360deg); -ms-transform: rotateX(360deg); -o-transform: rotateX(360deg); transform: rotateX(360deg); } .flipped-vertical-bottom { -webkit-transform: rotateX(-360deg); -moz-transform: rotateX(-360deg); -ms-transform: rotateX(-360deg); -o-transform: rotateX(-360deg); transform: rotateX(-360deg); }</style> <div id="container"> <div id="portfolio"></div> <ul id="portfolio-item"> <li><img src="http://learn.wenda.ir/Pic/Post/201513013404454.jpg" alt="متن" /></li> <li><img src="http://learn.wenda.ir/Pic/Post/201513013404454.jpg" alt="متن" /></li><li><img src="http://learn.wenda.ir/Pic/Post/201513013404454.jpg" alt="متن" /></li><li><img src="http://learn.wenda.ir/Pic/Post/201513013404454.jpg" alt="متن" /></li><li><img src="http://learn.wenda.ir/Pic/Post/201513013404454.jpg" alt="متن" /></li><li><img src="http://learn.wenda.ir/Pic/Post/201513013404454.jpg" alt="متن" /></li><li><img src="http://learn.wenda.ir/Pic/Post/201513013404454.jpg" alt="متن" /></li><li><img src="http://learn.wenda.ir/Pic/Post/201513013404454.jpg" alt="متن" /></li><li><img src="http://learn.wenda.ir/Pic/Post/201513013404454.jpg" alt="متن" /></li><li><img src="http://learn.wenda.ir/Pic/Post/201513013404454.jpg" alt="متن" /></li><li><img src="http://learn.wenda.ir/Pic/Post/201513013404454.jpg" alt="متن" /></li><li><img src="http://learn.wenda.ir/Pic/Post/201513013404454.jpg" alt="متن" /></li><li><img src="http://learn.wenda.ir/Pic/Post/201513013404454.jpg" alt="متن" /></li><li><img src="http://learn.wenda.ir/Pic/Post/201513013404454.jpg" alt="متن" /></li><li><img src="http://learn.wenda.ir/Pic/Post/201513013404454.jpg" alt="متن" /></li><li><img src="http://learn.wenda.ir/Pic/Post/201513013404454.jpg" alt="متن" /></li><li><img src="http://learn.wenda.ir/Pic/Post/201513013404454.jpg" alt="متن" /></li><li><img src="http://learn.wenda.ir/Pic/Post/201513013404454.jpg" alt="متن" /></li><li><img src="http://learn.wenda.ir/Pic/Post/201513013404454.jpg" alt="متن" /></li><li><img src="http://learn.wenda.ir/Pic/Post/201513013404454.jpg" alt="متن" /></li><li><img src="http://learn.wenda.ir/Pic/Post/201513013404454.jpg" alt="متن" /></li><li><img src="http://learn.wenda.ir/Pic/Post/201513013404454.jpg" alt="متن" /></li><li><img src="http://learn.wenda.ir/Pic/Post/201513013404454.jpg" alt="متن" /></li><li><img src="http://learn.wenda.ir/Pic/Post/201513013404454.jpg" alt="متن" /></li><li><img src="http://learn.wenda.ir/Pic/Post/201513013404454.jpg" alt="متن" /></li><li><img src="http://learn.wenda.ir/Pic/Post/201513013404454.jpg" alt="متن" /></li><li><img src="http://learn.wenda.ir/Pic/Post/201513013404454.jpg" alt="متن" /></li><li><img src="http://learn.wenda.ir/Pic/Post/201513013404454.jpg" alt="متن" /></li><li><img src="http://learn.wenda.ir/Pic/Post/201513013404454.jpg" alt="متن" /></li><li><img src="http://learn.wenda.ir/Pic/Post/201513013404454.jpg" alt="متن" /></li><li><img src="http://learn.wenda.ir/Pic/Post/201513013404454.jpg" alt="متن" /></li><li><img src="http://learn.wenda.ir/Pic/Post/201513013404454.jpg" alt="متن" /></li> </ul> <nav id="navigation"> <a href="#1" class="nav selected" data-page="1">1</a> <a href="#2" class="nav" data-page="2">2</a> <a href="#3" class="nav" data-page="3">3</a> <a href="#4" class="nav" data-page="4">4</a> </nav> </div> <script> if(!Modernizr.csstransforms3d) document.getElementById('information').style.displ ay = 'block'; </script> <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> <script>$(document).ready(function() { //Initiliaze itemShow = 8; indexedItemShow = itemShow - 1 itemList = $('#portfolio-item'); itemWrapper = $('#portfolio'); rotation = ['flipped-vertical-bottom', 'flipped-vertical-top', 'flipped-horizontal-left', 'flipped-horizontal-right']; navigation = $('#navigation a');
//Populate items for( var i = 0; i < itemShow; i++ ) { itemImage = itemList.children('li:eq(' + i + ')').children('img'); itemSrc = itemImage.attr('src'); itemAlt = itemImage.attr('alt'); item = '<div style="background:url(' + itemSrc + ')"> <span>' + itemAlt + '</span></div>'; itemWrapper.append(item); } navigation.on('click', function(e) { e.preventDefault();
navigation.removeClass('selected'); $(this).addClass('selected'); page = $(this).attr('data-page');
for( var i = 0; i <= indexedItemShow; i++ ) {
random = Math.floor( Math.random() * ( 3 - 0 + 1 ) ); animation = rotation[random]; item = itemWrapper.children('div:eq(' + i + ')');
item.addClass('animated ' + animation);
window.setTimeout(function (index) { return function () {
indexReal = (page == 1) ? index : (index + (page - 1)) ; itemHost = indexReal + (indexedItemShow * (page - 1));
itemImage = itemList.children('li:eq(' + itemHost + ')').children('img'); itemSrc = itemImage.attr('src'); itemAlt = itemImage.attr('alt'); itemCurrent = itemWrapper.children('div:eq(' + index + ')');
itemCurrent.css('background', 'url(' + itemSrc + ')'); itemCurrent.children('span').text(itemAlt); }; } (i), 500); item.on('transitionend webkitTransitionEnd MSTransitionEnd oTransitionEnd', function() { $(this).removeClass(); }); } });}); </script>

[CsharpNevisi]

دومیه :

<style>/*!Pure v0.2.1Copyright 2013 Yahoo! Inc. All rights reserved.Licensed under the BSD License.https://github.com/yui/pure/blob/master/LICENSE.md*//*!normalize.css v1.1.2 | MIT License | git.io/normalizeCopyright (c) Nicolas Gallagher and Jonathan Neal*//*! normalize.css v1.1.2 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,hea der,hgroup,main,nav,section,summary{display:block} audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}html,button,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em;margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.67em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}blockquote{margin:1em 40px}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}p,pre {margin:1em 0}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';con tent:none}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure {margin:0}form{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;*overflow:visible }button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;ve rtical-align:top}table{border-collapse:collapse;border-spacing:0}.pure-button{display:inline-block;*display:inline;zoom:1;line-height:normal;white-space:nowrap;vertical-align:baseline;text-align:center;cursor:pointer;-webkit-user-drag:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.pure-button::-moz-focus-inner{padding:0;border:0}.pure-button{font-size:100%;*font-size:90%;*overflow:visible;padding:.5em 1.5em;color:#444;color:rgba(0,0,0,.8);*color:#444; border:1px solid #999;border:0 rgba(0,0,0,0);background-color:#E6E6E6;text-decoration:none;border-radius:2px;-webkit-font-smoothing:antialiased;-webkit-transition:.1s linear -webkit-box-shadow;-moz-transition:.1s linear -moz-box-shadow;-ms-transition:.1s linear box-shadow;-o-transition:.1s linear box-shadow;transition:.1s linear box-shadow}.pure-button-hover,.pure-button:hover,.pure-button:focus{filter:progid:DXImageTransform.Micros oft.gradient(startColorstr='#00000000', endColorstr='#1a000000', GradientType=0);background-image:-webkit-gradient(linear,0 0,0 100%,from(transparent),color-stop(40%,rgba(0,0,0,.05)),to(rgba(0,0,0,.1)));back ground-image:-webkit-linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1));background-image:-moz-linear-gradient(top,rgba(0,0,0,.05) 0,rgba(0,0,0,.1));background-image:-ms-linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1));background-image:-o-linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1));background-image:linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1))}.pure-button:focus{outline:0}.pure-button-active,.pure-button:active{box-shadow:0 0 0 1px rgba(0,0,0,.15) inset,0 0 6px rgba(0,0,0,.2) inset}.pure-button[disabled],.pure-button-disabled,.pure-button-disabled:hover,.pure-button-disabled:focus,.pure-button-disabled:active{border:0;background-image:none;filter:progid:DXImageTransform.Microsof t.gradient(enabled=false);filter:alpha(opacity=40) ;-khtml-opacity:.4;-moz-opacity:.4;opacity:.4;cursor:not-allowed;box-shadow:none}.pure-button-hidden{display:none}.pure-button::-moz-focus-inner{padding:0;border:0}.pure-button-primary,.pure-button-selected,a.pure-button-primary,a.pure-button-selected{background-color:#0078e7;color:#fff}.pure-form{margin:0}.pure-form fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}.pure-form legend{border:0;padding:0;white-space:normal;*margin-left:-7px}.pure-form button,.pure-form input,.pure-form select,.pure-form textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}.pure-form button,.pure-form input{line-height:normal}.pure-form button,.pure-form input[type=button],.pure-form input[type=reset],.pure-form input[type=submit]{-webkit-appearance:button;cursor:pointer;*overflow:visible }.pure-form button[disabled],.pure-form input[disabled]{cursor:default}.pure-form input[type=checkbox],.pure-form input[type=radio]{box-sizing:border-box;padding:0;*height:13px;*width:13px}.pure-form input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}.pure-form input[type=search]::-webkit-search-cancel-button,.pure-form input[type=search]::-webkit-search-decoration{-webkit-appearance:none}.pure-form button::-moz-focus-inner,.pure-form input::-moz-focus-inner{border:0;padding:0}.pure-form textarea{overflow:auto;vertical-align:top}.pure-form input[type=text],.pure-form input[type=password],.pure-form input[type=email],.pure-form input[type=url],.pure-form input[type=date],.pure-form input[type=month],.pure-form input[type=time],.pure-form input[type=datetime],.pure-form input[type=datetime-local],.pure-form input[type=week],.pure-form input[type=number],.pure-form input[type=search],.pure-form input[type=tel],.pure-form input[type=color],.pure-form select,.pure-form textarea{padding:.5em .6em;display:inline-block;border:1px solid #ccc;font-size:.8em;box-shadow:inset 0 1px 3px #ddd;border-radius:4px;-webkit-transition:.3s linear border;-moz-transition:.3s linear border;-ms-transition:.3s linear border;-o-transition:.3s linear border;transition:.3s linear border;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-font-smoothing:antialiased}.pure-form input[type=text]:focus,.pure-form input[type=password]:focus,.pure-form input[type=email]:focus,.pure-form input[type=url]:focus,.pure-form input[type=date]:focus,.pure-form input[type=month]:focus,.pure-form input[type=time]:focus,.pure-form input[type=datetime]:focus,.pure-form input[type=datetime-local]:focus,.pure-form input[type=week]:focus,.pure-form input[type=number]:focus,.pure-form input[type=search]:focus,.pure-form input[type=tel]:focus,.pure-form input[type=color]:focus,.pure-form select:focus,.pure-form textarea:focus{outline:0;outline:thin dotted \9;border-color:#129FEA}.pure-form input[type=file]:focus,.pure-form input[type=radio]:focus,.pure-form input[type=checkbox]:focus{outline:thin dotted #333;outline:1px auto #129FEA}.pure-form .pure-checkbox,.pure-form .pure-radio{margin:.5em 0;display:block}.pure-form input[type=text][disabled],.pure-form input[type=password][disabled],.pure-form input[type=email][disabled],.pure-form input[type=url][disabled],.pure-form input[type=date][disabled],.pure-form input[type=month][disabled],.pure-form input[type=time][disabled],.pure-form input[type=datetime][disabled],.pure-form input[type=datetime-local][disabled],.pure-form input[type=week][disabled],.pure-form input[type=number][disabled],.pure-form input[type=search][disabled],.pure-form input[type=tel][disabled],.pure-form input[type=color][disabled],.pure-form select[disabled],.pure-form textarea[disabled]{cursor:not-allowed;background-color:#eaeded;color:#cad2d3}.pure-form input[readonly],.pure-form select[readonly],.pure-form textarea[readonly],.pure-form input[readonly]:focus,.pure-form select[readonly]:focus,.pure-form textarea[readonly]:focus{background:#eee;color:#777;border-color:#ccc}.pure-form input:focus:invalid,.pure-form textarea:focus:invalid,.pure-form select:focus:invalid{color:#b94a48;border:1px solid #ee5f5b}.pure-form input:focus:invalid:focus,.pure-form textarea:focus:invalid:focus,.pure-form select:focus:invalid:focus{border-color:#e9322d}.pure-form input[type=file]:focus:invalid:focus,.pure-form input[type=radio]:focus:invalid:focus,.pure-form input[type=checkbox]:focus:invalid:focus{outline-color:#e9322d}.pure-form select{border:1px solid #ccc;background-color:#fff}.pure-form select[multiple]{height:auto}.pure-form label{margin:.5em 0 .2em;font-size:90%}.pure-form fieldset{margin:0;padding:.35em 0 .75em;border:0}.pure-form legend{display:block;width:100%;padding:.3em 0;margin-bottom:.3em;font-size:125%;color:#333;border-bottom:1px solid #e5e5e5}.pure-form-stacked input[type=text],.pure-form-stacked input[type=password],.pure-form-stacked input[type=email],.pure-form-stacked input[type=url],.pure-form-stacked input[type=date],.pure-form-stacked input[type=month],.pure-form-stacked input[type=time],.pure-form-stacked input[type=datetime],.pure-form-stacked input[type=datetime-local],.pure-form-stacked input[type=week],.pure-form-stacked input[type=number],.pure-form-stacked input[type=search],.pure-form-stacked input[type=tel],.pure-form-stacked input[type=color],.pure-form-stacked select,.pure-form-stacked label,.pure-form-stacked textarea{display:block;margin:.25em 0}.pure-form-aligned input,.pure-form-aligned textarea,.pure-form-aligned select,.pure-form-aligned .pure-help-inline,.pure-form-message-inline{display:inline-block;*display:inline;*zoom:1;vertical-align:middle}.pure-form-aligned .pure-control-group{margin-bottom:.5em}.pure-form-aligned .pure-control-group label{text-align:right;display:inline-block;vertical-align:middle;width:10em;margin:0 1em 0 0}.pure-form-aligned .pure-controls{margin:1.5em 0 0 10em}.pure-form input.pure-input-rounded,.pure-form .pure-input-rounded{border-radius:2em;padding:.5em 1em}.pure-form .pure-group fieldset{margin-bottom:10px}.pure-form .pure-group input{display:block;padding:10px;margin:0;border-radius:0;position:relative;top:-1px}.pure-form .pure-group input:focus{z-index:2}.pure-form .pure-group input:first-child{top:1px;border-radius:4px 4px 0 0}.pure-form .pure-group input:last-child{top:-2px;border-radius:0 0 4px 4px}.pure-form .pure-group button{margin:.35em 0}.pure-form .pure-input-1{width:100%}.pure-form .pure-input-2-3{width:66%}.pure-form .pure-input-1-2{width:50%}.pure-form .pure-input-1-3{width:33%}.pure-form .pure-input-1-4{width:25%}.pure-form .pure-help-inline,.pure-form-message-inline{display:inline-block;padding-left:.3em;color:#666;vertical-align:middle;font-size:90%}.pure-form-message{display:block;color:#666;font-size:90%}.pure-g{letter-spacing:-.31em;*letter-spacing:normal;*word-spacing:-.43em;text-rendering:optimizespeed}.opera-only :-o-prefocus,.pure-g{word-spacing:-.43em}.pure-u{display:inline-block;*display:inline;zoom:1;letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto}.pure-u-1,.pure-u-1-2,.pure-u-1-3,.pure-u-2-3,.pure-u-1-4,.pure-u-3-4,.pure-u-1-5,.pure-u-2-5,.pure-u-3-5,.pure-u-4-5,.pure-u-1-6,.pure-u-5-6,.pure-u-1-8,.pure-u-3-8,.pure-u-5-8,.pure-u-7-8,.pure-u-1-12,.pure-u-5-12,.pure-u-7-12,.pure-u-11-12,.pure-u-1-24,.pure-u-5-24,.pure-u-7-24,.pure-u-11-24,.pure-u-13-24,.pure-u-17-24,.pure-u-19-24,.pure-u-23-24{display:inline-block;*display:inline;zoom:1;letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto}.pure-u-1{width:100%}.pure-u-1-2{width:50%}.pure-u-1-3{width:33.33333%}.pure-u-2-3{width:66.66666%}.pure-u-1-4{width:25%}.pure-u-3-4{width:75%}.pure-u-1-5{width:20%}.pure-u-2-5{width:40%}.pure-u-3-5{width:60%}.pure-u-4-5{width:80%}.pure-u-1-6{width:16.666%}.pure-u-5-6{width:83.33%}.pure-u-1-8{width:12.5%}.pure-u-3-8{width:37.5%}.pure-u-5-8{width:62.5%}.pure-u-7-8{width:87.5%}.pure-u-1-12{width:8.3333%}.pure-u-5-12{width:41.6666%}.pure-u-7-12{width:58.3333%}.pure-u-11-12{width:91.6666%}.pure-u-1-24{width:4.1666%}.pure-u-5-24{width:20.8333%}.pure-u-7-24{width:29.1666%}.pure-u-11-24{width:45.8333%}.pure-u-13-24{width:54.1666%}.pure-u-17-24{width:70.8333%}.pure-u-19-24{width:79.1666%}.pure-u-23-24{width:95.8333%}.pure-menu ul{position:absolute;visibility:hidden}.pure-menu.pure-menu-open{visibility:visible;z-index:2;width:100%}.pure-menu ul{left:-10000px;list-style:none;margin:0;padding:0;top:-10000px;z-index:1}.pure-menu>ul{position:relative}.pure-menu-open>ul{left:0;top:0;visibility:visible}.pure-menu-open>ul:focus{outline:0}.pure-menu li{position:relative}.pure-menu a,.pure-menu .pure-menu-heading{display:block;color:inherit;line-height:1.5em;padding:5px 20px;text-decoration:none;white-space:nowrap}.pure-menu.pure-menu-horizontal>.pure-menu-heading{display:inline-block;*display:inline;zoom:1;margin:0;vertical-align:middle}.pure-menu.pure-menu-horizontal>ul{display:inline-block;*display:inline;zoom:1;vertical-align:middle;height:2.4em}.pure-menu li a{padding:5px 20px}.pure-menu-can-have-children>.pure-menu-label:after{content:'\25B8';float:right;font-family:'Lucida Grande','Lucida Sans Unicode','DejaVu Sans',sans-serif;margin-right:-20px;margin-top:-1px}.pure-menu-can-have-children>.pure-menu-label{padding-right:30px}.pure-menu-separator{background-color:#dfdfdf;display:block;height:1px;font-size:0;margin:7px 2px;overflow:hidden}.pure-menu-hidden{display:none}.pure-menu-fixed{position:fixed;top:0;left:0;width:100%}.pure-menu-horizontal li{display:inline-block;*display:inline;zoom:1;vertical-align:middle}.pure-menu-horizontal li li{display:block}.pure-menu-horizontal>.pure-menu-children>.pure-menu-can-have-children>.pure-menu-label:after{content:"\25BE"}.pure-menu-horizontal>.pure-menu-children>.pure-menu-can-have-children>.pure-menu-label{padding-right:30px}.pure-menu-horizontal li.pure-menu-separator{height:50%;width:1px;margin:0 7px}.pure-menu-horizontal li li.pure-menu-separator{height:1px;width:auto;margin:7px 2px}.pure-menu.pure-menu-open,.pure-menu.pure-menu-horizontal li .pure-menu-children{background:#fff;border:1px solid #b7b7b7}.pure-menu.pure-menu-horizontal,.pure-menu.pure-menu-horizontal .pure-menu-heading{border:0}.pure-menu a{border:1px solid transparent;border-left:0;border-right:0}.pure-menu a,.pure-menu .pure-menu-can-have-children>li:after{color:#777}.pure-menu .pure-menu-can-have-children>li:hover:after{color:#fff}.pure-menu .pure-menu-open{background:#dedede}.pure-menu li a:hover,.pure-menu li a:focus{background:#eee}.pure-menu li.pure-menu-disabled a:hover,.pure-menu li.pure-menu-disabled a:focus{background:#fff;color:#bfbfbf}.pure-menu .pure-menu-disabled>a{background-image:none;border-color:transparent;cursor:default}.pure-menu .pure-menu-disabled>a,.pure-menu .pure-menu-can-have-children.pure-menu-disabled>a:after{color:#bfbfbf}.pure-menu .pure-menu-heading{color:#565d64;text-transform:uppercase;font-size:90%;margin-top:.5em;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#dfdfdf}.pure-menu .pure-menu-selected a{color:#000}.pure-menu.pure-menu-open.pure-menu-fixed{border:0;border-bottom:1px solid #b7b7b7}.pure-paginator{letter-spacing:-.31em;*letter-spacing:normal;*word-spacing:-.43em;text-rendering:optimizespeed;list-style:none;margin:0;padding:0}.opera-only :-o-prefocus,.pure-paginator{word-spacing:-.43em}.pure-paginator li{display:inline-block;*display:inline;zoom:1;letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto}.pure-paginator .pure-button{border-radius:0;padding:.8em 1.4em;vertical-align:top;height:1.1em}.pure-paginator .pure-button:focus,.pure-paginator .pure-button:active{outline-style:none}.pure-paginator .prev,.pure-paginator .next{color:#C0C1C3;text-shadow:0 -1px 0 rgba(0,0,0,.45)}.pure-paginator .prev{border-radius:2px 0 0 2px}.pure-paginator .next{border-radius:0 2px 2px 0}.pure-table{border-collapse:collapse;border-spacing:0;empty-cells:show;border:1px solid #cbcbcb}.pure-table caption{color:#000;font:italic 85%/1 arial,sans-serif;padding:1em 0;text-align:center}.pure-table td,.pure-table th{border-left:1px solid #cbcbcb;border-width:0 0 0 1px;font-size:inherit;margin:0;overflow:visible;padding:6px 12px}.pure-table td:first-child,.pure-table th:first-child{border-left-width:0}.pure-table thead{background:#e0e0e0;color:#000;text-align:left;vertical-align:bottom}.pure-table td{background-color:transparent}.pure-table-odd td{background-color:#f2f2f2}.pure-table-striped tr:nth-child(2n-1) td{background-color:#f2f2f2}.pure-table-bordered td{border-bottom:1px solid #cbcbcb}.pure-table-bordered tbody>tr:last-child td,.pure-table-horizontal tbody>tr:last-child td{border-bottom-width:0}.pure-table-horizontal td,.pure-table-horizontal th{border-width:0 0 1px;border-bottom:1px solid #cbcbcb}.pure-table-horizontal tbody>tr:last-child td{border-bottom-width:0}</style>
<style>aside { background: #1f8dd6; padding: 0.6em 1em; color: #fff;}
#content { overflow: hidden; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;}
#view table { display: table;}
#view p { margin-left: 1em; margin-right: 1em;}
#view table td { line-height: 200%; padding-left: 2em;}
.large-text { font-size: 120%;}
div#indicator { position: absolute; z-index: 99; top: 0px; left: 3px; width: 4px; height: 20px; background-color: #888; border: none; margin: 5px 0 5px 0;}
div#overlay { position: absolute; z-index: 99; top: 100px; left: 0px; background-color: rgba(128, 128, 128, 0.2); -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: moz-none; -ms-user-select: none; user-select: none;}
div#overlay table { display: table;}
div#overlay table tr { border: 1px solid #888; line-height: 200%; text-align: right; color: #333;}
tr:nth-child(2n-1).blue td, tr.blue td { background: #1f8dd6; color: #fff;}
img.leftcard { position: absolute; top: 0; left: 0; z-index: 2;}
img.centercard { position: absolute; top: 0; left: 0; z-index: 1;}
img.rightcard { position: absolute; top: 0; left: 0; z-index: 2;}
div#stash { visibility: hidden;}
div.cover { perspective: 500px; -webkit-perspective: 500px; transform-style: preserve-3d; -webkit-transform-style: preserve-3d;}
div.cover img { width: 200px; position: absolute; top: 0; left: 0; opacity: 0; border: none; -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom,from(transparent), color-stop(70%, transparent), to(rgba(255,255,255,0.4)));}</style><script>/* * raf.js * https://github.com/ngryman/raf.js * * original requestAnimationFrame polyfill by Erik Möller * inspired from paul_irish gist and post * * Copyright (c) 2013 ngryman * Licensed under the MIT license. */
(function(window) { var lastTime = 0, vendors = ['webkit', 'moz'], requestAnimationFrame = window.requestAnimationFrame, cancelAnimationFrame = window.cancelAnimationFrame, i = vendors.length;
// try to un-prefix existing raf while (--i >= 0 && !requestAnimationFrame) { requestAnimationFrame = window[vendors[i] + 'RequestAnimationFrame']; cancelAnimationFrame = window[vendors[i] + 'CancelRequestAnimationFrame']; }
// polyfill with setTimeout fallback // heavily inspired from @darius gist mod: https://gist.github.com/paulirish/1579671#comment-837945 if (!requestAnimationFrame || !cancelAnimationFrame) { requestAnimationFrame = function(callback) { var now = +Date.now(), nextTime = Math.max(lastTime + 16, now); return setTimeout(function() { callback(lastTime = nextTime); }, nextTime - now); };
cancelAnimationFrame = clearTimeout; }
// export to window window.requestAnimationFrame = requestAnimationFrame; window.cancelAnimationFrame = cancelAnimationFrame;}(window));
</script><script>window.onload = function () { 'use strict';
var count, images, dim, offset, center, angle, dist, shift, pressed, reference, amplitude, target, velocity, timeConstant, xform, frame, timestamp, ticker;
function initialize() { pressed = false; timeConstant = 250; // ms dim = 200; offset = target = 0; angle = -60; dist = -150; shift = 10; count = 9; images = []; while (images.length < count) { images.push(document.getElementById(images.length) ); } }
function setupEvents() { var view = document.getElementById('content'); if (typeof window.ontouchstart !== 'undefined') { view.addEventListener('touchstart', tap); view.addEventListener('touchmove', drag); view.addEventListener('touchend', release); } view.addEventListener('mousedown', tap); view.addEventListener('mousemove', drag); view.addEventListener('mouseup', release); document.addEventListener('keydown', handleKey); }
function xpos(e) { // touch event if (e.targetTouches && (e.targetTouches.length >= 1)) { return e.targetTouches[0].clientX; }
// mouse event return e.clientX; }
function wrap(x) { return (x >= count) ? (x % count) : (x < 0) ? wrap(count + (x % count)) : x; }
function scroll(x) { var i, half, delta, dir, tween, el, alignment;
offset = (typeof x === 'number') ? x : offset; center = Math.floor((offset + dim / 2) / dim); delta = offset - center * dim; dir = (delta < 0) ? 1 : -1; tween = -dir * delta * 2 / dim;
alignment = 'translateX(' + (innerWidth - dim) / 2 + 'px) '; alignment += 'translateY(' + (innerHeight - dim) / 2 + 'px)';
// center el = images[wrap(center)]; el.style[xform] = alignment + ' translateX(' + (-delta / 2) + 'px)' + ' translateX(' + (dir * shift * tween) + 'px)' + ' translateZ(' + (dist * tween) + 'px)' + ' rotateY(' + (dir * angle * tween) + 'deg)'; el.style.zIndex = 0; el.style.opacity = 1;
half = count >> 1; for (i = 1; i <= half; ++i) { // right side el = images[wrap(center + i)]; el.style[xform] = alignment + ' translateX(' + (shift + (dim * i - delta) / 2) + 'px)' + ' translateZ(' + dist + 'px)' + ' rotateY(' + angle + 'deg)'; el.style.zIndex = -i; el.style.opacity = (i === half && delta < 0) ? 1 - tween : 1;
// left side el = images[wrap(center - i)]; el.style[xform] = alignment + ' translateX(' + (-shift + (-dim * i - delta) / 2) + 'px)' + ' translateZ(' + dist + 'px)' + ' rotateY(' + -angle + 'deg)'; el.style.zIndex = -i; el.style.opacity = (i === half && delta > 0) ? 1 - tween : 1; }
// center el = images[wrap(center)]; el.style[xform] = alignment + ' translateX(' + (-delta / 2) + 'px)' + ' translateX(' + (dir * shift * tween) + 'px)' + ' translateZ(' + (dist * tween) + 'px)' + ' rotateY(' + (dir * angle * tween) + 'deg)'; el.style.zIndex = 0; el.style.opacity = 1; }
function track() { var now, elapsed, delta, v;
now = Date.now(); elapsed = now - timestamp; timestamp = now; delta = offset - frame; frame = offset;
v = 1000 * delta / (1 + elapsed); velocity = 0.8 * v + 0.2 * velocity; }
function autoScroll() { var elapsed, delta;
if (amplitude) { elapsed = Date.now() - timestamp; delta = amplitude * Math.exp(-elapsed / timeConstant); if (delta > 4 || delta < -4) { scroll(target - delta); requestAnimationFrame(autoScroll); } else { scroll(target); } } }
function tap(e) { pressed = true; reference = xpos(e);
velocity = amplitude = 0; frame = offset; timestamp = Date.now(); clearInterval(ticker); ticker = setInterval(track, 100);
e.preventDefault(); e.stopPropagation(); return false; }
function drag(e) { var x, delta; if (pressed) { x = xpos(e); delta = reference - x; if (delta > 2 || delta < -2) { reference = x; scroll(offset + delta); } } e.preventDefault(); e.stopPropagation(); return false; }
function release(e) { pressed = false;
clearInterval(ticker); target = offset; if (velocity > 10 || velocity < -10) { amplitude = 0.9 * velocity; target = offset + amplitude; } target = Math.round(target / dim) * dim; amplitude = target - offset; timestamp = Date.now(); requestAnimationFrame(autoScroll);
e.preventDefault(); e.stopPropagation(); return false; }
function handleKey(e) { if (!pressed && (target === offset)) { // Space or PageDown or RightArrow or DownArrow if ([32, 34, 39, 40].indexOf(e.which) >= 0) { target = offset + dim; } // PageUp or LeftArrow or UpArrow if ([33, 37, 38].indexOf(e.which) >= 0) { target = offset - dim; } if (offset !== target) { amplitude = target - offset; timestamp = Date.now(); requestAnimationFrame(autoScroll); return true; } } }
xform = 'transform'; ['webkit', 'Moz', 'O', 'ms'].every(function (prefix) { var e = prefix + 'Transform'; if (typeof document.body.style[e] !== 'undefined') { xform = e; return false; } return true; });
window.onresize = scroll;
initialize(); setupEvents(); scroll(offset);};
</script> <div class="pure-g cover" id="content">
<img id="0" src="http://wenda.ir/pic/qr.png" />
<img id="1" src="http://wenda.ir/pic/qr.png" /> <img id="2" src="http://wenda.ir/pic/qr.png" /> <img id="3" src="http://wenda.ir/pic/qr.png" /> <img id="4" src="http://wenda.ir/pic/qr.png" /> <img id="5" src="http://wenda.ir/pic/qr.png" /> <img id="6" src="http://wenda.ir/pic/qr.png" /> <img id="7" src="http://wenda.ir/pic/qr.png" /> <img id="8" src="http://wenda.ir/pic/qr.png" />
</div>