Слайдер фотографий пользователя для uCoz[
Скачать с сервера (4.2Kb)
]
Одним интересным и классным готовым решением для сайта uCoz поделилюсь, который совсем недавно переехал с хостинга укоз на другой по причине ссоры с юкозерами и копирайтами. Но
несмотря на все эти негативные вещи, которые происходили с ним в
последнее время он продолжает стараться во благо развития этой системы, а
нам остаётся лишь сказать ему за это спасибо и наслаждаться его
работами. На этот раз мы поговорим об слайдере фотографий пользователя
для uCoz профилей. Возможно, этот материал не станет самым хитом у нас
на портале, но я уверен, что найдутся те вебмастера, которым пригодятся
данные скрипты и html коды. Более подробно смотрите чуть ниже в новости.
Не забываем ставить класс в социальных сетях ;) Основная работа скрипта заключается в том, чтобы вывести слайдер последних картинок
пользователя, когда находимся на странице фотографии и комментариев к
ней. Слайдер будет получять фотографии именно того пользователя, который добавил
материа. Установка: На странице фотографии и комментариев к ней после < /head > вставляйте:
<link rel="stylesheet" href="/css/jQuery.isc.css" type="text/css" media="screen" charset="utf-8">
<script src="/js/jquery-image-scale-carousel-condensed.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="/css/lib.css" type="text/css" media="screen" title="no title" charset="utf-8"> |
Следующий код вставляйте на этой же странице в то место, где хотите видеть слайдер:
| <pre tabindex="5002" style="overflow-y: hidden;"
class="prettyprint"><code><span
class="tag"><fieldset</span><span class="pln">
</span><span class="atn">style</span><span
class="pun">=</span><span
class="atv">"</span><span
class="kwd">width</span><span
class="pun">:</span><span
class="lit">500px</span><span
class="pun">;</span><span
class="kwd">padding</span><span
class="pun">:</span><span
class="lit">20px</span><span
class="pun">;</span><span
class="kwd">border</span><span
class="pun">:</span><span
class="lit">1px</span><span class="pln"> dashed
</span><span class="lit">#aaa</span><span
class="atv">"</span><span
class="tag">></span><span class="pln"> <br>
</span><span class="tag"><legend></span><span
class="pln">Последние фотографии автора $USER$</span><span
class="tag"></legend></span><span class="pln">
<br> </span><span
class="tag"><div</span><span class="pln">
</span><span class="atn">id</span><span
class="pun">=</span><span
class="atv">"ph"</span><span class="pln">
</span><span class="atn">style</span><span
class="pun">=</span><span
class="atv">"</span><span
class="kwd">width</span><span
class="pun">:</span><span
class="lit">500px</span><span
class="pun">;</span><span
class="atv">"</span><span
class="tag">></span><span class="pln"> <br>
</span><span class="tag"><div</span><span
class="pln"> </span><span
class="atn">id</span><span
class="pun">=</span><span
class="atv">"photo_container"</span><span class="pln">
</span><span class="atn">style</span><span
class="pun">=</span><span
class="atv">"</span><span
class="kwd">width</span><span
class="pun">:</span><span
class="lit">500px</span><span
class="pun">;</span><span
class="kwd">height</span><span
class="pun">:</span><span
class="lit">300</span><span
class="pun">;</span><span
class="kwd">overflow</span><span
class="pun">:</span><span
class="pln">hidden</span><span
class="pun">;</span><span
class="atv">"</span><span
class="tag">></div></span><span class="pln">
<br> </span><span
class="tag"></div></span><span class="pln">
<br> </span><span
class="tag"></fieldset></span></code></pre> |
Далее на этой же странице в самый низ после < /body > вставляйте:
| <pre tabindex="5003" style="overflow-y: hidden;"
class="prettyprint"><code><span
class="tag"><script></span><span class="pln">
<br> </span><span class="com">// Слайдер фотографий
пользователя by Apocalypse </span><span
class="pln"><br> $</span><span
class="pun">.</span><span
class="kwd">get</span><span
class="pun">(</span><span
class="str">'/photo/0-1-0-17-$UID$'</span><span
class="pun">,</span><span class="pln">
</span><span class="kwd">function</span><span
class="pun">(</span><span
class="pln">s</span><span
class="pun">)</span><span class="pln">
</span><span class="pun">{</span><span
class="pln"> <br> </span><span
class="kwd">var</span><span class="pln"> carousel_images
</span><span class="pun">=</span><span
class="pln"> </span><span
class="str">''</span><span
class="pun">;</span><span class="pln"> <br>
$</span><span class="pun">(</span><span
class="str">'a.ulightbox'</span><span
class="pun">,</span><span class="pln">
s</span><span class="pun">).</span><span
class="pln">each</span><span
class="pun">(</span><span
class="kwd">function</span><span
class="pun">()</span><span class="pln">
</span><span class="pun">{</span><span
class="pln"> <br> </span><span
class="kwd">if</span><span
class="pun">(</span><span class="pln">carousel_images
</span><span class="pun">==</span><span
class="pln"> </span><span
class="str">''</span><span
class="pun">)</span><span class="pln">
</span><span class="pun">{</span><span
class="pln"> <br> carousel_images </span><span
class="pun">=</span><span class="pln">
$</span><span class="pun">(</span><span
class="kwd">this</span><span
class="pun">).</span><span
class="pln">attr</span><span
class="pun">(</span><span
class="str">'href'</span><span
class="pun">);</span><span class="pln"> <br>
</span><span class="pun">}</span><span
class="pln"> </span><span
class="kwd">else</span><span class="pln">
</span><span class="pun">{</span><span
class="pln"> <br> carousel_images </span><span
class="pun">=</span><span class="pln"> carousel_images
</span><span class="pun">+</span><span
class="pln"> </span><span
class="str">','</span><span class="pln">
</span><span class="pun">+</span><span
class="pln"> $</span><span
class="pun">(</span><span
class="kwd">this</span><span
class="pun">).</span><span
class="pln">attr</span><span
class="pun">(</span><span
class="str">'href'</span><span
class="pun">);</span><span class="pln"> <br>
</span><span class="pun">};</span><span
class="pln"> <br> </span><span
class="pun">});</span><span class="pln"> <br>
carousel_images </span><span
class="pun">=</span><span class="pln">
carousel_images</span><span
class="pun">.</span><span
class="pln">split</span><span
class="pun">(</span><span
class="str">','</span><span
class="pun">);</span><span class="pln"> <br>
setTimeout</span><span class="pun">(</span><span
class="kwd">function</span><span
class="pun">()</span><span class="pln">
</span><span class="pun">{</span><span
class="pln"> <br> $</span><span
class="pun">(</span><span
class="str">"#photo_container"</span><span
class="pun">).</span><span
class="pln">isc</span><span
class="pun">({</span><span
class="pln">imgArray</span><span
class="pun">:</span><span
class="pln">carousel_images</span><span
class="pun">});</span><span class="pln"> <br>
</span><span class="pun">},</span><span
class="pln"> </span><span
class="lit">500</span><span
class="pun">);</span><span class="pln"> <br>
</span><span class="com">// apo-ucoz.com (c) 2013
</span><span class="pln"><br> </span><span
class="pun">});</span><span class="pln"> <br>
</span><span
class="tag"></script></span></code></pre> |
Скрипт из прикреплённого архива залейте в папку js, два стиля в папку css и три картинки в папку images
Для того, чтобы в слайдере было максимальное количество фотографий
пользователя, в ПУ — Фотоальбомы — Настройки модуля для пункта «Количество фотографий на странице в альбоме:» укажите максимальное количество в 50 штук.
Нравится
| 
