Примеры использования Highslide JS
Официальная страница maxSite CMS плагина «Highslide» здесь. Далее примеры кода для использования плагина:
HTML
Одиночная картинка:
<a href="http://site/uploads/image1-mini.jpg" title="Название" class="highslide" onclick="return hs.expand(this)"><img src="http://site/uploads/image1.jpg" alt=""></a>
Несколько изображений в одной галерее:
<div class="highslide-gallery"> <a href="http://site/uploads/image1-mini.jpg" class="highslide" onclick="return hs.expand(this)"><img src="http://site/uploads/image1.jpg" alt=""></a> <div class="highslide-caption">Название image1.jpg</div> <a href="http://site/uploads/image2-mini.jpg" class="highslide" onclick="return hs.expand(this)"><img src="http://site/uploads/image2.jpg" alt=""></a> <div class="highslide-caption">Название image2.jpg</div> <a href="http://site/uploads/image3-mini.jpg" class="highslide" onclick="return hs.expand(this)"><img src="http://site/uploads/image3.jpg" alt=""></a> </div>
Несколько галерей на странице:
<div class="highslide-gallery"> <a href="http://site/uploads/image1-mini.jpg" class="highslide" onclick="return hs.expand(this,{slideshowGroup:'group1'})"><img src="http://site/uploads/image1.jpg" alt=""></a> <a href="http://site/uploads/image2-mini.jpg" class="highslide" onclick="return hs.expand(this,{slideshowGroup:'group1'})"><img src="http://site/uploads/image2.jpg" alt=""></a> <a href="http://site/uploads/image3-mini.jpg" class="highslide" onclick="return hs.expand(this,{slideshowGroup:'group1'})"><img src="http://site/uploads/image3.jpg" alt=""></a> </div> <div class="highslide-gallery"> <a href="http://site/uploads/image4-mini.jpg" class="highslide" onclick="return hs.expand(this,{slideshowGroup:'group2'})"><img src="http://site/uploads/image4.jpg" alt=""></a> <a href="http://site/uploads/image5-mini.jpg" class="highslide" onclick="return hs.expand(this,{slideshowGroup:'group2'})"><img src="http://site/uploads/image5.jpg" alt=""></a> <a href="http://site/uploads/image6-mini.jpg" class="highslide" onclick="return hs.expand(this,{slideshowGroup:'group2'})"><img src="http://site/uploads/image6.jpg" alt=""></a> </div>
Галерея со скрытой частью:
<div class="highslide-gallery"> <a href="http://site/uploads/image1-mini.jpg" class="highslide" onclick="return hs.expand(this)"><img src="http://site/uploads/image1.jpg" alt=""></a> <div class="hidden-container"> <a href="http://site/uploads/image2-mini.jpg" class="highslide" onclick="return hs.expand(this)"><img src="http://site/uploads/image2.jpg" alt=""></a> <a href="http://site/uploads/image3-mini.jpg" class="highslide" onclick="return hs.expand(this)"><img src="http://site/uploads/image3.jpg" alt=""></a> </div> </div>
BBCODE
Одиночная картинка:
[image=http://site/uploads/image1-mini.jpg Картинка1]http://site/uploads/image1.jpg[/image] [image=http://site/uploads/image1-mini.jpg]http://site/uploads/image1.jpg[/image] [image]http://site/uploads/image1.jpg[/image]
Одиночная картинка + класс для изображения (в скобках)
[image(left)=http://site/uploads/image1-mini.jpg Картинка1]http://site/uploads/image1.jpg[/image] [image(right)=http://site/uploads/image1-mini.jpg]http://site/uploads/image1.jpg[/image] [image(myCSSclass)]http://site/uploads/image1.jpg[/image]
Несколько изображений в одной галерее:
[gallery] [gal=http://site/uploads/image1-mini.jpg Картинка1]http://site/uploads/image1.jpg[/gal] [gal=http://site/uploads/image2-mini.jpg Картинка2]http://site/uploads/image2.jpg[/gal] [gal=http://site/uploads/image3-mini.jpg Картинка3]http://site/uploads/image3.jpg[/gal] [/gallery]
или с явными заголовками у картинок
[gallery] [gal=http://site/uploads/image1-mini.jpg]http://site/uploads/image1.jpg[/gal] [galname]Название image1.jpg[/galname] [gal=http://site/uploads/image2-mini.jpg]http://site/uploads/image2.jpg[/gal] [galname]Название image2.jpg[/galname] [gal=http://site/uploads/image3-mini.jpg]http://site/uploads/image3.jpg[/gal] [galname]Название image3.jpg[/galname] [/gallery]
Несколько галерей на одной странице:
[gallery=name1] [gal... [/gallery] [gallery=name2] [gal... [/gallery]
Галерея со скрытой частью:
[gallery] [gal=http://site/uploads/image1-mini.jpg Картинка1]http://site/uploads/image1.jpg[/gal] [hidegal] [gal=http://site/uploads/image2-mini.jpg Картинка2]http://site/uploads/image2.jpg[/gal] [gal=http://site/uploads/image3-mini.jpg Картинка3]http://site/uploads/image3.jpg[/gal] [/hidegal] [/gallery]
Приветствую, Илья. Вот в этой строчке:
- опечатка в ссылке: пропущена буква в url
Александр, спасибо, поправил!