увеличение картинок по нажатию.

***** · 07.07.2006, 17:42

очень прошу помочь.
необходимо в контент выводить картинки до 5 штук. при нажатии на какую-либо из них, она должна показываться чуть ниже в увеличенном варианте.
была написана функция на js. в html это выглядит вот так
<html>
<head>
<script language="JavaScript">
function image_viewer(divid, imgname)
{
var img = document.getElementById(divid);
img.src = imgname;
img.style.display = "";
}
</script>
</head>
<body>
<form id="theform" name="theform">
<a href="javascript:image_viewer('theimg', '2423_full.jpg')"><img src='2423_full.jpg' width="150"></a>
<div id="thediv">
<img style="display:none" src="" id="theimg"></img>
</div>
</form>
</body>
</html>

довольно просто. проблема состоит в том, чтобы
1. выводить картинки в ссылках (думаю, если очень поискать, то можно найти записи для setup, которые будут оборачивать картинки в ссылки)
2. самое главное, что если сделать пункт 1, то получится, что такая процедура будет производиться со всеми картинками на сайте, а мне надо только с определенными
(уменьшенные изображения моделей мебели. должны увеличиваться соответственно)
советовали писать свой новый модуль, но у меня на это крайне мало времени и пока что опыта.
помогите, если знаете как.
спасибо.

void · 07.07.2006, 19:18

Как я понимаю, вам нужно, чтобы увеличивались только картинки внутри определенного div'a
Что мешает найти этот div через document.getElementById
var div=document.getElementById('mydiv'),
найти в нем картинки
var images = div.getElementsByTagName("IMG");
а затем каждой приписать свой onClick
for (i=0;i<images.length;i++)
{
images.onClick = function ()
{
тут допишите..
}
}

***** · 07.07.2006, 20:47

Понимаете, в чем еще проблема.
когда типа уменьшает картинку, она кидеат ее в папку typo3temp/pics/
и меняет ее название, а сами оригиналы лежат в uploads. так что когда вы достанете img из дива, там будут не те пути, что нужно.
у меня уже крыша едет от всего этого. вроде бы все просто, а реализовать никак не получается.

void · 07.07.2006, 22:51

Хм... лучше написать свой плагин, возможно...
Или же помудрить с tt_content.image.20.1 (посмотрите в TypoScript Object Browser)

Pavel Antonov · 07.07.2006, 23:50

Цитата:

Сообщение от *****

Понимаете, в чем еще проблема.
когда типа уменьшает картинку, она кидеат ее в папку typo3temp/pics/
и меняет ее название, а сами оригиналы лежат в uploads. так что когда вы достанете img из дива, там будут не те пути, что нужно.
у меня уже крыша едет от всего этого. вроде бы все просто, а реализовать никак не получается.

Это не проблема...а состояние дел. Где проблема то?

Нужна картинка в таге <img /> используйте IMAGE, нужна ссылка на картинку - используйте IMG_RESOURCE и подставляйте в свой <a href="javascript..."> правельные пути. Нужно увеличеную и маленькую версию - тоже не проблема, вызовите два раза!

***** · 09.07.2006, 17:26

Да. нужна ссылка на картинку. то есть ее оригинал в uploads. подскажите, как с помощью IMG_RESOURCE в функцию передать путь к картинке.
на данный момент в setup написано
10 = IMAGE
10{
file{
import = uploads/pics/
import.current = 1
width.field = imagewidth
height.field = imageheight
maxW = {$styles.content.imgtext.maxW}
maxW.override.data = register:maxImageWidth
}
linkWrap = <a href="javascript:image_viewer()"> | </a>
wrap = | <br>
}

но пока это не работает, так как в функцию ничего не передается.

***** · 10.07.2006, 20:54

ну поделитесь опытом хоть кто-нибудь.

Pavel Antonov · 11.07.2006, 00:19

Например так:

Код:

lib.img_with_popup = COA
lib.img_with_popup {
  10 = IMG_RESOURCE
  10 {
     file {
       import = uploads/pics/
       import.current = 1
     }
     stdWrap.wrap = <a href="javascript:image_viewer(|)">
  }

  20 = IMAGE
  20{
    file{
      import = uploads/pics/
      import.current = 1
      width.field = imagewidth
      height.field = imageheight
      maxW = {$styles.content.imgtext.maxW}
      maxW.override.data = register:maxImageWidth  
    }                      
  }
  
  wrap = |</a><br>
}

***** · 11.07.2006, 17:24

большое вам спасибо. все заработало.
а разделить ссылку - это вы хорошо придумали

спасибо еще раз.

Pavel Antonov · 12.07.2006, 12:27

"крылья, ноги.... главное мозг!"

07.07.2006, 17:42	#1
***** Новенький Регистрация: 15.06.2006 Сообщений: 20	увеличение картинок по нажатию. очень прошу помочь. необходимо в контент выводить картинки до 5 штук. при нажатии на какую-либо из них, она должна показываться чуть ниже в увеличенном варианте. была написана функция на js. в html это выглядит вот так <html> <head> <script language="JavaScript"> function image_viewer(divid, imgname) { var img = document.getElementById(divid); img.src = imgname; img.style.display = ""; } </script> </head> <body> <form id="theform" name="theform"> <a href="javascript:image_viewer('theimg', '2423_full.jpg')"><img src='2423_full.jpg' width="150"></a> <div id="thediv"> <img style="display:none" src="" id="theimg"></img> </div> </form> </body> </html> довольно просто. проблема состоит в том, чтобы 1. выводить картинки в ссылках (думаю, если очень поискать, то можно найти записи для setup, которые будут оборачивать картинки в ссылки) 2. самое главное, что если сделать пункт 1, то получится, что такая процедура будет производиться со всеми картинками на сайте, а мне надо только с определенными (уменьшенные изображения моделей мебели. должны увеличиваться соответственно) советовали писать свой новый модуль, но у меня на это крайне мало времени и пока что опыта. помогите, если знаете как. спасибо.

07.07.2006, 19:18	#2
void Senior Member Регистрация: 14.03.2006 Адрес: Russia, Penza Сообщений: 1,504	Как я понимаю, вам нужно, чтобы увеличивались только картинки внутри определенного div'a Что мешает найти этот div через document.getElementById var div=document.getElementById('mydiv'), найти в нем картинки var images = div.getElementsByTagName("IMG"); а затем каждой приписать свой onClick for (i=0;i<images.length;i++) { images.onClick = function () { тут допишите.. } } __________________ TYPO3 FAQ

07.07.2006, 22:51	#4
void Senior Member Регистрация: 14.03.2006 Адрес: Russia, Penza Сообщений: 1,504	Хм... лучше написать свой плагин, возможно... Или же помудрить с tt_content.image.20.1 (посмотрите в TypoScript Object Browser) __________________ TYPO3 FAQ

12.07.2006, 12:27	#10
Pavel Antonov Senior Member Регистрация: 01.10.2004 Адрес: Россия, Москва Сообщений: 1,204	"крылья, ноги.... главное мозг!" __________________ Павел Антонов Rich Media Development Ltd. Блог: http://codeline.richmd.ru/

Опции темы
Версия для печати Отправить по электронной почте
Опции просмотра
Линейный вид Комбинированный вид Древовидный вид

07.07.2006, 20:47	#3
***** Новенький Регистрация: 15.06.2006 Сообщений: 20	Понимаете, в чем еще проблема. когда типа уменьшает картинку, она кидеат ее в папку typo3temp/pics/ и меняет ее название, а сами оригиналы лежат в uploads. так что когда вы достанете img из дива, там будут не те пути, что нужно. у меня уже крыша едет от всего этого. вроде бы все просто, а реализовать никак не получается.

09.07.2006, 17:26	#6
***** Новенький Регистрация: 15.06.2006 Сообщений: 20	Да. нужна ссылка на картинку. то есть ее оригинал в uploads. подскажите, как с помощью IMG_RESOURCE в функцию передать путь к картинке. на данный момент в setup написано 10 = IMAGE 10{ file{ import = uploads/pics/ import.current = 1 width.field = imagewidth height.field = imageheight maxW = {$styles.content.imgtext.maxW} maxW.override.data = register:maxImageWidth } linkWrap = <a href="javascript:image_viewer()"> \| </a> wrap = \| <br> } но пока это не работает, так как в функцию ничего не передается.

10.07.2006, 20:54	#7
***** Новенький Регистрация: 15.06.2006 Сообщений: 20	ну поделитесь опытом хоть кто-нибудь.

11.07.2006, 17:24	#9
***** Новенький Регистрация: 15.06.2006 Сообщений: 20	большое вам спасибо. все заработало. а разделить ссылку - это вы хорошо придумали спасибо еще раз.