Увеличение картинки в категориях при клике (для Album)
Автор статьи SHAKA1
Делаем красивое увеличение картинки при клике + controlbar, используя бесплатный java_!_sctipt Highslide
Пример: Album
На слаеде, кто-то продавал, как прикрутить этот скрипт Highslide к модулю Album, но мы попробуем сэкономить 10$ и прикрутим сами
1. Копируем содержимое архива
2. Открываем файл modules/Album/public/displayCategory.php
заменяем
| Код | 1
| function displayPictureGall($filetype, $gid, $pid, $thumbwidth, $galloc, $name, $img, $orderby) { |
на
| Код | 1
| function displayPictureGall($description, $filetype, $gid, $pid, $thumbwidth, $galloc, $name, $img, $orderby) { |
заменяем
| Код | 1
| $template = str_replace('<:IMAGE:>', displayPictureGall($row[filetype], $row[gid], $row[pid], $crow[thumbwidth], $crow[galloc], $row[name], $row[img], convertorderbyout($orderby)), $template); |
на
| Код | 1
2
3
4
| //--------------------highslide
$description = $row[description];
$template = str_replace('<:IMAGE:>', displayPictureGall($description, $row[filetype], $row[gid], $row[pid], $crow[thumbwidth], $crow[galloc], $row[name], $row[img], convertorderbyout($orderby)), $template);
//--------------------highslide |
заменяем
| Код | 1
2
3
4
| if ($filetype == 1) {
return "<a href=\"index.php?name=Album&file=index&do=showpic&pid=$pid&orderby=$orderby\">"
."<img src=\"$thumb\" width=\"$thumbwidth\" alt=\"".underscoreTospace($name)."\" border=\"0\" align=\"MIDDLE\">"
.'</a> '.$out; |
на
| Код | 1
2
3
4
5
6
7
| //-----------------------------highslide
if ($filetype == 1) {
return "<a href=\"$image\" class=\"highslide\" onclick=\"return hs.expand(this)\">"
."<img src=\"$thumb\" width=\"$thumbwidth\" alt=\"".underscoreTospace($name)."\" title=\"$description\" border=\"0\" align=\"MIDDLE\">"
."</a><br><a href=\"index.php?name=Album&file=index&do=showpic&pid=$pid&orderby=$orderby\">Подробнее..."
.'</a> '.$out;
//-----------------------------highslide |
после
| Код | 1
2
| galleryHeader();
OpenTable(); |
вставляем
| Код | 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| //--------------------highslide
echo "<link rel=\"stylesheet\" href=\"highslide/style-album.css\" type=\"text/css\">";
echo "<script type=\"text/javascript\" src=\"highslide/highslide.js\"></script>";
echo <<<HTML
<script type="text/javascript">
// remove the registerOverlay call to disable the controlbar
hs.registerOverlay(
{
thumbnailId: null,
overlayId: 'controlbar',
position: 'top right',
hideOnMouseOut: true
}
);
hs.graphicsDir = '/highslide/highslide/graphics/';
hs.outlineType = 'rounded-white';
// Tell Highslide to use the thumbnail's title for captions
hs.captionEval = 'this.thumb.title';
</script>
HTML;
//--------------------highslide |
перед!!
| Код | 1
2
| CloseTable();
list($numstories) = $db->sql_fetchrow($db->sql_query("SELECT Count(pid) FROM ".$prefix."_album_pictures WHERE gid='$gid'")); |
вставляем
| Код | 1
2
3
4
5
6
7
8
9
10
11
| //--------------------highslide
echo <<<HTML
<div id="controlbar" class="highslide-overlay controlbar">
<a href="#" class="previous" onclick="return hs.previous(this)" title="Previous (left arrow key)"></a>
<a href="#" class="next" onclick="return hs.next(this)" title="Next (right arrow key)"></a>
<a href="#" class="highslide-move" onclick="return false" title="Click and drag to move"></a>
<a href="#" class="close" onclick="return hs.close(this)" title="Close"></a>
</div>
</div>
HTML;
//--------------------highslide |
3. Все настройки (текст в левом углу, скорость открытия, прозрачность и т.д и т.п) находятся в файле highslide/highslide.js
4. Стили меняем в файле highslide/style-album.css
Дата публикации: 10.04.2008
Прочитано: 14547 раз |
