diff --git a/src/Wallabag/ImportBundle/Controller/PocketController.php b/src/Wallabag/ImportBundle/Controller/PocketController.php index ef0407e69..c88e115e4 100644 --- a/src/Wallabag/ImportBundle/Controller/PocketController.php +++ b/src/Wallabag/ImportBundle/Controller/PocketController.php @@ -18,9 +18,9 @@ class PocketController extends Controller $pocket = $this->get('wallabag_import.pocket.import'); $form = $this->createFormBuilder($pocket) ->add('read', CheckboxType::class, array( - 'label' => 'Mark all as read', - 'required' => false, - )) + 'label' => 'Mark all as read', + 'required' => false, + )) ->getForm(); return $this->render('WallabagImportBundle:Pocket:index.html.twig', [ @@ -39,8 +39,7 @@ class PocketController extends Controller ->getRequestToken($this->generateUrl('import', array(), UrlGeneratorInterface::ABSOLUTE_URL)); $this->get('session')->set('import.pocket.code', $requestToken); - $markAsRead = $request->request->get('form')['read']; - $this->get('session')->set('read', $markAsRead); + $this->get('session')->set('read', $request->request->get('form')['read']); return $this->redirect( 'https://getpocket.com/auth/authorize?request_token='.$requestToken.'&redirect_uri='.$this->generateUrl('import_pocket_callback', array(), UrlGeneratorInterface::ABSOLUTE_URL), @@ -56,6 +55,7 @@ class PocketController extends Controller $message = 'Import failed, please try again.'; $pocket = $this->get('wallabag_import.pocket.import'); $markAsRead = $this->get('session')->get('read'); + $this->get('session')->remove('read'); // something bad happend on pocket side if (false === $pocket->authorize($this->get('session')->get('import.pocket.code'))) { @@ -72,8 +72,6 @@ class PocketController extends Controller $message = 'Import summary: '.$summary['imported'].' imported, '.$summary['skipped'].' already saved.'; } - $this->get('session')->remove('read'); - $this->get('session')->getFlashBag()->add( 'notice', $message diff --git a/src/Wallabag/ImportBundle/Controller/WallabagV1Controller.php b/src/Wallabag/ImportBundle/Controller/WallabagV1Controller.php index 8b27144be..154a0769b 100644 --- a/src/Wallabag/ImportBundle/Controller/WallabagV1Controller.php +++ b/src/Wallabag/ImportBundle/Controller/WallabagV1Controller.php @@ -32,6 +32,7 @@ class WallabagV1Controller extends Controller ->import(); $message = 'Import failed, please try again.'; + if (true === $res) { $summary = $wallabag->getSummary(); $message = 'Import summary: '.$summary['imported'].' imported, '.$summary['skipped'].' already saved.'; diff --git a/src/Wallabag/ImportBundle/Form/Type/UploadImportType.php b/src/Wallabag/ImportBundle/Form/Type/UploadImportType.php index bbc3661a1..386703796 100644 --- a/src/Wallabag/ImportBundle/Form/Type/UploadImportType.php +++ b/src/Wallabag/ImportBundle/Form/Type/UploadImportType.php @@ -15,9 +15,9 @@ class UploadImportType extends AbstractType $builder ->add('file', FileType::class) ->add('mark_as_read', CheckboxType::class, array( - 'label' => 'Mark all as read', - 'required' => false, - )) + 'label' => 'Mark all as read', + 'required' => false, + )) ->add('save', SubmitType::class) ; } diff --git a/src/Wallabag/ImportBundle/Import/PocketImport.php b/src/Wallabag/ImportBundle/Import/PocketImport.php index 1ec82a412..238ddbd1f 100644 --- a/src/Wallabag/ImportBundle/Import/PocketImport.php +++ b/src/Wallabag/ImportBundle/Import/PocketImport.php @@ -222,7 +222,7 @@ class PocketImport implements ImportInterface $entry = $this->contentProxy->updateEntry($entry, $url); // 0, 1, 2 - 1 if the item is archived - 2 if the item should be deleted - if ($pocketEntry['status'] == 1 | $this->markAsRead) { + if ($pocketEntry['status'] == 1 || $this->markAsRead) { $entry->setArchived(true); } diff --git a/src/Wallabag/ImportBundle/Tests/Controller/WallabagV1ControllerTest.php b/src/Wallabag/ImportBundle/Tests/Controller/WallabagV1ControllerTest.php index c10d0d18f..7f97b0f55 100644 --- a/src/Wallabag/ImportBundle/Tests/Controller/WallabagV1ControllerTest.php +++ b/src/Wallabag/ImportBundle/Tests/Controller/WallabagV1ControllerTest.php @@ -99,8 +99,7 @@ class WallabagV1ControllerTest extends WallabagCoreTestCase $this->assertTrue($content2->isArchived()); - $this->assertGreaterThan(1, $alert = $crawler->filter('div.messages.success')->extract(array('_text'))); - $this->assertContains('Import summary', $alert[0]); + $this->assertContains('Import summary', $client->getResponse()->getContent()); } public function testImportWallabagWithEmptyFile() diff --git a/src/Wallabag/ImportBundle/Tests/Import/PocketImportTest.php b/src/Wallabag/ImportBundle/Tests/Import/PocketImportTest.php index f44786b1a..bc9e2f422 100644 --- a/src/Wallabag/ImportBundle/Tests/Import/PocketImportTest.php +++ b/src/Wallabag/ImportBundle/Tests/Import/PocketImportTest.php @@ -3,6 +3,7 @@ namespace Wallabag\ImportBundle\Tests\Import; use Wallabag\UserBundle\Entity\User; +use Wallabag\CoreBundle\Entity\Entry; use Wallabag\ImportBundle\Import\PocketImport; use GuzzleHttp\Client; use GuzzleHttp\Subscriber\Mock; @@ -265,9 +266,7 @@ class PocketImportTest extends \PHPUnit_Framework_TestCase ->method('getRepository') ->willReturn($entryRepo); - $entry = $this->getMockBuilder('Wallabag\CoreBundle\Entity\Entry') - ->disableOriginalConstructor() - ->getMock(); + $entry = new Entry($this->user); $this->contentProxy ->expects($this->once()) @@ -283,6 +282,95 @@ class PocketImportTest extends \PHPUnit_Framework_TestCase $this->assertEquals(['skipped' => 1, 'imported' => 1], $pocketImport->getSummary()); } + /** + * Will sample results from https://getpocket.com/developer/docs/v3/retrieve. + */ + public function testImportAndMarkAllAsRead() + { + $client = new Client(); + + $mock = new Mock([ + new Response(200, ['Content-Type' => 'application/json'], Stream::factory(json_encode(['access_token' => 'wunderbar_token']))), + new Response(200, ['Content-Type' => 'application/json'], Stream::factory(' + { + "status": 1, + "list": { + "229279689": { + "item_id": "229279689", + "resolved_id": "229279689", + "given_url": "http://www.grantland.com/blog/the-triangle/post/_/id/38347/ryder-cup-preview", + "given_title": "The Massive Ryder Cup Preview - The Triangle Blog - Grantland", + "favorite": "1", + "status": "1", + "resolved_title": "The Massive Ryder Cup Preview", + "resolved_url": "http://www.grantland.com/blog/the-triangle/post/_/id/38347/ryder-cup-preview", + "excerpt": "The list of things I love about the Ryder Cup is so long that it could fill a (tedious) novel, and golf fans can probably guess most of them.", + "is_article": "1", + "has_video": "1", + "has_image": "1", + "word_count": "3197" + }, + "229279690": { + "item_id": "229279689", + "resolved_id": "229279689", + "given_url": "http://www.grantland.com/blog/the-triangle/post/_/id/38347/ryder-cup-preview/2", + "given_title": "The Massive Ryder Cup Preview - The Triangle Blog - Grantland", + "favorite": "1", + "status": "0", + "resolved_title": "The Massive Ryder Cup Preview", + "resolved_url": "http://www.grantland.com/blog/the-triangle/post/_/id/38347/ryder-cup-preview", + "excerpt": "The list of things I love about the Ryder Cup is so long that it could fill a (tedious) novel, and golf fans can probably guess most of them.", + "is_article": "1", + "has_video": "0", + "has_image": "0", + "word_count": "3197" + } + } + } + ')), + ]); + + $client->getEmitter()->attach($mock); + + $pocketImport = $this->getPocketImport(); + + $entryRepo = $this->getMockBuilder('Wallabag\CoreBundle\Repository\EntryRepository') + ->disableOriginalConstructor() + ->getMock(); + + $entryRepo->expects($this->exactly(2)) + ->method('findByUrlAndUserId') + ->will($this->onConsecutiveCalls(false, false)); + + $this->em + ->expects($this->exactly(2)) + ->method('getRepository') + ->willReturn($entryRepo); + + // check that every entry persisted are archived + $this->em + ->expects($this->any()) + ->method('persist') + ->with($this->callback(function($persistedEntry) { + return $persistedEntry->isArchived(); + })); + + $entry = new Entry($this->user); + + $this->contentProxy + ->expects($this->exactly(2)) + ->method('updateEntry') + ->willReturn($entry); + + $pocketImport->setClient($client); + $pocketImport->authorize('wunderbar_code'); + + $res = $pocketImport->setMarkAsRead(true)->import(); + + $this->assertTrue($res); + $this->assertEquals(['skipped' => 0, 'imported' => 2], $pocketImport->getSummary()); + } + public function testImportBadResponse() { $client = new Client(); diff --git a/src/Wallabag/ImportBundle/Tests/Import/WallabagV1ImportTest.php b/src/Wallabag/ImportBundle/Tests/Import/WallabagV1ImportTest.php index 9a563a115..fbcd270d3 100644 --- a/src/Wallabag/ImportBundle/Tests/Import/WallabagV1ImportTest.php +++ b/src/Wallabag/ImportBundle/Tests/Import/WallabagV1ImportTest.php @@ -81,6 +81,39 @@ class WallabagV1ImportTest extends \PHPUnit_Framework_TestCase $this->assertEquals(['skipped' => 1, 'imported' => 3], $wallabagV1Import->getSummary()); } + public function testImportAndMarkAllAsRead() + { + $wallabagV1Import = $this->getWallabagV1Import(); + $wallabagV1Import->setFilepath(__DIR__.'/../fixtures/wallabag-v1-read.json'); + + $entryRepo = $this->getMockBuilder('Wallabag\CoreBundle\Repository\EntryRepository') + ->disableOriginalConstructor() + ->getMock(); + + $entryRepo->expects($this->exactly(3)) + ->method('findByUrlAndUserId') + ->will($this->onConsecutiveCalls(false, false, false)); + + $this->em + ->expects($this->any()) + ->method('getRepository') + ->willReturn($entryRepo); + + // check that every entry persisted are archived + $this->em + ->expects($this->any()) + ->method('persist') + ->with($this->callback(function($persistedEntry) { + return $persistedEntry->isArchived(); + })); + + $res = $wallabagV1Import->setMarkAsRead(true)->import(); + + $this->assertTrue($res); + + $this->assertEquals(['skipped' => 0, 'imported' => 3], $wallabagV1Import->getSummary()); + } + public function testImportBadFile() { $wallabagV1Import = $this->getWallabagV1Import(); diff --git a/src/Wallabag/ImportBundle/Tests/Import/WallabagV2ImportTest.php b/src/Wallabag/ImportBundle/Tests/Import/WallabagV2ImportTest.php index 8728364bc..c461168ce 100644 --- a/src/Wallabag/ImportBundle/Tests/Import/WallabagV2ImportTest.php +++ b/src/Wallabag/ImportBundle/Tests/Import/WallabagV2ImportTest.php @@ -90,15 +90,18 @@ class WallabagV2ImportTest extends \PHPUnit_Framework_TestCase ->method('getRepository') ->willReturn($entryRepo); + // check that every entry persisted are archived + $this->em + ->expects($this->any()) + ->method('persist') + ->with($this->callback(function($persistedEntry) { + return $persistedEntry->isArchived(); + })); + $res = $wallabagV2Import->setMarkAsRead(true)->import(); $this->assertTrue($res); - $this->em - ->expects($this->any()) - ->method('getBuilderForArchiveByUser') - ->willReturn($entryRepo); - $this->assertEquals(['skipped' => 0, 'imported' => 2], $wallabagV2Import->getSummary()); } diff --git a/src/Wallabag/ImportBundle/Tests/fixtures/wallabag-v1-read.json b/src/Wallabag/ImportBundle/Tests/fixtures/wallabag-v1-read.json index 73c6bebb1..c4d1cf589 100644 --- a/src/Wallabag/ImportBundle/Tests/fixtures/wallabag-v1-read.json +++ b/src/Wallabag/ImportBundle/Tests/fixtures/wallabag-v1-read.json @@ -1,22 +1,53 @@ [ { - "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
Here are some features. If one is missing, you can open a new issue<\/a>.<\/p>\n Here are some features. If one is missing, you can open a new issue<\/a>.<\/p>\n Here are some features. If one is missing, you can open a new issue. Here are some features. If one is missing, you can open a new issue. The new 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 \n Demo<\/a> | Download<\/a>\n<\/p>\n\n\n\n Enjoy.<\/p>\n ","5":" The new 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 \n Demo<\/a> | Download<\/a>\n<\/p>\n\n\n\n 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 Aujourd\u2019hui, c\u2019est la Saint Valentin<\/em>, et l\u2019occasion de d\u00e9clarer son amour des logiciels libres !<\/p>\n Framasoft vous a d\u00e9j\u00e0 propos\u00e9 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 Cette bande-dessin\u00e9e est extraite du nouveau blog Grise Bouille<\/a> h\u00e9berg\u00e9 par Framasoft.<\/p>\n Cr\u00e9dit\u00a0: Simon Gee Giraudot<\/a> (Creative Commons By-Sa)<\/em><\/p>\n 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 Aujourd\u2019hui, c\u2019est la Saint Valentin<\/em>, et l\u2019occasion de d\u00e9clarer son amour des logiciels libres !<\/p>\n Framasoft vous a d\u00e9j\u00e0 propos\u00e9 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 Cette bande-dessin\u00e9e est extraite du nouveau blog Grise Bouille<\/a> h\u00e9berg\u00e9 par Framasoft.<\/p>\n Cr\u00e9dit\u00a0: Simon Gee Giraudot<\/a> (Creative Commons By-Sa)<\/em><\/p>\n 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": "10",
+ "1": "Recreating The Square Slider",
+ "2": "http://gilbert.pellegrom.me/recreating-the-square-slider",
+ "3": "0",
+ "4": "0",
+ "5": " The new Square 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. Enjoy. The new Square 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. Enjoy. Aujourd’hui, c’est la Saint Valentin, et l’occasion de déclarer son amour des logiciels libres ! Framasoft vous a déjà proposé son adaptation délirante de poèmes pour l’occasion, et voici une petite bande-dessinée qui synthétise l’événement : Cette bande-dessinée est extraite du nouveau blog Grise Bouille hébergé par Framasoft. Crédit : Simon Gee Giraudot (Creative Commons By-Sa) Auteur/dessinateur de bandes dessinées (Le Geektionnerd, Superflu, Bastards Inc, etc.) et doctorant en informatique sur son temps salarié. Aujourd’hui, c’est la Saint Valentin, et l’occasion de déclarer son amour des logiciels libres ! Framasoft vous a déjà proposé son adaptation délirante de poèmes pour l’occasion, et voici une petite bande-dessinée qui synthétise l’événement : Cette bande-dessinée est extraite du nouveau blog Grise Bouille hébergé par Framasoft. Crédit : Simon Gee Giraudot (Creative Commons By-Sa) Auteur/dessinateur de bandes dessinées (Le Geektionnerd, Superflu, Bastards Inc, etc.) et doctorant en informatique sur son temps salarié. Today, in an unfortunate example of the overreach of the United States\u2019 current copyright law, the Wikimedia Foundation removed the Dutch-language text of The Diary of a Young Girl<\/em><\/a>\u2014more commonly known in English as the Diary of Anne Frank\u2014<\/em>from Wikisource.[1]<\/a><\/sup><\/p>\n We took this action to comply with the United States\u2019 Digital Millennium Copyright Act<\/a> (DMCA), as we believe the diary is still under US copyright protection under the law as it is currently written. Nevertheless, our removal serves as an excellent example of why the law should be changed to prevent repeated extensions of copyright terms, an issue that has plagued our communities for years<\/a>.<\/p>\n The deletion was required because the Foundation is under the jurisdiction of US law\u00a0and is therefore subject to the DMCA, specifically\u00a0title 17, chapter 5, section 512 of the United States Code<\/a>. As we\u00a0noted<\/a>\u00a0in 2013, \u201cThe location of the servers, incorporation, and headquarters are just three of many factors that establish US jurisdiction \u2026 if infringing content is linked to or embedded in Wikimedia projects, then\u00a0 the Foundation may still be subject to liability for such use\u2014either as a direct or contributory infringer.<\/p>\n Based on email discussions sent to the Wikimedia Foundation at legal[at]wikimedia.org, we determined that the Wikimedia Foundation had either \u201cactual knowledge\u201d (i in the statute quoted below) or what is commonly called \u201cred flag knowledge\u201d (ii in the statute quoted below) that the Anne Frank text was hosted on Wikisource and was under copyright. The statute section states that a service provider is only protected by the DMCA when it:<\/p>\n (i) <\/strong>does not have actual knowledge that the material or an activity using the material on the system or network is infringing;<\/p>\n (ii) <\/strong>in the absence of such actual knowledge, is not aware of facts or circumstances from which infringing activity is apparent; or<\/p>\n (The rest applies when we get a proper DMCA takedown notice.)<\/p>\n Of particular concern, the US\u2019 9th Circuit Court of Appeals<\/a> stated in their ruling for UMG Recordings, Inc. v. Shelter Capital Partners LLC<\/em><\/a> that in circumstances where a hosting provider (like the Wikimedia Foundation) is informed by a third party (like an unrelated user) about infringing copyrighted content, that would likely constitute either actual or red flag knowledge under the DMCA.<\/p>\n We believe, based on the detail and specificity contained in the emails, that we received that we had actual knowledge sufficient for the DMCA to require us to perform a takedown even in the absence of a demand letter.<\/p>\n You may wonder why or how the Anne Frank text is copyrighted at all, as Anne Frank<\/a> died in February 1945. With 70 years having passed since her death, the text may have passed into public domain in the Netherlands on January 1, 2016, where it was first published, although there is still some dispute about this<\/a>.<\/p>\n However, in the United States, the Anne Frank original text will be under copyright until 2042. This is the result of several factors coming together, and the English-language Wikipedia has actually covered this issue with a multi-part test on its non-US copyrights content guideline.<\/a><\/p>\n In short, there are three major laws that together make the diary still copyrighted:<\/p>\n Court challenges to the URAA have all failed, with the most notable (Golan v. Holder<\/em><\/a>) resulting in a Supreme Court ruling that upheld the URAA.<\/p>\n What that means for Anne Frank\u2019s diary is unfortunately simple: no matter how it wound up in the United States and regardless of what formal copyright notices they used, the US grants it copyright until the year 2042, or 95 years after its original publication in 1947.<\/p>\n Under current copyright law, this remains true regardless of its copyright status anywhere else in the world and regardless of whether it may have been in the public domain in the United States in the past.<\/p>\n Jacob Rogers<\/em><\/a>, Legal Counsel* *Special thanks to <\/em>Anisha Mangalick<\/em><\/a>, Legal Fellow, for her assistance in this matter.<\/em><\/p>\n [1]<\/a>\u00a0The diary text was originally located at https:\/\/nl.wikisource.org\/wiki\/Het_Achterhuis_(Anne_Frank)<\/a>.<\/p>\n This article was edited to clarify that it is not just the location of the Wikimedia Foundation\u2019s servers that determine whether we fall in US jurisdiction.<\/em><\/p>\n\t\t\t\t\t\t\t\t\t\t\t",
- "mimetype": "text\/html",
- "language": "en",
- "reading_time": 4,
- "domain_name": "blog.wikimedia.org",
- "tags": []
-}, {
- "id": 4667,
- "title": "Tails - Tails 2.0.1 is out",
- "url": "https:\/\/tails.boum.org\/news\/version_2.0.1\/index.en.html",
- "is_archived": false,
- "is_starred": false,
- "content": " This release fixes numerous security issues<\/a>. All users must upgrade as soon as possible.<\/p>\n Tails now uses the GNOME Shell desktop environment, in its Classic mode. GNOME Shell provides a modern, simple, and actively developed desktop environment. The Classic mode keeps the traditional Applications, Places menu, and windows list. Accessibility and non-Latin input sources are also better integrated.<\/p>\n To find your way around, read our introduction to GNOME and the Tails desktop.<\/a><\/p>\n Debian 8 upgrades most included software, for example:<\/p>\n Update Tor Browser to 5.5 (based on Firefox 38.6.0 ESR):<\/p>\n Remove the Windows camouflage which is currently broken in GNOME Shell. We started working on
",
+ "6": "1",
+ "id": "3",
+ "title": "Features - wallabag",
+ "url": "https://www.wallabag.org/features/",
+ "is_read": "0",
+ "is_fav": "1",
+ "content": "\n\t\t
",
+ "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":"The HTML<\/h3>\n\n
<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
The CSS<\/h3>\n\n
.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
The Javascript (jQuery)<\/h3>\n\n
(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
A Few Notes<\/h3>\n\n
.inverted<\/code> class to a
.slide<\/code> div to swap the position of the asset and content.<\/li>\n
.light<\/code> or
.dark<\/code> class on the
.content<\/code> divs.<\/li>\n
The HTML<\/h3>\n\n
<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
The CSS<\/h3>\n\n
.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
The Javascript (jQuery)<\/h3>\n\n
(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
A Few Notes<\/h3>\n\n
.inverted<\/code> class to a
.slide<\/code> div to swap the position of the asset and content.<\/li>\n
.light<\/code> or
.dark<\/code> class on the
.content<\/code> divs.<\/li>\n
<\/a><\/p>\n
<\/a><\/p>\n
<\/span><\/a><\/div>
Gee<\/a><\/h3>
<\/div><\/a><\/a><\/a>
<\/a><\/p>\n
<\/a><\/p>\n
<\/span><\/a><\/div>
Gee<\/a><\/h3>
<\/div><\/a><\/a><\/a>
The HTML
\n\n
\n\n<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>
The CSS
\n\n
\n\n.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%; }
The Javascript (jQuery)
\n\n
\n\n(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);
A Few Notes
\n\n.inverted
class to a .slide
div to swap the position of the asset and content..light
or .dark
class on the .content
divs.The HTML
\n\n
\n\n<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>
The CSS
\n\n
\n\n.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%; }
The Javascript (jQuery)
\n\n
\n\n(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);
A Few Notes
\n\n.inverted
class to a .slide
div to swap the position of the asset and content..light
or .dark
class on the .content
divs.Gee
Gee
<\/a>
Anne Frank in 1940. Photo<\/a> by\u00a0Collectie Anne Frank Stichting Amsterdam, public domain.<\/i><\/small><\/p>\nWhat prompted us to remove the diary?<\/h3>\n
How is the diary still copyrighted?<\/h3>\n
Wikimedia Foundation<\/em><\/p>\nNew features<\/h2>\n
<\/td>\n<\/tr><\/table>
<\/td>\n<\/tr><\/table><\/li>\n<\/ul>
Upgrades and changes<\/h2>\n