[
{
- "id":"3","0":"3",
- "title":"Features - wallabag","1":"Features - wallabag",
- "url":"https:\/\/www.wallabag.org\/features\/","2":"https:\/\/www.wallabag.org\/features\/",
- "is_read":"1","3":"1",
- "is_fav":"1","4":"1",
- "content":"\n\t\t<p>Here are some features. If one is missing, you can <a href=\"https:\/\/github.com\/wallabag\/wallabag\">open a new issue<\/a>.<\/p>\n<ul class=\"list-group\"><li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"><\/span> wallabag is free and open source. Forever.<\/li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"><\/span> No time to read? Save a link in your wallabag to read it later<\/li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"><\/span> Read the saved articles in a comfortable view: the content, only the content<\/li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"><\/span> You save all the content: text and pictures<\/li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"><\/span> You can easily migrate from others private services.<\/li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"><\/span> You like an article? Share it by email, on twitter or in your <a href=\"https:\/\/github.com\/sebsauvage\/Shaarli\">shaarli<\/a><\/li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"><\/span> Because we are increasingly mobile, wallabag fits all your devices<\/li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"><\/span> Saving a link is so easy because we provide you many tools: extensions for Chrome and Firefox, iOS, Android and Windows Phone application, a bookmarklet, a simple field in your config webpage. <a title=\"Download wallabag\" href=\"https:\/\/www.wallabag.org\/downloads\/\">You can download third-party applications here<\/a>.<\/li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"><\/span> RSS feeds allows you to read your saved links in your RSS agregator<\/li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"><\/span> You can set tags to your entries.<\/li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"><\/span> wallabag is multilingual: french, english, spanish, german, italian, russian, persian, czech, polish, ukrainian and slovienian.<\/li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"><\/span> You\u2019re not the only one at home to use wallabag? it\u2019s good, wallabag is multi users<\/li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"><\/span> You prefer a dark template? Perfect, many templates are available in the configuration screen<\/li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"><\/span> Many storage allowed: sqlite, mysql and postgresql<\/li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"><\/span> Scroll position is saved: when you return on an article, you come back where you was. So convenient!<\/li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"><\/span> You can flattr flattrable articles directly from your wallabag<\/li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"><\/span> You want to retrieve your wallabag datas? hey, remember, wallabag is open source, you can export it<\/li>\n<\/ul>","5":"\n\t\t<p>Here are some features. If one is missing, you can <a href=\"https:\/\/github.com\/wallabag\/wallabag\">open a new issue<\/a>.<\/p>\n<ul class=\"list-group\"><li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"><\/span> wallabag is free and open source. Forever.<\/li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"><\/span> No time to read? Save a link in your wallabag to read it later<\/li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"><\/span> Read the saved articles in a comfortable view: the content, only the content<\/li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"><\/span> You save all the content: text and pictures<\/li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"><\/span> You can easily migrate from others private services.<\/li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"><\/span> You like an article? Share it by email, on twitter or in your <a href=\"https:\/\/github.com\/sebsauvage\/Shaarli\">shaarli<\/a><\/li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"><\/span> Because we are increasingly mobile, wallabag fits all your devices<\/li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"><\/span> Saving a link is so easy because we provide you many tools: extensions for Chrome and Firefox, iOS, Android and Windows Phone application, a bookmarklet, a simple field in your config webpage. <a title=\"Download wallabag\" href=\"https:\/\/www.wallabag.org\/downloads\/\">You can download third-party applications here<\/a>.<\/li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"><\/span> RSS feeds allows you to read your saved links in your RSS agregator<\/li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"><\/span> You can set tags to your entries.<\/li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"><\/span> wallabag is multilingual: french, english, spanish, german, italian, russian, persian, czech, polish, ukrainian and slovienian.<\/li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"><\/span> You\u2019re not the only one at home to use wallabag? it\u2019s good, wallabag is multi users<\/li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"><\/span> You prefer a dark template? Perfect, many templates are available in the configuration screen<\/li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"><\/span> Many storage allowed: sqlite, mysql and postgresql<\/li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"><\/span> Scroll position is saved: when you return on an article, you come back where you was. So convenient!<\/li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"><\/span> You can flattr flattrable articles directly from your wallabag<\/li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"><\/span> You want to retrieve your wallabag datas? hey, remember, wallabag is open source, you can export it<\/li>\n<\/ul>",
- "user_id":"1","6":"1","tags":""
- }
- ,
+ "0": "3",
+ "1": "Features - wallabag",
+ "2": "https://www.wallabag.org/features/",
+ "3": "0",
+ "4": "1",
+ "5": "\n\t\t<p>Here are some features. If one is missing, you can <a href=\"https://github.com/wallabag/wallabag\">open a new issue</a>.</p>\n<ul class=\"list-group\"><li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"></span> wallabag is free and open source. Forever.</li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"></span> No time to read? Save a link in your wallabag to read it later</li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"></span> Read the saved articles in a comfortable view: the content, only the content</li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"></span> You save all the content: text and pictures</li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"></span> You can easily migrate from others private services.</li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"></span> You like an article? Share it by email, on twitter or in your <a href=\"https://github.com/sebsauvage/Shaarli\">shaarli</a></li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"></span> Because we are increasingly mobile, wallabag fits all your devices</li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"></span> Saving a link is so easy because we provide you many tools: extensions for Chrome and Firefox, iOS, Android and Windows Phone application, a bookmarklet, a simple field in your config webpage. <a title=\"Download wallabag\" href=\"https://www.wallabag.org/downloads/\">You can download third-party applications here</a>.</li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"></span> RSS feeds allows you to read your saved links in your RSS agregator</li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"></span> You can set tags to your entries.</li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"></span> wallabag is multilingual: french, english, spanish, german, italian, russian, persian, czech, polish, ukrainian and slovienian.</li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"></span> You’re not the only one at home to use wallabag? it’s good, wallabag is multi users</li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"></span> You prefer a dark template? Perfect, many templates are available in the configuration screen</li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"></span> Many storage allowed: sqlite, mysql and postgresql</li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"></span> Scroll position is saved: when you return on an article, you come back where you was. So convenient!</li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"></span> You can flattr flattrable articles directly from your wallabag</li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"></span> You want to retrieve your wallabag datas? hey, remember, wallabag is open source, you can export it</li>\n</ul>",
+ "6": "1",
+ "id": "3",
+ "title": "Features - wallabag",
+ "url": "https://www.wallabag.org/features/",
+ "is_read": "0",
+ "is_fav": "1",
+ "content": "\n\t\t<p>Here are some features. If one is missing, you can <a href=\"https://github.com/wallabag/wallabag\">open a new issue</a>.</p>\n<ul class=\"list-group\"><li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"></span> wallabag is free and open source. Forever.</li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"></span> No time to read? Save a link in your wallabag to read it later</li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"></span> Read the saved articles in a comfortable view: the content, only the content</li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"></span> You save all the content: text and pictures</li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"></span> You can easily migrate from others private services.</li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"></span> You like an article? Share it by email, on twitter or in your <a href=\"https://github.com/sebsauvage/Shaarli\">shaarli</a></li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"></span> Because we are increasingly mobile, wallabag fits all your devices</li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"></span> Saving a link is so easy because we provide you many tools: extensions for Chrome and Firefox, iOS, Android and Windows Phone application, a bookmarklet, a simple field in your config webpage. <a title=\"Download wallabag\" href=\"https://www.wallabag.org/downloads/\">You can download third-party applications here</a>.</li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"></span> RSS feeds allows you to read your saved links in your RSS agregator</li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"></span> You can set tags to your entries.</li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"></span> wallabag is multilingual: french, english, spanish, german, italian, russian, persian, czech, polish, ukrainian and slovienian.</li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"></span> You’re not the only one at home to use wallabag? it’s good, wallabag is multi users</li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"></span> You prefer a dark template? Perfect, many templates are available in the configuration screen</li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"></span> Many storage allowed: sqlite, mysql and postgresql</li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"></span> Scroll position is saved: when you return on an article, you come back where you was. So convenient!</li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"></span> You can flattr flattrable articles directly from your wallabag</li>\n<li class=\"list-group-item\"><span class=\"glyphicon glyphicon-ok\"></span> You want to retrieve your wallabag datas? hey, remember, wallabag is open source, you can export it</li>\n</ul>",
+ "user_id": "1",
+ "tags": ""
+ },
+ {
+ "0": "10",
+ "1": "Recreating The Square Slider",
+ "2": "http://gilbert.pellegrom.me/recreating-the-square-slider",
+ "3": "0",
+ "4": "0",
+ "5": "<p>The new <a href=\"https://squareup.com\">Square</a> site is lovely and I really like the slider they have on the homepage. So I decided to try and recreate it in a simple and reusable way.</p>\n\n<p> \n <a href=\"http://gilbert.pellegrom.me/demo/square-slider\">Demo</a> | <a href=\"http://dev7studios.com/downloads/50\">Download</a>\n</p>\n\n\n\n<h3>The HTML</h3>\n\n<pre class=\"language-markup\"><code><div class=\"square-slider\"> \n <div class=\"slide slide1\">\n <div class=\"content light\">\n <h3>Recreating The Square Slider</h3>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac eros et augue vulputate \n aliquet pellentesque vitae tortor. Pellentesque mi velit, euismod nec semper</p>\n </div>\n <img src=\"images/asset1.png\" alt=\"\" class=\"asset\" />\n </div>\n <div class=\"slide slide2\">\n <div class=\"content dark\">\n <h3>Looks Amazing Right?</h3>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac eros et augue vulputate \n aliquet pellentesque vitae tortor. Pellentesque mi velit, euismod nec semper</p>\n </div>\n <img src=\"images/asset2.png\" alt=\"\" class=\"asset\" />\n </div>\n <div class=\"slide slide3 inverted\">\n <div class=\"content light\">\n <h3>And Simple To Use</h3>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac eros et augue vulputate \n aliquet pellentesque vitae tortor. Pellentesque mi velit, euismod nec semper</p>\n </div>\n <img src=\"images/asset3.png\" alt=\"\" class=\"asset\" />\n </div>\n <a href=\"#\" class=\"prev\">Prev</a>\n <a href=\"#\" class=\"next\">Next</a>\n <div class=\"overlay\"></div>\n</div></code></pre>\n\n<h3>The CSS</h3>\n\n<pre class=\"language-css\"><code>.square-slider { \n overflow: hidden;\n position: relative;\n background: #fff;\n}\n.square-slider .slide {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: none;\n opacity: 0;\n -moz-opacity: 0;\n -moz-transition: opacity 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98) 100ms;\n -webkit-transition: opacity 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98) 100ms;\n -o-transition: opacity 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98) 100ms;\n transition: opacity 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98) 100ms;\n -moz-transform: translate3d(0, 0, 0);\n -webkit-transform: translate3d(0, 0, 0);\n -o-transform: translate3d(0, 0, 0);\n -ms-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n}\n.square-slider .slide:first-child { display: block; }\n.square-slider .slide:first-child,\n.square-slider .slide.active {\n opacity: 1;\n -moz-opacity: 1;\n}\n.square-slider .slide .content {\n position: absolute;\n top: 40%;\n left: 50%;\n margin-left: -450px;\n width: 360px;\n text-shadow: 0 1px 1px rgba(0,0,0,0.3);\n z-index: 7;\n -webkit-transition-property: -webkit-transform,opacity;\n -moz-transition-property: -moz-transform,opacity;\n -webkit-transition-duration: 800ms,700ms;\n -moz-transition-duration: 800ms,700ms;\n -webkit-transition-timing-function: cubic-bezier(0.51, 0.01, 0.37, 0.98);\n -moz-transition-timing-function: cubic-bezier(0.51, 0.01, 0.37, 0.98);\n -webkit-transform: translate3d(-30px, 0, 0);\n -moz-transform: translate(-30px, 0);\n}\n.square-slider .slide.inverted .content {\n left: auto;\n right: 50%;\n margin-left: 0;\n margin-right: -450px;\n -webkit-transform: translate3d(30px, 0, 0);\n -moz-transform: translate(30px, 0);\n}\n.square-slider .slide.active .content {\n -webkit-transform: translate3d(0, 0, 0);\n -moz-transform: translate(0, 0);\n}\n.square-slider .slide .asset {\n position: absolute;\n bottom: 0;\n left: 50%;\n -webkit-transition-property: -webkit-transform,opacity;\n -moz-transition-property: -moz-transform,opacity;\n -webkit-transition-duration: 800ms,700ms;\n -moz-transition-duration: 800ms,700ms;\n -webkit-transition-timing-function: cubic-bezier(0.51, 0.01, 0.37, 0.98);\n -moz-transition-timing-function: cubic-bezier(0.51, 0.01, 0.37, 0.98);\n -webkit-transform: translate3d(0, 0, 0);\n -moz-transform: translate(0, 0);\n}\n.square-slider .slide.inverted .asset {\n left: auto;\n right: 50%;\n}\n.square-slider .slide.active .asset {\n -webkit-transform: translate3d(-7px, 3px, 0);\n -moz-transform: translate(-7px, 3px);\n}\n.square-slider .slide.inverted.active .asset {\n -webkit-transform: translate3d(7px, 3px, 0);\n -moz-transform: translate(7px, 3px);\n}\n.square-slider .prev,\n.square-slider .next {\n background: url(images/nav.png) no-repeat;\n display: block;\n width: 67px;\n height: 67px;\n position: absolute;\n top: 50%;\n margin-top: -30px;\n z-index: 10;\n border: 0;\n text-indent: -9999px;\n display: none;\n opacity: 0.6;\n -moz-opacity: 0.6;\n -webkit-transition: opacity 0.5s ease-in;\n -moz-transition: opacity 0.5s ease-in;\n -ms-transition: opacity 0.5s ease-in;\n -o-transition: opacity 0.5s ease-in;\n transition: opacity 0.5s ease-in;\n}\n.square-slider .prev { \n left: 40px; \n background-position: 0 100%;\n}\n.square-slider .next { right: 40px; }\n.square-slider .prev:hover,\n.square-slider .next:hover {\n opacity: 1;\n -moz-opacity: 1;\n}\n.square-slider .overlay {\n position: absolute;\n top: 0;\n left: -100%;\n width: 300%;\n height: 100%;\n z-index: 5;\n -moz-box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);\n -webkit-box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);\n box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);\n}\n\n\n.square-slider {\n width: 100%;\n height: 550px;\n margin: 40px auto;\n}\n.square-slider .slide .content.light { color: #fff; }\n.square-slider .slide .content.dark { \n color: #333; \n text-shadow: 0 1px 1px rgba(255,255,255,0.3);\n}\n.square-slider .slide1 { background: url(images/bg1.jpg) no-repeat 50% 50%; }\n.square-slider .slide2 { background: url(images/bg2.jpg) no-repeat 50% 50%; }\n.square-slider .slide3 { background: url(images/bg3.jpg) no-repeat 50% 50%; }</code></pre>\n\n<h3>The Javascript (jQuery)</h3>\n\n<pre class=\"language-javascript\"><code>(function($){\n\n $('.square-slider').each(function(){\n var slider = $(this),\n slides = slider.find('.slide'),\n currentSlide = 0;\n\n slides.show();\n $(slides[currentSlide]).addClass('active');\n $('.next,.prev', slider).show();\n\n $('.prev', slider).on('click', function(){\n slides.removeClass('active');\n currentSlide--;\n if(currentSlide < 0) currentSlide = slides.length - 1;\n $(slides[currentSlide]).addClass('active');\n return false;\n });\n\n $('.next', slider).on('click', function(){\n slides.removeClass('active');\n currentSlide++;\n if(currentSlide > slides.length - 1) currentSlide = 0;\n $(slides[currentSlide]).addClass('active');\n return false;\n });\n });\n\n})(window.jQuery);</code></pre>\n\n<h3>A Few Notes</h3>\n\n<ul><li>Feel free to <a href=\"http://dev7studios.com/downloads/50\">download the source</a> and customise and use it in your own sites. <strong>Don’t</strong> use the images as they belong to <a href=\"https://squareup.com\">Square Inc</a>.</li>\n<li>Add the <code>.inverted</code> class to a <code>.slide</code> div to swap the position of the asset and content.</li>\n<li>Depending on the background you’ll want to use the <code>.light</code> or <code>.dark</code> class on the <code>.content</code> divs.</li>\n<li>This is pretty much cross browser (as in the slider itself will still work in most browsers, just not with the fancy transitions).</li>\n<li>If javascript is off (really?) it displays the first slide.</li>\n<li>Source code is Public domain.</li>\n</ul><p>Enjoy.</p>\n ",
+ "6": "1",
+ "id": "10",
+ "title": "Recreating The Square Slider",
+ "url": "http://gilbert.pellegrom.me/recreating-the-square-slider",
+ "is_read": "0",
+ "is_fav": "0",
+ "content": "<p>The new <a href=\"https://squareup.com\">Square</a> site is lovely and I really like the slider they have on the homepage. So I decided to try and recreate it in a simple and reusable way.</p>\n\n<p> \n <a href=\"http://gilbert.pellegrom.me/demo/square-slider\">Demo</a> | <a href=\"http://dev7studios.com/downloads/50\">Download</a>\n</p>\n\n\n\n<h3>The HTML</h3>\n\n<pre class=\"language-markup\"><code><div class=\"square-slider\"> \n <div class=\"slide slide1\">\n <div class=\"content light\">\n <h3>Recreating The Square Slider</h3>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac eros et augue vulputate \n aliquet pellentesque vitae tortor. Pellentesque mi velit, euismod nec semper</p>\n </div>\n <img src=\"images/asset1.png\" alt=\"\" class=\"asset\" />\n </div>\n <div class=\"slide slide2\">\n <div class=\"content dark\">\n <h3>Looks Amazing Right?</h3>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac eros et augue vulputate \n aliquet pellentesque vitae tortor. Pellentesque mi velit, euismod nec semper</p>\n </div>\n <img src=\"images/asset2.png\" alt=\"\" class=\"asset\" />\n </div>\n <div class=\"slide slide3 inverted\">\n <div class=\"content light\">\n <h3>And Simple To Use</h3>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac eros et augue vulputate \n aliquet pellentesque vitae tortor. Pellentesque mi velit, euismod nec semper</p>\n </div>\n <img src=\"images/asset3.png\" alt=\"\" class=\"asset\" />\n </div>\n <a href=\"#\" class=\"prev\">Prev</a>\n <a href=\"#\" class=\"next\">Next</a>\n <div class=\"overlay\"></div>\n</div></code></pre>\n\n<h3>The CSS</h3>\n\n<pre class=\"language-css\"><code>.square-slider { \n overflow: hidden;\n position: relative;\n background: #fff;\n}\n.square-slider .slide {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: none;\n opacity: 0;\n -moz-opacity: 0;\n -moz-transition: opacity 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98) 100ms;\n -webkit-transition: opacity 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98) 100ms;\n -o-transition: opacity 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98) 100ms;\n transition: opacity 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98) 100ms;\n -moz-transform: translate3d(0, 0, 0);\n -webkit-transform: translate3d(0, 0, 0);\n -o-transform: translate3d(0, 0, 0);\n -ms-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n}\n.square-slider .slide:first-child { display: block; }\n.square-slider .slide:first-child,\n.square-slider .slide.active {\n opacity: 1;\n -moz-opacity: 1;\n}\n.square-slider .slide .content {\n position: absolute;\n top: 40%;\n left: 50%;\n margin-left: -450px;\n width: 360px;\n text-shadow: 0 1px 1px rgba(0,0,0,0.3);\n z-index: 7;\n -webkit-transition-property: -webkit-transform,opacity;\n -moz-transition-property: -moz-transform,opacity;\n -webkit-transition-duration: 800ms,700ms;\n -moz-transition-duration: 800ms,700ms;\n -webkit-transition-timing-function: cubic-bezier(0.51, 0.01, 0.37, 0.98);\n -moz-transition-timing-function: cubic-bezier(0.51, 0.01, 0.37, 0.98);\n -webkit-transform: translate3d(-30px, 0, 0);\n -moz-transform: translate(-30px, 0);\n}\n.square-slider .slide.inverted .content {\n left: auto;\n right: 50%;\n margin-left: 0;\n margin-right: -450px;\n -webkit-transform: translate3d(30px, 0, 0);\n -moz-transform: translate(30px, 0);\n}\n.square-slider .slide.active .content {\n -webkit-transform: translate3d(0, 0, 0);\n -moz-transform: translate(0, 0);\n}\n.square-slider .slide .asset {\n position: absolute;\n bottom: 0;\n left: 50%;\n -webkit-transition-property: -webkit-transform,opacity;\n -moz-transition-property: -moz-transform,opacity;\n -webkit-transition-duration: 800ms,700ms;\n -moz-transition-duration: 800ms,700ms;\n -webkit-transition-timing-function: cubic-bezier(0.51, 0.01, 0.37, 0.98);\n -moz-transition-timing-function: cubic-bezier(0.51, 0.01, 0.37, 0.98);\n -webkit-transform: translate3d(0, 0, 0);\n -moz-transform: translate(0, 0);\n}\n.square-slider .slide.inverted .asset {\n left: auto;\n right: 50%;\n}\n.square-slider .slide.active .asset {\n -webkit-transform: translate3d(-7px, 3px, 0);\n -moz-transform: translate(-7px, 3px);\n}\n.square-slider .slide.inverted.active .asset {\n -webkit-transform: translate3d(7px, 3px, 0);\n -moz-transform: translate(7px, 3px);\n}\n.square-slider .prev,\n.square-slider .next {\n background: url(images/nav.png) no-repeat;\n display: block;\n width: 67px;\n height: 67px;\n position: absolute;\n top: 50%;\n margin-top: -30px;\n z-index: 10;\n border: 0;\n text-indent: -9999px;\n display: none;\n opacity: 0.6;\n -moz-opacity: 0.6;\n -webkit-transition: opacity 0.5s ease-in;\n -moz-transition: opacity 0.5s ease-in;\n -ms-transition: opacity 0.5s ease-in;\n -o-transition: opacity 0.5s ease-in;\n transition: opacity 0.5s ease-in;\n}\n.square-slider .prev { \n left: 40px; \n background-position: 0 100%;\n}\n.square-slider .next { right: 40px; }\n.square-slider .prev:hover,\n.square-slider .next:hover {\n opacity: 1;\n -moz-opacity: 1;\n}\n.square-slider .overlay {\n position: absolute;\n top: 0;\n left: -100%;\n width: 300%;\n height: 100%;\n z-index: 5;\n -moz-box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);\n -webkit-box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);\n box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);\n}\n\n\n.square-slider {\n width: 100%;\n height: 550px;\n margin: 40px auto;\n}\n.square-slider .slide .content.light { color: #fff; }\n.square-slider .slide .content.dark { \n color: #333; \n text-shadow: 0 1px 1px rgba(255,255,255,0.3);\n}\n.square-slider .slide1 { background: url(images/bg1.jpg) no-repeat 50% 50%; }\n.square-slider .slide2 { background: url(images/bg2.jpg) no-repeat 50% 50%; }\n.square-slider .slide3 { background: url(images/bg3.jpg) no-repeat 50% 50%; }</code></pre>\n\n<h3>The Javascript (jQuery)</h3>\n\n<pre class=\"language-javascript\"><code>(function($){\n\n $('.square-slider').each(function(){\n var slider = $(this),\n slides = slider.find('.slide'),\n currentSlide = 0;\n\n slides.show();\n $(slides[currentSlide]).addClass('active');\n $('.next,.prev', slider).show();\n\n $('.prev', slider).on('click', function(){\n slides.removeClass('active');\n currentSlide--;\n if(currentSlide < 0) currentSlide = slides.length - 1;\n $(slides[currentSlide]).addClass('active');\n return false;\n });\n\n $('.next', slider).on('click', function(){\n slides.removeClass('active');\n currentSlide++;\n if(currentSlide > slides.length - 1) currentSlide = 0;\n $(slides[currentSlide]).addClass('active');\n return false;\n });\n });\n\n})(window.jQuery);</code></pre>\n\n<h3>A Few Notes</h3>\n\n<ul><li>Feel free to <a href=\"http://dev7studios.com/downloads/50\">download the source</a> and customise and use it in your own sites. <strong>Don’t</strong> use the images as they belong to <a href=\"https://squareup.com\">Square Inc</a>.</li>\n<li>Add the <code>.inverted</code> class to a <code>.slide</code> div to swap the position of the asset and content.</li>\n<li>Depending on the background you’ll want to use the <code>.light</code> or <code>.dark</code> class on the <code>.content</code> divs.</li>\n<li>This is pretty much cross browser (as in the slider itself will still work in most browsers, just not with the fancy transitions).</li>\n<li>If javascript is off (really?) it displays the first slide.</li>\n<li>Source code is Public domain.</li>\n</ul><p>Enjoy.</p>\n ",
+ "user_id": "1",
+ "tags": ""
+ },
{
- "id":"10","0":"10",
- "title":"Recreating The Square Slider","1":"Recreating The Square Slider",
- "url":"http:\/\/gilbert.pellegrom.me\/recreating-the-square-slider","2":"http:\/\/gilbert.pellegrom.me\/recreating-the-square-slider",
- "is_read":"1","3":"1",
- "is_fav":"0","4":"0",
- "content":"<p>The new <a href=\"https:\/\/squareup.com\">Square<\/a> site is lovely and I really like the slider they have on the homepage. So I decided to try and recreate it in a simple and reusable way.<\/p>\n\n<p> \n <a href=\"http:\/\/gilbert.pellegrom.me\/demo\/square-slider\">Demo<\/a> | <a href=\"http:\/\/dev7studios.com\/downloads\/50\">Download<\/a>\n<\/p>\n\n\n\n<h3>The HTML<\/h3>\n\n<pre class=\"language-markup\"><code><div class=\"square-slider\"> \n <div class=\"slide slide1\">\n <div class=\"content light\">\n <h3>Recreating The Square Slider<\/h3>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac eros et augue vulputate \n aliquet pellentesque vitae tortor. Pellentesque mi velit, euismod nec semper<\/p>\n <\/div>\n <img src=\"images\/asset1.png\" alt=\"\" class=\"asset\" \/>\n <\/div>\n <div class=\"slide slide2\">\n <div class=\"content dark\">\n <h3>Looks Amazing Right?<\/h3>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac eros et augue vulputate \n aliquet pellentesque vitae tortor. Pellentesque mi velit, euismod nec semper<\/p>\n <\/div>\n <img src=\"images\/asset2.png\" alt=\"\" class=\"asset\" \/>\n <\/div>\n <div class=\"slide slide3 inverted\">\n <div class=\"content light\">\n <h3>And Simple To Use<\/h3>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac eros et augue vulputate \n aliquet pellentesque vitae tortor. Pellentesque mi velit, euismod nec semper<\/p>\n <\/div>\n <img src=\"images\/asset3.png\" alt=\"\" class=\"asset\" \/>\n <\/div>\n <a href=\"#\" class=\"prev\">Prev<\/a>\n <a href=\"#\" class=\"next\">Next<\/a>\n <div class=\"overlay\"><\/div>\n<\/div><\/code><\/pre>\n\n<h3>The CSS<\/h3>\n\n<pre class=\"language-css\"><code>.square-slider { \n overflow: hidden;\n position: relative;\n background: #fff;\n}\n.square-slider .slide {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: none;\n opacity: 0;\n -moz-opacity: 0;\n -moz-transition: opacity 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98) 100ms;\n -webkit-transition: opacity 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98) 100ms;\n -o-transition: opacity 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98) 100ms;\n transition: opacity 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98) 100ms;\n -moz-transform: translate3d(0, 0, 0);\n -webkit-transform: translate3d(0, 0, 0);\n -o-transform: translate3d(0, 0, 0);\n -ms-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n}\n.square-slider .slide:first-child { display: block; }\n.square-slider .slide:first-child,\n.square-slider .slide.active {\n opacity: 1;\n -moz-opacity: 1;\n}\n.square-slider .slide .content {\n position: absolute;\n top: 40%;\n left: 50%;\n margin-left: -450px;\n width: 360px;\n text-shadow: 0 1px 1px rgba(0,0,0,0.3);\n z-index: 7;\n -webkit-transition-property: -webkit-transform,opacity;\n -moz-transition-property: -moz-transform,opacity;\n -webkit-transition-duration: 800ms,700ms;\n -moz-transition-duration: 800ms,700ms;\n -webkit-transition-timing-function: cubic-bezier(0.51, 0.01, 0.37, 0.98);\n -moz-transition-timing-function: cubic-bezier(0.51, 0.01, 0.37, 0.98);\n -webkit-transform: translate3d(-30px, 0, 0);\n -moz-transform: translate(-30px, 0);\n}\n.square-slider .slide.inverted .content {\n left: auto;\n right: 50%;\n margin-left: 0;\n margin-right: -450px;\n -webkit-transform: translate3d(30px, 0, 0);\n -moz-transform: translate(30px, 0);\n}\n.square-slider .slide.active .content {\n -webkit-transform: translate3d(0, 0, 0);\n -moz-transform: translate(0, 0);\n}\n.square-slider .slide .asset {\n position: absolute;\n bottom: 0;\n left: 50%;\n -webkit-transition-property: -webkit-transform,opacity;\n -moz-transition-property: -moz-transform,opacity;\n -webkit-transition-duration: 800ms,700ms;\n -moz-transition-duration: 800ms,700ms;\n -webkit-transition-timing-function: cubic-bezier(0.51, 0.01, 0.37, 0.98);\n -moz-transition-timing-function: cubic-bezier(0.51, 0.01, 0.37, 0.98);\n -webkit-transform: translate3d(0, 0, 0);\n -moz-transform: translate(0, 0);\n}\n.square-slider .slide.inverted .asset {\n left: auto;\n right: 50%;\n}\n.square-slider .slide.active .asset {\n -webkit-transform: translate3d(-7px, 3px, 0);\n -moz-transform: translate(-7px, 3px);\n}\n.square-slider .slide.inverted.active .asset {\n -webkit-transform: translate3d(7px, 3px, 0);\n -moz-transform: translate(7px, 3px);\n}\n.square-slider .prev,\n.square-slider .next {\n background: url(images\/nav.png) no-repeat;\n display: block;\n width: 67px;\n height: 67px;\n position: absolute;\n top: 50%;\n margin-top: -30px;\n z-index: 10;\n border: 0;\n text-indent: -9999px;\n display: none;\n opacity: 0.6;\n -moz-opacity: 0.6;\n -webkit-transition: opacity 0.5s ease-in;\n -moz-transition: opacity 0.5s ease-in;\n -ms-transition: opacity 0.5s ease-in;\n -o-transition: opacity 0.5s ease-in;\n transition: opacity 0.5s ease-in;\n}\n.square-slider .prev { \n left: 40px; \n background-position: 0 100%;\n}\n.square-slider .next { right: 40px; }\n.square-slider .prev:hover,\n.square-slider .next:hover {\n opacity: 1;\n -moz-opacity: 1;\n}\n.square-slider .overlay {\n position: absolute;\n top: 0;\n left: -100%;\n width: 300%;\n height: 100%;\n z-index: 5;\n -moz-box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);\n -webkit-box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);\n box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);\n}\n\n\n.square-slider {\n width: 100%;\n height: 550px;\n margin: 40px auto;\n}\n.square-slider .slide .content.light { color: #fff; }\n.square-slider .slide .content.dark { \n color: #333; \n text-shadow: 0 1px 1px rgba(255,255,255,0.3);\n}\n.square-slider .slide1 { background: url(images\/bg1.jpg) no-repeat 50% 50%; }\n.square-slider .slide2 { background: url(images\/bg2.jpg) no-repeat 50% 50%; }\n.square-slider .slide3 { background: url(images\/bg3.jpg) no-repeat 50% 50%; }<\/code><\/pre>\n\n<h3>The Javascript (jQuery)<\/h3>\n\n<pre class=\"language-javascript\"><code>(function($){\n\n $('.square-slider').each(function(){\n var slider = $(this),\n slides = slider.find('.slide'),\n currentSlide = 0;\n\n slides.show();\n $(slides[currentSlide]).addClass('active');\n $('.next,.prev', slider).show();\n\n $('.prev', slider).on('click', function(){\n slides.removeClass('active');\n currentSlide--;\n if(currentSlide < 0) currentSlide = slides.length - 1;\n $(slides[currentSlide]).addClass('active');\n return false;\n });\n\n $('.next', slider).on('click', function(){\n slides.removeClass('active');\n currentSlide++;\n if(currentSlide > slides.length - 1) currentSlide = 0;\n $(slides[currentSlide]).addClass('active');\n return false;\n });\n });\n\n})(window.jQuery);<\/code><\/pre>\n\n<h3>A Few Notes<\/h3>\n\n<ul><li>Feel free to <a href=\"http:\/\/dev7studios.com\/downloads\/50\">download the source<\/a> and customise and use it in your own sites. <strong>Don\u2019t<\/strong> use the images as they belong to <a href=\"https:\/\/squareup.com\">Square Inc<\/a>.<\/li>\n<li>Add the <code>.inverted<\/code> class to a <code>.slide<\/code> div to swap the position of the asset and content.<\/li>\n<li>Depending on the background you\u2019ll want to use the <code>.light<\/code> or <code>.dark<\/code> class on the <code>.content<\/code> divs.<\/li>\n<li>This is pretty much cross browser (as in the slider itself will still work in most browsers, just not with the fancy transitions).<\/li>\n<li>If javascript is off (really?) it displays the first slide.<\/li>\n<li>Source code is Public domain.<\/li>\n<\/ul><p>Enjoy.<\/p>\n ","5":"<p>The new <a href=\"https:\/\/squareup.com\">Square<\/a> site is lovely and I really like the slider they have on the homepage. So I decided to try and recreate it in a simple and reusable way.<\/p>\n\n<p> \n <a href=\"http:\/\/gilbert.pellegrom.me\/demo\/square-slider\">Demo<\/a> | <a href=\"http:\/\/dev7studios.com\/downloads\/50\">Download<\/a>\n<\/p>\n\n\n\n<h3>The HTML<\/h3>\n\n<pre class=\"language-markup\"><code><div class=\"square-slider\"> \n <div class=\"slide slide1\">\n <div class=\"content light\">\n <h3>Recreating The Square Slider<\/h3>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac eros et augue vulputate \n aliquet pellentesque vitae tortor. Pellentesque mi velit, euismod nec semper<\/p>\n <\/div>\n <img src=\"images\/asset1.png\" alt=\"\" class=\"asset\" \/>\n <\/div>\n <div class=\"slide slide2\">\n <div class=\"content dark\">\n <h3>Looks Amazing Right?<\/h3>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac eros et augue vulputate \n aliquet pellentesque vitae tortor. Pellentesque mi velit, euismod nec semper<\/p>\n <\/div>\n <img src=\"images\/asset2.png\" alt=\"\" class=\"asset\" \/>\n <\/div>\n <div class=\"slide slide3 inverted\">\n <div class=\"content light\">\n <h3>And Simple To Use<\/h3>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac eros et augue vulputate \n aliquet pellentesque vitae tortor. Pellentesque mi velit, euismod nec semper<\/p>\n <\/div>\n <img src=\"images\/asset3.png\" alt=\"\" class=\"asset\" \/>\n <\/div>\n <a href=\"#\" class=\"prev\">Prev<\/a>\n <a href=\"#\" class=\"next\">Next<\/a>\n <div class=\"overlay\"><\/div>\n<\/div><\/code><\/pre>\n\n<h3>The CSS<\/h3>\n\n<pre class=\"language-css\"><code>.square-slider { \n overflow: hidden;\n position: relative;\n background: #fff;\n}\n.square-slider .slide {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: none;\n opacity: 0;\n -moz-opacity: 0;\n -moz-transition: opacity 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98) 100ms;\n -webkit-transition: opacity 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98) 100ms;\n -o-transition: opacity 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98) 100ms;\n transition: opacity 800ms cubic-bezier(0.51, 0.01, 0.37, 0.98) 100ms;\n -moz-transform: translate3d(0, 0, 0);\n -webkit-transform: translate3d(0, 0, 0);\n -o-transform: translate3d(0, 0, 0);\n -ms-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n}\n.square-slider .slide:first-child { display: block; }\n.square-slider .slide:first-child,\n.square-slider .slide.active {\n opacity: 1;\n -moz-opacity: 1;\n}\n.square-slider .slide .content {\n position: absolute;\n top: 40%;\n left: 50%;\n margin-left: -450px;\n width: 360px;\n text-shadow: 0 1px 1px rgba(0,0,0,0.3);\n z-index: 7;\n -webkit-transition-property: -webkit-transform,opacity;\n -moz-transition-property: -moz-transform,opacity;\n -webkit-transition-duration: 800ms,700ms;\n -moz-transition-duration: 800ms,700ms;\n -webkit-transition-timing-function: cubic-bezier(0.51, 0.01, 0.37, 0.98);\n -moz-transition-timing-function: cubic-bezier(0.51, 0.01, 0.37, 0.98);\n -webkit-transform: translate3d(-30px, 0, 0);\n -moz-transform: translate(-30px, 0);\n}\n.square-slider .slide.inverted .content {\n left: auto;\n right: 50%;\n margin-left: 0;\n margin-right: -450px;\n -webkit-transform: translate3d(30px, 0, 0);\n -moz-transform: translate(30px, 0);\n}\n.square-slider .slide.active .content {\n -webkit-transform: translate3d(0, 0, 0);\n -moz-transform: translate(0, 0);\n}\n.square-slider .slide .asset {\n position: absolute;\n bottom: 0;\n left: 50%;\n -webkit-transition-property: -webkit-transform,opacity;\n -moz-transition-property: -moz-transform,opacity;\n -webkit-transition-duration: 800ms,700ms;\n -moz-transition-duration: 800ms,700ms;\n -webkit-transition-timing-function: cubic-bezier(0.51, 0.01, 0.37, 0.98);\n -moz-transition-timing-function: cubic-bezier(0.51, 0.01, 0.37, 0.98);\n -webkit-transform: translate3d(0, 0, 0);\n -moz-transform: translate(0, 0);\n}\n.square-slider .slide.inverted .asset {\n left: auto;\n right: 50%;\n}\n.square-slider .slide.active .asset {\n -webkit-transform: translate3d(-7px, 3px, 0);\n -moz-transform: translate(-7px, 3px);\n}\n.square-slider .slide.inverted.active .asset {\n -webkit-transform: translate3d(7px, 3px, 0);\n -moz-transform: translate(7px, 3px);\n}\n.square-slider .prev,\n.square-slider .next {\n background: url(images\/nav.png) no-repeat;\n display: block;\n width: 67px;\n height: 67px;\n position: absolute;\n top: 50%;\n margin-top: -30px;\n z-index: 10;\n border: 0;\n text-indent: -9999px;\n display: none;\n opacity: 0.6;\n -moz-opacity: 0.6;\n -webkit-transition: opacity 0.5s ease-in;\n -moz-transition: opacity 0.5s ease-in;\n -ms-transition: opacity 0.5s ease-in;\n -o-transition: opacity 0.5s ease-in;\n transition: opacity 0.5s ease-in;\n}\n.square-slider .prev { \n left: 40px; \n background-position: 0 100%;\n}\n.square-slider .next { right: 40px; }\n.square-slider .prev:hover,\n.square-slider .next:hover {\n opacity: 1;\n -moz-opacity: 1;\n}\n.square-slider .overlay {\n position: absolute;\n top: 0;\n left: -100%;\n width: 300%;\n height: 100%;\n z-index: 5;\n -moz-box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);\n -webkit-box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);\n box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);\n}\n\n\n.square-slider {\n width: 100%;\n height: 550px;\n margin: 40px auto;\n}\n.square-slider .slide .content.light { color: #fff; }\n.square-slider .slide .content.dark { \n color: #333; \n text-shadow: 0 1px 1px rgba(255,255,255,0.3);\n}\n.square-slider .slide1 { background: url(images\/bg1.jpg) no-repeat 50% 50%; }\n.square-slider .slide2 { background: url(images\/bg2.jpg) no-repeat 50% 50%; }\n.square-slider .slide3 { background: url(images\/bg3.jpg) no-repeat 50% 50%; }<\/code><\/pre>\n\n<h3>The Javascript (jQuery)<\/h3>\n\n<pre class=\"language-javascript\"><code>(function($){\n\n $('.square-slider').each(function(){\n var slider = $(this),\n slides = slider.find('.slide'),\n currentSlide = 0;\n\n slides.show();\n $(slides[currentSlide]).addClass('active');\n $('.next,.prev', slider).show();\n\n $('.prev', slider).on('click', function(){\n slides.removeClass('active');\n currentSlide--;\n if(currentSlide < 0) currentSlide = slides.length - 1;\n $(slides[currentSlide]).addClass('active');\n return false;\n });\n\n $('.next', slider).on('click', function(){\n slides.removeClass('active');\n currentSlide++;\n if(currentSlide > slides.length - 1) currentSlide = 0;\n $(slides[currentSlide]).addClass('active');\n return false;\n });\n });\n\n})(window.jQuery);<\/code><\/pre>\n\n<h3>A Few Notes<\/h3>\n\n<ul><li>Feel free to <a href=\"http:\/\/dev7studios.com\/downloads\/50\">download the source<\/a> and customise and use it in your own sites. <strong>Don\u2019t<\/strong> use the images as they belong to <a href=\"https:\/\/squareup.com\">Square Inc<\/a>.<\/li>\n<li>Add the <code>.inverted<\/code> class to a <code>.slide<\/code> div to swap the position of the asset and content.<\/li>\n<li>Depending on the background you\u2019ll want to use the <code>.light<\/code> or <code>.dark<\/code> class on the <code>.content<\/code> divs.<\/li>\n<li>This is pretty much cross browser (as in the slider itself will still work in most browsers, just not with the fancy transitions).<\/li>\n<li>If javascript is off (really?) it displays the first slide.<\/li>\n<li>Source code is Public domain.<\/li>\n<\/ul><p>Enjoy.<\/p>\n ","user_id":"1","6":"1","tags":""},{"id":"11","0":"11","title":"J\u2019aime le logiciel libre","1":"J\u2019aime le logiciel libre","url":"http:\/\/framablog.org\/2015\/02\/14\/jaime-le-logiciel-libre\/","2":"http:\/\/framablog.org\/2015\/02\/14\/jaime-le-logiciel-libre\/","is_read":"0","3":"0","is_fav":"0","4":"0","content":"\n <p>Aujourd\u2019hui, c\u2019est la <em>Saint Valentin<\/em>, et l\u2019occasion de d\u00e9clarer son amour des logiciels libres !<\/p>\n<p><a href=\"https:\/\/fsfe.org\/campaigns\/ilovefs\/ilovefs.fr.html\"><img src=\"http:\/\/framablog.org\/wp-content\/uploads\/2015\/02\/ilovefs-banner-extralarge.png\" alt=\"ilovefs-banner-extralarge\" width=\"627\" height=\"105\" class=\"aligncenter size-full wp-image-3239\" \/><\/a><\/p>\n<p>Framasoft vous a d\u00e9j\u00e0 propos\u00e9 <a href=\"http:\/\/framablog.org\/2015\/02\/14\/on-love-logiciel-libre\/\">son adaptation d\u00e9lirante de po\u00e8mes<\/a> pour l\u2019occasion, et voici une petite bande-dessin\u00e9e qui synth\u00e9tise l\u2019\u00e9v\u00e9nement :<\/p>\n<p><a href=\"http:\/\/framablog.org\/wp-content\/uploads\/2015\/02\/dm_001_jaime_le_logiciel_libre.jpg\"><img src=\"http:\/\/framablog.org\/wp-content\/uploads\/2015\/02\/dm_001_jaime_le_logiciel_libre.jpg\" alt=\"dm_001_jaime_le_logiciel_libre\" width=\"800\" height=\"1200\" class=\"aligncenter size-full wp-image-3265\" \/><\/a><\/p>\n<p>Cette bande-dessin\u00e9e est extraite du nouveau blog <a href=\"http:\/\/grisebouille.net\/\">Grise Bouille<\/a> h\u00e9berg\u00e9 par Framasoft.<\/p>\n<p><em>Cr\u00e9dit\u00a0: <a href=\"http:\/\/grisebouille.net\/\">Simon Gee Giraudot<\/a> (Creative Commons By-Sa)<\/em><\/p>\n<div title=\"Diaspora*\"><a><span><img src=\"http:\/\/www.framablog.org\/wp-content\/uploads\/2015\/01\/diaspora.jpg\" alt=\"\" \/><\/span><\/a><\/div><div class=\"twoclick-js\"><\/div><div><h3><a href=\"http:\/\/framablog.org\/author\/gee\/\" title=\"All posts by Gee\">Gee<\/a><\/h3><div class=\"bio-gravatar\"><img alt=\"\" src=\"http:\/\/0.gravatar.com\/avatar\/4f71e4ffe5d4d9d89b16949563cd41f3?s=90&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D90&r=G\" class=\"avatar pull-left media-object avatar-90 photo\" height=\"90\" width=\"90\" \/><\/div><a href=\"http:\/\/ptilouk.net\/\" class=\"bio-icon bio-icon-website\"><\/a><a href=\"https:\/\/framasphere.org\/u\/gee\" class=\"bio-icon bio-icon-facebook\"><\/a><a href=\"https:\/\/twitter.com\/ptilouk\" class=\"bio-icon bio-icon-twitter\"><\/a><p class=\"bio-description\">Auteur\/dessinateur de bandes dessin\u00e9es (Le Geektionnerd, Superflu, Bastards Inc, etc.) et doctorant en informatique sur son temps salari\u00e9.<\/p><\/div> ","5":"\n <p>Aujourd\u2019hui, c\u2019est la <em>Saint Valentin<\/em>, et l\u2019occasion de d\u00e9clarer son amour des logiciels libres !<\/p>\n<p><a href=\"https:\/\/fsfe.org\/campaigns\/ilovefs\/ilovefs.fr.html\"><img src=\"http:\/\/framablog.org\/wp-content\/uploads\/2015\/02\/ilovefs-banner-extralarge.png\" alt=\"ilovefs-banner-extralarge\" width=\"627\" height=\"105\" class=\"aligncenter size-full wp-image-3239\" \/><\/a><\/p>\n<p>Framasoft vous a d\u00e9j\u00e0 propos\u00e9 <a href=\"http:\/\/framablog.org\/2015\/02\/14\/on-love-logiciel-libre\/\">son adaptation d\u00e9lirante de po\u00e8mes<\/a> pour l\u2019occasion, et voici une petite bande-dessin\u00e9e qui synth\u00e9tise l\u2019\u00e9v\u00e9nement :<\/p>\n<p><a href=\"http:\/\/framablog.org\/wp-content\/uploads\/2015\/02\/dm_001_jaime_le_logiciel_libre.jpg\"><img src=\"http:\/\/framablog.org\/wp-content\/uploads\/2015\/02\/dm_001_jaime_le_logiciel_libre.jpg\" alt=\"dm_001_jaime_le_logiciel_libre\" width=\"800\" height=\"1200\" class=\"aligncenter size-full wp-image-3265\" \/><\/a><\/p>\n<p>Cette bande-dessin\u00e9e est extraite du nouveau blog <a href=\"http:\/\/grisebouille.net\/\">Grise Bouille<\/a> h\u00e9berg\u00e9 par Framasoft.<\/p>\n<p><em>Cr\u00e9dit\u00a0: <a href=\"http:\/\/grisebouille.net\/\">Simon Gee Giraudot<\/a> (Creative Commons By-Sa)<\/em><\/p>\n<div title=\"Diaspora*\"><a><span><img src=\"http:\/\/www.framablog.org\/wp-content\/uploads\/2015\/01\/diaspora.jpg\" alt=\"\" \/><\/span><\/a><\/div><div class=\"twoclick-js\"><\/div><div><h3><a href=\"http:\/\/framablog.org\/author\/gee\/\" title=\"All posts by Gee\">Gee<\/a><\/h3><div class=\"bio-gravatar\"><img alt=\"\" src=\"http:\/\/0.gravatar.com\/avatar\/4f71e4ffe5d4d9d89b16949563cd41f3?s=90&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D90&r=G\" class=\"avatar pull-left media-object avatar-90 photo\" height=\"90\" width=\"90\" \/><\/div><a href=\"http:\/\/ptilouk.net\/\" class=\"bio-icon bio-icon-website\"><\/a><a href=\"https:\/\/framasphere.org\/u\/gee\" class=\"bio-icon bio-icon-facebook\"><\/a><a href=\"https:\/\/twitter.com\/ptilouk\" class=\"bio-icon bio-icon-twitter\"><\/a><p class=\"bio-description\">Auteur\/dessinateur de bandes dessin\u00e9es (Le Geektionnerd, Superflu, Bastards Inc, etc.) et doctorant en informatique sur son temps salari\u00e9.<\/p><\/div> ",
- "user_id":"1","6":"1",
- "tags":"framasoft,tag"
+ "0": "11",
+ "1": "J’aime le logiciel libre",
+ "2": "http://framablog.org/2015/02/14/jaime-le-logiciel-libre/",
+ "3": "0",
+ "4": "0",
+ "5": "\n <p>Aujourd’hui, c’est la <em>Saint Valentin</em>, et l’occasion de déclarer son amour des logiciels libres !</p>\n<p><a href=\"https://fsfe.org/campaigns/ilovefs/ilovefs.fr.html\"><img src=\"http://framablog.org/wp-content/uploads/2015/02/ilovefs-banner-extralarge.png\" alt=\"ilovefs-banner-extralarge\" width=\"627\" height=\"105\" class=\"aligncenter size-full wp-image-3239\" /></a></p>\n<p>Framasoft vous a déjà proposé <a href=\"http://framablog.org/2015/02/14/on-love-logiciel-libre/\">son adaptation délirante de poèmes</a> pour l’occasion, et voici une petite bande-dessinée qui synthétise l’événement :</p>\n<p><a href=\"http://framablog.org/wp-content/uploads/2015/02/dm_001_jaime_le_logiciel_libre.jpg\"><img src=\"http://framablog.org/wp-content/uploads/2015/02/dm_001_jaime_le_logiciel_libre.jpg\" alt=\"dm_001_jaime_le_logiciel_libre\" width=\"800\" height=\"1200\" class=\"aligncenter size-full wp-image-3265\" /></a></p>\n<p>Cette bande-dessinée est extraite du nouveau blog <a href=\"http://grisebouille.net/\">Grise Bouille</a> hébergé par Framasoft.</p>\n<p><em>Crédit : <a href=\"http://grisebouille.net/\">Simon Gee Giraudot</a> (Creative Commons By-Sa)</em></p>\n<div title=\"Diaspora*\"><a><span><img src=\"http://www.framablog.org/wp-content/uploads/2015/01/diaspora.jpg\" alt=\"\" /></span></a></div><div class=\"twoclick-js\"></div><div><h3><a href=\"http://framablog.org/author/gee/\" title=\"All posts by Gee\">Gee</a></h3><div class=\"bio-gravatar\"><img alt=\"\" src=\"http://0.gravatar.com/avatar/4f71e4ffe5d4d9d89b16949563cd41f3?s=90&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D90&r=G\" class=\"avatar pull-left media-object avatar-90 photo\" height=\"90\" width=\"90\" /></div><a href=\"http://ptilouk.net/\" class=\"bio-icon bio-icon-website\"></a><a href=\"https://framasphere.org/u/gee\" class=\"bio-icon bio-icon-facebook\"></a><a href=\"https://twitter.com/ptilouk\" class=\"bio-icon bio-icon-twitter\"></a><p class=\"bio-description\">Auteur/dessinateur de bandes dessinées (Le Geektionnerd, Superflu, Bastards Inc, etc.) et doctorant en informatique sur son temps salarié.</p></div> ",
+ "6": "1",
+ "id": "11",
+ "title": "J’aime le logiciel libre",
+ "url": "http://framablog.org/2015/02/14/jaime-le-logiciel-libre/",
+ "is_read": "0",
+ "is_fav": "0",
+ "content": "\n <p>Aujourd’hui, c’est la <em>Saint Valentin</em>, et l’occasion de déclarer son amour des logiciels libres !</p>\n<p><a href=\"https://fsfe.org/campaigns/ilovefs/ilovefs.fr.html\"><img src=\"http://framablog.org/wp-content/uploads/2015/02/ilovefs-banner-extralarge.png\" alt=\"ilovefs-banner-extralarge\" width=\"627\" height=\"105\" class=\"aligncenter size-full wp-image-3239\" /></a></p>\n<p>Framasoft vous a déjà proposé <a href=\"http://framablog.org/2015/02/14/on-love-logiciel-libre/\">son adaptation délirante de poèmes</a> pour l’occasion, et voici une petite bande-dessinée qui synthétise l’événement :</p>\n<p><a href=\"http://framablog.org/wp-content/uploads/2015/02/dm_001_jaime_le_logiciel_libre.jpg\"><img src=\"http://framablog.org/wp-content/uploads/2015/02/dm_001_jaime_le_logiciel_libre.jpg\" alt=\"dm_001_jaime_le_logiciel_libre\" width=\"800\" height=\"1200\" class=\"aligncenter size-full wp-image-3265\" /></a></p>\n<p>Cette bande-dessinée est extraite du nouveau blog <a href=\"http://grisebouille.net/\">Grise Bouille</a> hébergé par Framasoft.</p>\n<p><em>Crédit : <a href=\"http://grisebouille.net/\">Simon Gee Giraudot</a> (Creative Commons By-Sa)</em></p>\n<div title=\"Diaspora*\"><a><span><img src=\"http://www.framablog.org/wp-content/uploads/2015/01/diaspora.jpg\" alt=\"\" /></span></a></div><div class=\"twoclick-js\"></div><div><h3><a href=\"http://framablog.org/author/gee/\" title=\"All posts by Gee\">Gee</a></h3><div class=\"bio-gravatar\"><img alt=\"\" src=\"http://0.gravatar.com/avatar/4f71e4ffe5d4d9d89b16949563cd41f3?s=90&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D90&r=G\" class=\"avatar pull-left media-object avatar-90 photo\" height=\"90\" width=\"90\" /></div><a href=\"http://ptilouk.net/\" class=\"bio-icon bio-icon-website\"></a><a href=\"https://framasphere.org/u/gee\" class=\"bio-icon bio-icon-facebook\"></a><a href=\"https://twitter.com/ptilouk\" class=\"bio-icon bio-icon-twitter\"></a><p class=\"bio-description\">Auteur/dessinateur de bandes dessinées (Le Geektionnerd, Superflu, Bastards Inc, etc.) et doctorant en informatique sur son temps salarié.</p></div> ",
+ "user_id": "1",
+ "tags": "framasoft,tag"
}
]
projects / github / wallabag / wallabag.git / blobdiff