Реализация скрипта на произвольной (дополнительной) странице

[Blackgeneral]

Необходимо реализовать скрипт увеличения картинки. Например этот. Подскажите, пожалуйста, что и где нужно прописывать? Версия лего 6.1

[Blackgeneral]

Здесь нет ничего сложного.
Нужно только как то идентифицировать ваши картинки которые нужно увеличить, что бы обработать их
$("a img").hover(function() {....
А скрипт кидаете в файл js какой у вас подключается и всё.

Я Очень слабо (на уровне азов) знаком с PHP. Вам не трудно будет пояснить более подробно?

[Heisenberg]

А тут php и не пахнет. Все в Ваших руках и работа с шаблонами(html  и js).
Всего лишь добавить своим картинкам class="img". И...
ЗЫ: кстати класс можно "придобавить" через пробел, пример: <div class="my_style img">...</div>
соответственно:
 .my_style {тут стиль блока}
 .img {другой стиль или дополнение}
ЗЫ/зы/ главное что бы стили не "переплетались"(не было накладок), иначе будет использоваться стиль: либо последний прописанный(по иерархии), либо из js взятый.

PS/ Если речь идет о подробном описании товара, пробуйте заменить class="current" на class="img". Ну и с родительскими вложениями и их классами поработать)).

[Blackgeneral]

В head.tpl.html прописал скрипт:

Код: [Выделить]

<script type="text/javascript" src="./css/css_gen/javascript/jquery.min.js"></script>
Сам скрипт (приложен ниже) положил в папку с темой: ваш_сайт/css/css_gen/javascript/

На созданной странице прописал:

Код: [Выделить]

<div class="img" id="zoom_1">
<img src="./css/css_gen/image/fasad_1.jpg" />
<img src="./css/css_gen/image/fasad_2.jpg" />
<img src="./css/css_gen/image/fasad_3.jpg" />
<img src="./css/css_gen/image/fasad_4.jpg" />
</div>
В итоге получил на странице изображение первой картинки  и все. Подскажите, пожалуйста, где я накосячил?

[Heisenberg]

тут же все расписано, что и как..
jquery.min.js брать не нужно, библиотека jquery уже есть(в скрипте магазина).
нужно взять этот код,  и попробовать вставить до</body>(в конец index.tpl.html):

Код: [Выделить]

<script type="text/javascript">
    $(document).ready(function() {
        var cont_left = $("#cont_img").position().left;
        $("#cont_img a img").hover(function() {
            // hover in
            $(this).parent().parent().css("z-index", 1);
            $(this).animate({
               height: "250",
               width: "250",
               left: "-=50",
               top: "-=50"
            }, "fast");
        }, function() {
            // hover out
            $(this).parent().parent().css("z-index", 0);
            $(this).animate({
                height: "150",
                width: "150",
                left: "+=50",
               top: "+=50"
            }, "fast");
        });
       
        $(".img").each(function(index) {
            var left = (index * 160) + cont_left;
            $(this).css("left", left + "px");
        });
    });
    </script>код на странице:

Код: [Выделить]

<div id="cont_img">
<div class="img">
<a href="#"><img src="./css/css_gen/image/fasad_1.jpg" /></a>
</div>
<div class="img">
<a href="#"><img src="./css/css_gen/image/fasad_2.jpg" /></a>
</div>
<div class="img">
<a href="#"><img src="./css/css_gen/image/fasad_3.jpg" /></a>
</div>
<div class="img end">
<a href="#"><img src="./css/css_gen/image/fasad_4.jpg" /></a>
</div>
<div class="clear"></div>
</div>в css, для примера:

Код: [Выделить]

#cont_img {
text-align: center;
position: absolute;
left: 260px;
margin-top: 150px;
width: 790px;
}
.img {
position: fixed;
z-index: 0;
}
.end {
margin-right: 0;
}
.clear {
clear: both;
}
.img a img {
position: relative;
border: 0 solid #fff;
}
с css, конечно, импровизировать, пример взят с демо.

[Blackgeneral]

тут же все расписано, что и как..
jquery.min.js брать не нужно, библиотека jquery уже есть(в скрипте магазина).
нужно взять этот код,  и попробовать вставить до</body>(в конец index.tpl.html):

Попробовал по Вашему совету вставить - получил чистую страницу. Не совсем  понимаю, зачем скрипт ставить

(в конец index.tpl.html):

, если для этого есть папка javascript в теме?

Проблем не может быть из-за того, что все это делается на денвере?

[Blackgeneral]

Воспользовавшись рекомендациями Heisenberg и немного их переработав получил следующее:

1. Скрипт (прикреплен ниже), остался в папке с темой: ваш_сайт/css/css_gen/javascript/ исправил одну неточность из-за которой скорее всего скрипт не работал - убрал в начале и в конце <script></script>.

2. На странице оставил следующий код:

Код: [Выделить]

<div class="img" id="cont_img">
<a href="#"><img src="./css/css_gen/image/fasad_1.jpg" /></a>

<a href="#"><img src="./css/css_gen/image/fasad_2.jpg" /></a>

<a href="#"><img src="./css/css_gen/image/fasad_3.jpg" /></a>

<a href="#"><img src="./css/css_gen/image/fasad_4.jpg" /></a>
<div class="clear">&nbsp;</div>
</div>

3. В head.tpl.html прописал скрипт:

Код: [Выделить]

<script type="text/javascript" src="./css/css_gen/javascript/jquery.min.js"></script>
4. В stylesheet.css прописано:

Код: [Выделить]

#cont_img {
text-align: center;
position: absolute;
left: 40px;
margin-top: 50px;
width: 90px;
}
.img {
position: fixed;
z-index: 0;
}
.end {
margin-right: 0;
}
.clear {
clear: both;
}
.img a img {
position: relative;
border: 0 solid #fff;
}В итоге получаю:
1. На экране появляется первая картинка в натуральную величину (см. скрин_1), после наведения на которую она сжимается в миниатюру и "проявляется" вторая картинка" (скрин_2).
2. Таким образом на экране после трех движений мыши получаю три миниатюры в столбик (хотя, по-идее, должны быть в линию) - см. скрин_3.

Отсюда несколько вопросов:
1. Как сделать так, чтобы картинки изначально были в миниатюре, а не в исходном размере?
2. Как расположить из в строку (линию)?
3. Как сделать расстояние между картинками в строке?

[Heisenberg]

Попробовал по Вашему совету вставить - получил чистую страницу.

возможно js нужно было заключить в {literal}, типо:

Код: [Выделить]

<script type="text/javascript">{literal}...{/literal}</script>

Не совсем  понимаю, зачем скрипт ставить в конец index.tpl.html, если для этого есть папка javascript в теме?

да не вопрос.. кому как удобно. если уменьшить вес(размер) страницы, можно в отдельный файл запихнуть. если для быстроты загрузки страницы, в тело <body> в самый низ, то есть js будет выполнен после загрузки страницы.

На странице оставил следующий код:....

Как расположить из в строку (линию)?

сравните с моим.

Как сделать так, чтобы картинки изначально были в миниатюре, а не в исходном размере?

можно так: <img src="..." alt="..." width="100" />

Как сделать расстояние между картинками в строке?

опять же, сравните с моим кодом. и всё станет на места свои.

[Blackgeneral]

возможно js нужно было заключить в {literal}

Это не помогло. Когда нчал  разбираться, то заметил, что проглядел строку:

Код: [Выделить]

.img {
position: fixed;
}Именно поэтому  картинки изначально "уходили" вниз под футер.  После итогового исправления в stylesheet.css

Код: [Выделить]

#cont_img {
text-align: center;
margin: auto;
left: 340px;
margin-bottom: 70px;
margin: 20px;
width: 90px;
}
.img {
position: absolute;
z-index: 0;
}
.end {
margin-right: 0;
}
.clear {
clear: both;
}
.img a img {

border: 0 solid #fff;
}
И в коде страницы:

Код: [Выделить]

<div id="cont_img">
<div class="img">
<a href="#"><img alt="Изображение" height="100" src="./css/css_gen/image/fasad_1.jpg" title="Изображение" width="100" /></a></div>
<div class="img">
<a href="#"><img alt="Изображение" height="100" src="./css/css_gen/image/fasad_2.jpg" title="Изображение" width="100" /></a></div>
<div class="img">
<a href="#"><img alt="Изображение" height="100" src="./css/css_gen/image/fasad_3.jpg" title="Изображение" width="100" /></a></div>
<div class="img end">
<a href="#"><img alt="Изображение" height="100" src="./css/css_gen/image/fasad_4.jpg" title="Изображение" width="100" /></a></div>
<div class="clear">
&nbsp;</div>
</div>

все встало на свои места ))

Heisenberg - благодарю за помощь!!! )))