<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Cyrill &#187; ALA</title>
	<atom:link href="http://cyrill.co.uk/tag/ala/feed/" rel="self" type="application/rss+xml" />
	<link>http://cyrill.co.uk</link>
	<description>Чувак с пассатижами / sux, bugs &#38; plug ‘n’ play</description>
	<lastBuildDate>Sun, 01 Nov 2009 11:53:40 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.5</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Как построить картинную галерею без единого гвоздя?</title>
		<link>http://cyrill.co.uk/2008/01/15/pure-css-dhtml-javascript-galleries/</link>
		<comments>http://cyrill.co.uk/2008/01/15/pure-css-dhtml-javascript-galleries/#comments</comments>
		<pubDate>Tue, 15 Jan 2008 14:20:20 +0000</pubDate>
		<dc:creator>Cyrill</dc:creator>
				<category><![CDATA[photo]]></category>
		<category><![CDATA[web]]></category>
		<category><![CDATA[Дизайн информации]]></category>
		<category><![CDATA[Интерфейсы и юзабилити]]></category>
		<category><![CDATA[adobe]]></category>
		<category><![CDATA[AJAX]]></category>
		<category><![CDATA[ALA]]></category>
		<category><![CDATA[DHTML]]></category>
		<category><![CDATA[галарея]]></category>
		<category><![CDATA[fishup]]></category>
		<category><![CDATA[flash]]></category>
		<category><![CDATA[flickr]]></category>
		<category><![CDATA[fotki]]></category>
		<category><![CDATA[FrogJS]]></category>
		<category><![CDATA[hoverbox]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[imago]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[javascript gallery]]></category>
		<category><![CDATA[lightbox]]></category>
		<category><![CDATA[mootools]]></category>
		<category><![CDATA[narod.ru]]></category>
		<category><![CDATA[picasa]]></category>
		<category><![CDATA[spry]]></category>
		<category><![CDATA[suckerfish]]></category>

		<guid isPermaLink="false">http://cyrill.co.uk/2008/01/15/pure-css-dhtml-javascript-galleries/</guid>
		<description><![CDATA[Допустим, вы &#8211; крутой фотограф. Или крутой художник. Или, в конце-концов, купили по дешевке хорошую зеркальную камеру с большим объективом ™ и хотите выложить свои фотографии в интернет на обозрение публики. Тут два варианта: либо у вас уже есть правильный хостинг, либо его у вас еще нет =)  Если нет &#8211; ваш путь лежит [...]


No related posts.]]></description>
			<content:encoded><![CDATA[<p>Допустим, вы &#8211; крутой фотограф. Или крутой художник. Или, в конце-концов, купили по дешевке хорошую зеркальную камеру с <em>большим объективом </em>™ и хотите выложить свои фотографии в интернет на обозрение публики. Тут два варианта: либо у вас уже есть <a href="http://cyrill.co.uk/2007/12/23/where-to-host-for-less-then-100bucks-a-year/" title="Хостинг [Реклама]">правильный хостинг</a>, либо его у вас еще нет =)  Если нет &#8211; ваш путь лежит на всякие разные фотосайты, <a href="http://www.fotki.com/" title="Fotki" target="_blank">fotki</a>, <a href="http://www.flickr.com/" title="Flickr" target="_blank">flickr</a> и прочие <a href="http://picasaweb.google.ru/home" title="Picasa" target="_blank">picasa</a>. если говорить про чужой хостинг, мне лично нравится <a href="http://www.fishup.ru" title="фишап" target="_blank">fishup</a>, правда там есть ряд ограничений в бесплатном аккаунте.</p>
<p>Если у вас есть хостинг, можно попробовать разместить собственную галерею: тут от выбора начинают разбегаться глаза, поскольку вариантов технической реализации -уйма. Тут и масса phpMy*-style <a href="http://www.google.ru/search?aq=f&amp;complete=1&amp;hl=ru&amp;q=php+gallery" title="Фотогалерея на php: google" target="_blank">галерей</a>, надстроек к различным форумным движкам, наконец &#8211; галерей, построенных при помощи Flash. PHP, как средство построения, хорош всем, за исключением необходимости поддержки его на хостинге (что, правда, уже весьма распространено) и, галереи, построенные на PHP как правило требуют наличия базы MySQL, что немного сложнее. С другой стороны, flash-галереи можно кидать где угодно, но требуется знание ActionScript. Кроме того, не всегда возможно отредактировать исходник &#8211; например, если автор не распространяет *.fla файл в составе галереи.</p>
<p>Выход из ситуации &#8211; CSS/DHTML/Javascript &#8211; эта связка не требует серверной поддержки, и, на мой взгляд, значительно более изящна чем все вышеперечисленные. Огромный плюс всех перечисленных решений &#8211; они все <strong>значительно </strong>красивее галерей, которые предлагает, например, <a href="http://www.narod.ru" title="narod.ru">narod.ru</a>. Поэтому, имея фотографии на народ.ру, достаточно использовать любой из перечисленных ниже скриптов, чтобы заиметь <em>действительно красивую</em> фотогалерею. Проблема у такого подхода всего одна: <em>совсем старые</em> браузеры могут некорректно отображать или вовсе не отображать вашу галерею. Но таких браузеров, к счастью, уже не так много =</p>
<p>Впрочем, к делу: вашему вниманию обзор ряда фотогалерей и сопутствующих решений, построенных на CSS/DHTML/Javascript. Да, чуть не забыл: превьюшки для галерей, скорее всего, придется генерить самостоятельно <img src='http://cyrill.co.uk/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> </p>
<p>1. <a href="http://www.huddletogether.com/projects/lightbox2/" title="Lightbox 2" target="_blank">Lightbox 2</a><br />
Ненавязчивый скриптик, позволяющий отображать картинки поверх открытой страницы. Поддерживает серии изображений и крайне прост в использовании. Простота, помимо всего, открывает широкие горизонты для доработчиков напильником, позволяя интегрировать скрипт в более сложные проекты.<br />
<img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/01/lightbox.jpg" alt="Lightbox 2" /></p>
<p>2.  <a href="http://codeboje.de/imago/" target="_blank" title="Imago">Imago</a><br />
Скрипт галереи, построенный на mootools. Умеет показывать картинки как из папки на сервере, так и с Flickr. Как утверждает автор, его миссия &#8211; сделать простую в использовании, но достаточно хорошо настраиваемую галерею.<br />
<img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/01/imago.jpg" alt="Imago" /></p>
<p>3. <a href="http://labs.adobe.com/technologies/spry/demos/pe_gallery.html" target="_blank" title="Spry Photo Gallery">Adobe Spry Photo Gallery</a><br />
С удивлением для себя обнаружил очередной AJAX-фреймворк &#8211; <a href="http://labs.adobe.com/technologies/spry/home.html" target="_blank" title="Adobe Spry AJAX framework">Adobe Spry</a>. Подозреваю, что он &#8211; тема для отдельного обзора, но сейчас имею предложить вниманию читателя фотогалерею, построенную с помощью этого фреймворка. Судя по всему, это не самый простой путь, но возможности открывает достаточно широкие. Взгляните сами:<br />
<img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/01/spry.jpg" alt="Spry photo gallery" /></p>
<p>Под катом &#8211; еще пять вариантов <strong>фотогалереи без применения PHP</strong> или любого другого серверного языка =)</p>
<p><span id="more-31"></span></p>
<p>4. <a href="http://www.puidokas.com/portfolio/frogjs/" target="_blank" title="FrogJS">FrogJS</a><br />
Вы занимаетесь репортажной съемкой? Никаких проблем =)  Сосредоточьтесь на выборе фототехники, а оформление фотоисторий доверьте FrogJS &#8211; эта библиотека идеально подходит для тех, кто хочет показывать постраничные репортажи. Очень просто устанавливается, поддерживает изображения любых размеров, и, по заверению автора умеет работать даже с выключенным javascript. Проверено со следующими браузерами:</p>
<ul>
<li>Internet Explorer 6</li>
<li>Internet Explorer 7</li>
<li>Firefox 2.0</li>
<li>Safari 2.0</li>
<li>Opera 9.1</li>
</ul>
<p><img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/01/frogjs.jpg" alt="FrogJS" /></p>
<p>5. <a href="http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html" title="jQuery slideViewer">jQuery slideViewer<br />
</a>Плагин для jQuery, позволяющий строить галерею с прокруткой из единственного немаркированного списка html:<br />
<code>&lt;div id="mygalleryinpost10.12.2006" class="svw"&gt;<br />
&lt;ul&gt;<br />
&lt;li&gt;&lt;img src="picts/10.jpg" alt="my description for this image" /&gt;&lt;/li&gt;<br />
&lt;li&gt;&lt;img src="picts/08.jpg" alt="this is my dog..." /&gt;&lt;/li&gt;<br />
&lt;li&gt;&lt;img src="picts/03.jpg" alt="my dog eating the cat" /&gt;&lt;/li&gt;<br />
&lt;li&gt;&lt;img src="picts/05.jpg" alt="my r/c helicopter crashing..." /&gt;&lt;/li&gt;<br />
&lt;!--etcetera--&gt;<br />
&lt;/ul&gt;<br />
&lt;/div&gt;</code></p>
<p><img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/01/jq-slidevewr.jpg" alt="jQuery slideViewer" /></p>
<p>6. <a href="http://smoothgallery.jondesign.net/showcase/gallery/" title="JonDesign's SmoothGallery" target="_blank">JonDesign&#8217;s smoothgallery</a></p>
<p>Навороченная надстройка над mootools: умеет показывать наборы галерей, слайд-шоу и прочие прелести. При этом достаточно симпатично выглядит и имеет возможность настройки переходов между изображениями. Как и предыдущие, использует семантически правильный html для форматирования.<br />
<img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/01/jondesign.jpg" alt="JonDesign’s smoothgallery" /></p>
<p>7. <a href="http://mondaybynoon.com/2006/03/27/suckerfish-hoverlightbox/" target="_blank" title="Suckerfish HoverLightbox">Suckerfish HoverLightbox</a><br />
Смотрелка, построенная на меню <a href="http://www.alistapart.com/articles/dropdowns/" title="Suckerfish dropdowns" target="_blank">Suckerfish</a>, описанных на <a href="http://www.alistapart.com/" title="A list apart" target="_blank">ALA</a> и галерее <a href="http://sonspring.com/journal/hoverbox-image-gallery">Hoverbox Image Gallery</a> написанной Натаном Смитом из <a href="http://www.sonspring.com/">SonSpring</a>. О hoverbox речь ниже, а пока &#8211; Suckerfish HoverLightbox:<br />
<img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/01/suckerfish.jpg" alt="Sockerfish HoverLightbox" /></p>
<p>Выпадающие меню из картинок &#8211; это круто. А когда еще и перекат (hover) есть и работает, как показано на скриншоте &#8211; это совсем круто <img src='http://cyrill.co.uk/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' />  Традиционно, используется семантическая разметка, имеется возможность использования при выключенном javascript.</p>
<p>8. <a href="http://sonspring.com/journal/hoverbox-image-gallery" target="_blank" title="Hoverbox Image Gallery">Hoverbox  Image Gallery</a></p>
<p>Одна из самых пожилых галерей подобного рода &#8211; на нее ссылается масса источников и, что интереснее, многие описанные здесь скрипты навеяла авторам именно эта разработка. Кроссбраузерность, как следствие, на высоте. Традиционно, семантически правильный html внутри и великолепный вид снаружи.</p>
<p><img src="http://wp2.cyrill.co.uk/wp-content/uploads/2008/01/hoverbox.jpg" alt="Hoverbox" /></p>
<p><img src="http://dev.cyrill.co.uk/__test/cyrill-co-uk-pure-js-dhtml-galleries.gif" alt="oops" height="1" width="1" /></p>
<p><a href="http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html" title="jQuery slideViewer"></a></p>


<p>No related posts.</p>]]></content:encoded>
			<wfw:commentRss>http://cyrill.co.uk/2008/01/15/pure-css-dhtml-javascript-galleries/feed/</wfw:commentRss>
		<slash:comments>27</slash:comments>
		</item>
	</channel>
</rss>
