BarackSlideshow – An elegant, lightweight slideshow script
This post discusses a project which has its own page. Please refer to BarackSlideshow for the most up-to-date information.
I guess pretty much everyone has seen Barack Obama’s website by now, which is clearly one of the prettiest of all candidates we’ve heard of so far. Not only is it an example of state-of-the-art design, but it’s also nice to navigate and interact with.
I decided to imitate the homepage slideshow. I had already experimented with similar animated lists, which allowed me to have it ready within minutes
The creation
I took my previous class (SlideList), and made a few changes here and there. It works with MooTools 1.2, and supports all kinds of shape transformations (top and left coordinates, and height and width properties), which means it can now be used with vertical, horizontal, or even irregular lists.
I extended it and came up with a new class that receives the images and loading spinner as parameters (note: it’s arguable whether this is the best decision OOP-wise, but due to the simplicity of this script, this was the right call)
The code
To ensure all images are loaded before the user makes any interaction, the MooTools Assets component is used.
The CSS plays a major role (as in every other animation-focused script). I suggest you analyze it carefully before implementing it in your applications or websites. You’ll probably need to adjust the ids, or use classes instead to keep your stylesheets clean.
The markup is meaningful and simple. Two lists are used (one for the images and the other for the links). The loading element is included in the HTML, but it’s probably better to inject it from the script directly.
The pictures
The beautiful pictures were taken from Flickr with permission of the owners, unless they were directly released for non-commercial use. Thanks vgm8383, dogonnit, M. TANIGUCHI, GustavoBuriola & others!
The demo
Click here to see it in action or go to the project page for download and other details.
-
[...] 17.BarackSlideshow [...]
-
[...] 17.BarackSlideshow [...]
-
[...] Barack Slideshow [...]
-
[...] Barack Slideshow [...]
-
[...] Strona główna projektu [...]
-
[...] BarackSlideshow is an elegant, lightweight Mootools slideshow script inspired from Barack Obama Official [...]
-
[...] It’s been some time since TextboxList got some attention. It is undoubtedly one of my most popular JavaScript projects, along with the famous Fancy Menu (MorphList) and its slideshow sibling, BarackSlideshow. [...]
-
[...] It’s been some time since TextboxList got some attention. It is undoubtedly one of my most popular JavaScript projects, along with the famous Fancy Menu (MorphList) and its slideshow sibling, BarackSlideshow. [...]
-
[...] BarackSlideshow – An elegant, lightweight slideshow script (updated!) [...]
-
[...] two widely used scripts have been updated. BarackSlideshow now supports transition effects and can autoplay (requested by the community many [...]
-
[...] first component I stumbled upon was the BarackSlideshow. I found this slide show script over at Devthought. Let me know how it works out for you should you decided to use [...]
-
[...] 3. BarackSlideshow – An elegant, lightweight slideshow script [...]
-
[...] Demo | Download [...]
-
[...] From Devthought [...]
-
[...] gente ha visto el website de Barack Obama. El website de Barack Obama es muy sofisticado y bonito. BarackSlideshow es muy parecido al slideshow de el website de Barack Obama. Una gran herramienta para poner en tu [...]
-
[...] ? ?? ?? ??? ? ????? ??? ???? ???????? ?? ?????? ??? ?? ?????? ?????, ??? ?? ??? ?? ???? ????? [...]
-
[...] BarackSlideshow An elegant, lightweight slideshow script. It works with MooTools 1.2, and supports all kinds of shape transformations (top and left coordinates, and height and width properties), which means it can now be used with vertical, horizontal, or even irregular lists. [...]
-
[...] Javascript kann man elegante Fotogalerien erstellen. devthought.com bietet eine sehr interessante Lösung an, die selbst Barack Obama benutzt. Die Fotogalerie wirkt [...]
-
[...] BarackSlideshow An elegant, lightweight slideshow script. It works with MooTools 1.2, and supports all kinds of shape transformations (top and left coordinates, and height and width properties), which means it can now be used with vertical, horizontal, or even irregular lists. [...]
-
[...] BarackSlideshowAn elegant, lightweight slideshow script. It works with MooTools 1.2, and supports all kinds of shape transformations (top and left coordinates, and height and width properties), which means it can now be used with vertical, horizontal, or even irregular lists. [...]
-
[...] BarackSlideshow Un elegante y ligero script para realizar presentaciones de fotografÃas con MooTools 1.2. [...]
-
[...] Devthought – Guillermo Rauch’s Blog » BarackSlideshow – An elegant, lightweight slideshow script (tags: webdesign tutorial web2.0 resources tools jquery photo javascript) [...]
-
[...] BarackSlideshow An elegant, lightweight slideshow script. It works with MooTools 1.2, and supports all kinds of shape transformations (top and left coordinates, and height and width properties), which means it can now be used with vertical, horizontal, or even irregular lists. [...]
-
[...] BarackSlideshowAn elegant, lightweight slideshow script. It works with MooTools 1.2, and supports all kinds of shape transformations (top and left coordinates, and height and width properties), which means it can now be used with vertical, horizontal, or even irregular lists. [...]
-
[...] BarackSlideshow An elegant, lightweight slideshow script. It works with MooTools 1.2, and supports all kinds of shape transformations (top and left coordinates, and height and width properties), which means it can now be used with vertical, horizontal, or even irregular lists. [...]
-
[...] BarackSlideshowAn elegant, lightweight slideshow script. It works with MooTools 1.2, and supports all kinds of shape transformations (top and left coordinates, and height and width properties), which means it can now be used with vertical, horizontal, or even irregular lists. [...]
-
[...] BarackSlideshowAn elegant, lightweight slideshow script. It works with MooTools 1.2, and supports all kinds of shape transformations (top and left coordinates, and height and width properties), which means it can now be used with vertical, horizontal, or even irregular lists. [...]
-
[...] BarackSlideshowAn elegant, lightweight slideshow script. It works with MooTools 1.2, and supports all kinds of shape transformations (top and left coordinates, and height and width properties), which means it can now be used with vertical, horizontal, or even irregular lists. [...]
-
[...] Visit Website [...]
-
[...] Devthought – Guillermo Rauch’s Blog » BarackSlideshow – An elegant, lightweight slideshow script BarackSlideshow (tags: javascript slideshow webdesign) [...]
-
[...] BarackSlideshow Devthought ha creado un estilo elegante, ligero script de presentación de fotografías script llamado BarackSlideshow. Trabaja con MooTools 1,2, y soporta todos los tipos de transformaciones. VER DEMO VISITAR SITIO [...]
-
[...] Rauch hat sich die Arbeit gemacht und das Script für die Slideshow auf der Webseite des delegierten US-Präsidentschaftskandidaten mit eigenen Ideen nachgebaut. Das Ergebnis kann sich sehen lassen und hält was es verspricht – [...]
-
[...] lightweight script entitled BarackSlideshow inspired in the slideshow showed in the presidential candidate Barack [...]
-
[...] BarackSlideshow Via: [...]
-
[...] Devthought – Guillermo Rauch’s Blog » BarackSlideshow – An elegant, lightweight slideshow script [...]
-
[...] DevthoughtFormat: js, cssDownload Diese Icons verzweigen auf soziale Netzwerke bei denen Nutzer neue Inhalte finden und mit anderen [...]
-
[...] element is included in the HTML, but it’s probably better to inject it from the script directly. You can download the files for this slideshow at Guillermo’s Blog at devthought.com Bookmark [...]
-
[...] much everyone has seen Barack Obama’s website by now, which is clearly one of the prettiest of all candidates we’ve heard of so far. Not only [...]
-
[...] BarackSlideshow est un élégant diaporama écrit en javascript et basé sur le framework Mootools (version 1.2). [...]
-
[...] BarackSlideshow – An elegant, lightweight slideshow script Imitation of slideshow from BarackObama.com (tags: slideshow javascript) [...]
-
[...] basado en el “feature content gallery” de WPElements y el Barack Slideshow de Devtought, sin duda el resultado es [...]
-
[...] would like to share this plugin i uploaded yesterday on my blog. It has been created using the Obamaslideshow from Devthought and put to work with Wordpress for [...]
-
[...] Devtought [...]
-
[...] Website : Barackslideshow : Mootools slideshow [...]
-
[...] BarakShow [...]
-
[...] a apărut BarackSlideshow, un script bazat pe MooTools, şi care are o putere mare de generalitate, în sensul că lista ce [...]
-
[...] Ã cette adresse http://devthought.com/wp-content/moogets/BarackSlideshow/demo.html son nom est BarackSlideshow, et oui il s’inspire du site du fameux Barack [...]
[...] BarackSlideshow – 一个简单且拥有漂亮界面的Mootools幻灯片和脚本，有淡入，淡出的效果。该幻灯片被使用在奥巴马的个人网站。通过实施MorphList来部署该应用，而且只需添加30行代码。 查看演示 查看教程 [...]