Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> картинка в новом окне с определёнными параметрами, помогите новичку 
:(
    Опции темы
Johny_03
Дата 3.1.2009, 00:57 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 145
Регистрация: 1.3.2008

Репутация: нет
Всего: нет



Здравствуйте!
У меня следующая задача. Вот часть кода:
Код

<tr>
 <td class="col_1">
 <script>
 function openadd() {
      var win = window.open('big/link_01.jpg','NEW','width=330,height=330');
 }
 </script>
 <a href="javascript:void(0);" onclick="openadd();">
 <img src="link_01.jpg"></a>
 </td>
 <td class="col_2">Характеристика товара
 </td>
</tr>


Таких фрагментов в коде у меня очень много. Картинка (link_01.jpg) загружается маленькая, чтобы не нагружать страницу, т.к. на ней до 20-30 таких картинок. При клике на ней открывается новое окно для просмотра с большой картинкой (big/link_01.jpg).
Мне нужно:
1) добавить кнопку "закрыть" в дополнительном окне ниже картинки (по возможности).
2)чтобы новое окно открывалось по центру экрана (по возможности).
3) как лучше сделать, resize картинки или две отдельных фотки разного размера? Как это реализовать в коде?
4) Возможно ли это всё реализовать в одном скрипте и ставить на него только ссылки (может с помощью классов в css)? Или в каждом таком моменте нужно вставлять непосредственно скрипт полностью?

Я новичок в программировании, просьба по возможности показать в примерах.
Заранее огромное спасибо!

Это сообщение отредактировал(а) Johny_03 - 3.1.2009, 01:00
PM MAIL   Вверх
bars80080
Дата 3.1.2009, 02:00 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315



1. <input type="button" onclick="self.close();" value="close" />
2. большие сомнения что удастся это реализовать (для popup), но покопать можно
3. две картинки. превью малого размера и нормальная. реализация - на серверной стороне, создание дубликата меньшего размера
4. тебе надо передавать в функцию адрес onclick="openadd('big/link_01.jpg');"
Код

 function openadd(x) {
      var win = window.open(x,'NEW','width=330,height=330');
 }
 тогда это будет один скрипт
PM MAIL WWW   Вверх
Johny_03
Дата 3.1.2009, 11:53 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 145
Регистрация: 1.3.2008

Репутация: нет
Всего: нет



Спасибо, получилось, только кнопка "закрыть" в новом окне не появляется. Точнее, когда я вставляю строку <input type="button" onclick="self.close();" value="close" /> в скрипт, то он перестаёт работать вообще. Как его правильно прописать?
Код

<script language="JavaScript1.2" src="js/big_picture.js"></script>
<tr>
  <td class="col_1">Блендер P100
  </td>
  <td class="col_2">Macap, Италия
  </td>
  <td class="col_3">
  <a href="javascript:void(0);" onclick="openadd('big/link_01.jpg');">        
  <img src="link_01.jpg" border=0></a>
  </td>
  <td class="col_4">Характеристика
  </td>
</tr>


так работает, но без кнопки:
Код

function openadd(x) {
     var win = window.open(x,'NEW','width=330,height=330');

}


а так вообще не работает:
Код

function openadd(x) {
     var win = window.open(x,'NEW','width=330,height=330');

}
<input type="button" onclick="self.close();" value="close" />


Это сообщение отредактировал(а) Johny_03 - 3.1.2009, 11:55
PM MAIL   Вверх
Hades
Дата 3.1.2009, 14:14 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 226
Регистрация: 8.8.2008

Репутация: нет
Всего: 37



Цитата(Johny_03 @  2.1.2009,  23:57 Найти цитируемый пост)
2)чтобы новое окно открывалось по центру экрана (по возможности).

window.screen.width, window.screen.height + left, top

немного поизвращался
index.htm
Код

<body>

<script type="text/javascript">
function openadd(image) {
    var width = 330;
    var height = 330;
    var lft = window.screen.width/2 - width/2;
    var tp = window.screen.height/2 - height/2;
    var w = window.open('images.htm', image, 'width=' + width + ',height=' + height + ', left=' + lft + ',top=' + tp);  
}
</script>

<a href="javascript:void(0);" onclick="openadd('link_01');">image_1</a>
<br />
<a href="javascript:void(0);" onclick="openadd('link_02');">image_2</a>

</body>


images.htm
Код

<body>
<img id="image" src="javascript:void(0);" alt="image" />
<br />
<input type="button" onclick="self.close();" value="close" />
<script type="text/javascript">

    if(window.name)
        document.getElementById('image').src = "big/" + window.name + ".jpg";
    else
        document.getElementById('image').src = "big/link_01.jpg";

</script>
</body>


с позиционированием можете ещё поиграться.
PM MAIL   Вверх
bars80080
Дата 3.1.2009, 18:42 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315



а у меня закрывает


п.с. я надеюсь, написано примерно так:

Код

function openadd(x) {
     var win = window.open(x,'NEW','width=330,height=330');

}
</script>
<input type="button" onclick="self.close();" value="close" />
а не как в вашем коде
PM MAIL WWW   Вверх
Johny_03
Дата 4.1.2009, 14:26 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 145
Регистрация: 1.3.2008

Репутация: нет
Всего: нет



bars80080 Если я вставляю кнопку, так как вы написали, то она появляется не в новом окне, а в старом. А когда я строку <input type="button" onclick="self.close();" value="close" /> вставляю внутрь скрипта, то окно вообще не открывается.
                    
Код

<td class="col_3">
<script>
     function openadd(x) {
     var win = window.open(x,'NEW','width=330,height=330');
}
</script>

<input type="button" onclick="self.close();" value="close" />
    <a href="javascript:void(0);" onclick="openadd('picture/tech/bar/big/blender_01.jpg');">        
    <img src="picture/tech/bar/blender_01.jpg" border=0></a>
 </td>



Hades В вашем случае у меня получилось, только не знаю как сделать, чтобы кнопка "закрыть" выравнивалась по центру, а не по левому краю?

Это сообщение отредактировал(а) Johny_03 - 4.1.2009, 15:44
PM MAIL   Вверх
bars80080
Дата 4.1.2009, 15:46 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315



Цитата(Johny_03 @  4.1.2009,  13:26 Найти цитируемый пост)
Если я вставляю кнопку, так как вы написали, то она появляется не в новом окне, а в старом. А когда я строку <input type="button" onclick="self.close();" value="close" /> вставляю внутрь скрипта, то окно вообще не открывается.

знаете, не хочется конечно ругаться, но думать-то немного тоже требуется
наверно, несложно понять, что если засунуть хтмл-разметку внутрь javascript-кода, то ничего путного из этого не выйдет

кнопка должна быть в окне, тут два варианта:
1. написать её туда
2. чтоб она уже была там
первый вариант не буду, ибо не нравится

второй предполагает наличие уже существующей страницы, чему полностью отвечает пример Hades


Цитата(Johny_03 @  4.1.2009,  13:26 Найти цитируемый пост)
В вашем случае у меня не появляется картинка в новом окне, потому что выводит предупреждение о небезопасности, а при попытке закрыть вкладку - выбрасывает из IE7 

это если открывать автономно, если же из-под сервера, то всё должно работать

единственно, посоветовал бы указать полный адрес к открываемой странице
Код

    var w = window.open('http://server.ru/images.htm', image, 'width=' + width + ',height=' + height + ', left=' + lft + ',top=' + tp);  


PM MAIL WWW   Вверх
Hades
Дата 4.1.2009, 16:04 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 226
Регистрация: 8.8.2008

Репутация: нет
Всего: 37



Цитата(Johny_03 @  4.1.2009,  13:26 Найти цитируемый пост)
только не знаю как сделать, чтобы кнопка "закрыть" выравнивалась по центру, а не по левому краю?

Код

<center>
    <input type="button" onclick="self.close();" value="close" />
</center>

PM MAIL   Вверх
Johny_03
Дата 4.1.2009, 17:08 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 145
Регистрация: 1.3.2008

Репутация: нет
Всего: нет



Всем огромное спасибо!
PM MAIL   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.0575 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.