Модераторы: Sardar, Aliance

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> jquery открыть окно и сделать картинку по меньше.. 
V
    Опции темы
gcc
Дата 19.8.2010, 13:22 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Агент алкомафии
****


Профиль
Группа: Участник
Сообщений: 2691
Регистрация: 25.4.2008
Где: %&й

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



сейчас есть

Код

<script language=javascript> 
<!-- 
function openpict(pict) 
{ 
window.open(pict,"none","top=100, left=100, width=800, height=500, resizable=0","replace=yes") 
} 
//--> 
</script>



проблема, что в опере показывается картинка в очень большой размере... а в firefox с начало в меньком, а тобы было в большом надо нажать на мышкой


и еще: можно ли сделать чтобы, когда нажать на превью картинки, чтобы открылось окно (так как тут window.open) и там была картинка не в очень большой разрешении, например,  800x500, а когад еще раз нажать чтобы оно становилось в полном размере 1000x1000 (примерно)

 т.е. когда нажимать в окне на картинку, чтобы оно уменьшалось до 800x500 или становилось больше в максимальное разрешение? 

как это сделать? в jquery обработчик навесить как-то можно?

что надо написать в google чтобы это найти?











Это сообщение отредактировал(а) gcc - 19.8.2010, 13:27
PM WWW ICQ Skype GTalk Jabber   Вверх
gcc
Дата 19.8.2010, 20:22 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Агент алкомафии
****


Профиль
Группа: Участник
Сообщений: 2691
Регистрация: 25.4.2008
Где: %&й

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



а как менять расширение картинки в этом окне при щелчке?

это реально вообще?
PM WWW ICQ Skype GTalk Jabber   Вверх
Amphiluke
Дата 19.8.2010, 20:33 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

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



Не уверен, что в точности понял, что вам конкретно нужно. Зачем менять расширение картинки? И что это вообще значит? Было image.jpg, а потом стало image.gif? Так что-ли?
Вы когда вызываете метод open, то в первом параметре передаете ему адрес непосредственно изображения или какого-то документа, в котором это изображение вставлено? В любом случае, метод open возвращает ссылку на открытое окно, с помощью которой вы можете получить доступ к содержимому документа в новом окне. Так же получайте доступ к атрибутам изображения — через ссылку на открытое окно.

Добавлено через 1 минуту и 7 секунд
Ну и обработчики событий (click) можно «навешать» на картинку, пользуясь ссылкой, которую вернул метод open.
PM   Вверх
gcc
Дата 19.8.2010, 20:47 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Агент алкомафии
****


Профиль
Группа: Участник
Сообщений: 2691
Регистрация: 25.4.2008
Где: %&й

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



Цитата(Amphiluke @ 19.8.2010,  20:33)
Не уверен, что в точности понял, что вам конкретно нужно. Зачем менять расширение картинки? И что это вообще значит? Было image.jpg, а потом стало image.gif? Так что-ли?


есть фотографии очень большого расширения... но не все

нужно закачать их на сервер

1) есть превью, маленькое на ней ничего не видно...
2) на превью когда нажать то появится картинка очень и очень большая, где ничего не видно, тоже
2.а) на opere появляется больая, а на firefox нормальная, можно нажать и она уменьшится или увеличится...
  желательно, нужно  сделать так как на firefox, чтобы появлялась картинка не такая большая, а средняя...
3) т.е. тут можно чтобы нажать на превью, и чтобы появилось окно как в window.open( и чтобы там была картинка среднняя (примерно 800х600), а если еще раз нажать, то чтобы она больше стало на все 100%...

Добавлено @ 20:48
Цитата(Amphiluke @ 19.8.2010,  20:33)

Ну и обработчики событий (click) можно «навешать» на картинку, пользуясь ссылкой, которую вернул метод open.

а есть ли примеры?

я в гугле не нашел ничего...

как в данном случае навешать?

Это сообщение отредактировал(а) gcc - 19.8.2010, 20:50
PM WWW ICQ Skype GTalk Jabber   Вверх
gcc
Дата 19.8.2010, 21:02 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Агент алкомафии
****


Профиль
Группа: Участник
Сообщений: 2691
Регистрация: 25.4.2008
Где: %&й

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



или как сделать, чтобы при щелчке на картинке в окне заменить саму картинку ...window.open(pict,... ?
PM WWW ICQ Skype GTalk Jabber   Вверх
Amphiluke
Дата 19.8.2010, 21:20 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

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



Это пример. Дальнейшее преобразование должно быть очевидным.
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.4.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#imglink").click(function() {
            var wnd = window.open("menu.gif", "none", "top=100,left=100,width=800,height=500,resizable=0");
            $(wnd.document).ready(function() {
                $(wnd.document).find("img").click(function() {
                    $(this).css("width", "50px");
                });
            });
            
        });
    });
</script>
</head>

<body>
    <p><a href="#" id="imglink">open image</a></p>
</body>
</html>


Добавлено через 3 минуты и 22 секунды
Естественно, что размеры картинки можно уменьшить сразу после загрузки документа в новом окне. Нужно показывать, как? Или из примера уже понятно?
PM   Вверх
gcc
Дата 19.8.2010, 22:20 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Агент алкомафии
****


Профиль
Группа: Участник
Сообщений: 2691
Регистрация: 25.4.2008
Где: %&й

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



спасибо, но я когда нажимаю (кликаю) ТРЕТИЙ раз, оно не уменьшает, уже...

можно ли это исправить?

http://x0.org.ua/test-js/index.html


Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#imglink").click(function() {
            var wnd = window.open("or_353_2.jpg", "none", "top=100,left=100,width=800,height=500,resizable=0");
       
            $(wnd.document).find("img").css("width", "800px");
            $(wnd.document).find("img").css("height", "600px");

          var clik = 1;    

            $(wnd.document).ready(function() {
                $(wnd.document).find("img").click(function() {
             
        if (clik == 1) {
        clik = 0;
          var wnd = window.open("or_353_2.jpg", "none", "top=100,left=100,width=100%,height=100%,resizable=0");


        } else {
        
        clik = 1;        
            $(this).css("width", "800px");
            $(this).css("height", "600px");
            

        }
           
              
                });
            });
            
        });
    });
</script>
</head>
<body>
    <p><a href="#" id="imglink">open image</a></p>
</body>
</html>


Это сообщение отредактировал(а) gcc - 19.8.2010, 22:36
PM WWW ICQ Skype GTalk Jabber   Вверх
Amphiluke
Дата 19.8.2010, 22:44 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

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



Что-то я вообще пока что смысла не догоняю… smile 
Зачем открывать второе вспывающее окно? Непонятны манипуляции с переменной clik.
PM   Вверх
gcc
Дата 19.8.2010, 22:56 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Агент алкомафии
****


Профиль
Группа: Участник
Сообщений: 2691
Регистрация: 25.4.2008
Где: %&й

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



Цитата(Amphiluke @ 19.8.2010,  22:44)
Что-то я вообще пока что смысла не догоняю… smile 
Зачем открывать второе вспывающее окно? Непонятны манипуляции с переменной clik.

второе окно я открыл, потому что в одном и том же окне размер не хочет менятся...

если сделать его 800 на 600, то оно потом увеличтватся не хочет (хотя может я что-то перепутал)

Добавлено через 1 минуту и 57 секунд
1 раз разширение 800 на 600, я сохраняю clik = 1
2 раз, когда кликаю, максимальное разширение, и сохраняю clik =0 

а как это по другому сделать?
PM WWW ICQ Skype GTalk Jabber   Вверх
Amphiluke
Дата 19.8.2010, 23:11 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

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



ИМХО, можно обойтись без посторонних переменных. smile
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.4.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#imglink").click(function() {
            var wnd = window.open("menu.gif", "none", "top=100,left=100,width=800,height=500,resizable=0");
            $(wnd.document).ready(function() {
                $(wnd.document).find("img").click(function() {
                    var currWidth = $(this).get(0).offsetWidth;
                    var newWidth = (currWidth > 800) ? "800px" : "1000px";
                    var newHeight = (currWidth > 800) ? "500px" : "1000px";
                    $(this).css("width", newWidth);
                    $(this).css("height", newHeight);
                });
            });
        });
    });
</script>
</head>

<body>
    <p><a href="#" id="imglink">open image</a></p>
</body>
</html>


Добавлено @ 23:14
«Без посторонних» — имеется в виду, без переменных вне обработчика.

Это сообщение отредактировал(а) Amphiluke - 19.8.2010, 23:15
PM   Вверх
gcc
Дата 20.8.2010, 00:23 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Агент алкомафии
****


Профиль
Группа: Участник
Сообщений: 2691
Регистрация: 25.4.2008
Где: %&й

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



Amphiluke, спасибо большое!

может кому-то пригодиться, демо: http://x0.org.ua/test-js/index.html


=========

остаточный вариант:
(мне такой больше подходит, чтобы не переделывать весь сайт)

Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script type="text/javascript">



        
function openpict(pict) {        
        
            var wnd = window.open( pict, "none", "top=100,left=100,width=800,height=500,resizable=0,scrollbars=yes,status=yes");
                
             var currWidth_start = $(wnd.document).find("img").get(0).offsetWidth;
             var currHeight_start = $(wnd.document).find("img").get(0).offsetHeight;
                     
             
            $(wnd.document).find("img").css("width", "800px");
            $(wnd.document).find("img").css("height", "500px");            
            
            $(wnd.document).ready(function() {
                $(wnd.document).find("img").click(function() {
                    var currWidth = $(this).get(0).offsetWidth;
                    var newWidth = (currWidth > 801) ? "800px" : currWidth_start;
                    var newHeight = (currWidth > 801) ? "500px" : currHeight_start;
                    
                    $(this).css("width", newWidth);
                    $(this).css("height", newHeight);
                });
            });
}
  
  
</script>
</head>

<body>
    <p><a href="javascript:openpict('or_353_2.jpg')" id="imglink">open image</a></p>
</body>
</html>


Это сообщение отредактировал(а) gcc - 20.8.2010, 00:24
PM WWW ICQ Skype GTalk Jabber   Вверх
gcc
Дата 20.8.2010, 12:34 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Агент алкомафии
****


Профиль
Группа: Участник
Сообщений: 2691
Регистрация: 25.4.2008
Где: %&й

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



есть проблема, что это почему-то не работает

Код

    <p><a href="#" id="imglink">open image</a></p>


Код

<a href=\"\" id=\"imglink\"><img width=\"100\" src=\"$foto\" alt=\"$name\" ></a>


обработчки почему-то не вешается на  id="imglink" видимо на странице очень много глюков...

я поставил так:

Код

<a href=\"javascript:openpict('upload/or_".$id."_1.jpg')\"><img width=\"100\" src=\"$foto\" alt=\"$name\" ></a>



иногда картинка не ставится с первого раза в 800x500 и щелчки не работают -  в опере 

можно ли как-то максимально жестко задать разрешение 800x500?
обработчки почему-то не всегда вешается... по непонятным причинам...

Добавлено @ 12:35
я не думал что с этими картинка будет такая проблема, что лучше застрелится...   smile 

Это сообщение отредактировал(а) gcc - 20.8.2010, 12:47
PM WWW ICQ Skype GTalk Jabber   Вверх
Amphiluke
Дата 20.8.2010, 13:06 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

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



Цитата(gcc @  20.8.2010,  16:34 Найти цитируемый пост)
обработчки почему-то не всегда вешается... по непонятным причинам...

Я, кажется, тоже замечал. Но не в Opera, а в FF и Chrome (и только в них). Почему-то функция ready там порой срабатывает слишком быстро, и $(wnd.document).find("img") получается равным null. Вы же после открытия окна вообще не дожидаетесь готовности DOM, а сразу ищете и уменьшаете картинку. У меня на текущий момент сейчас вариант используется такой:
Код

    $(document).ready(function() {
        $("#imglink").click(function() {
            var wnd = window.open("menu.gif", "none", "top=100,left=100,width=800,height=500,resizable=0");
            $(wnd.document).ready(function() {
                $(wnd.document).find("img").css("width", "800px").css("height", "500px");
                $(wnd.document).find("img").click(function() {
                    var currWidth = $(this).get(0).offsetWidth;
                    var newWidth = (currWidth > 801) ? "800px" : "1000px";
                    var newHeight = (currWidth > 801) ? "500px" : "1000px";
                    $(this).css("width", newWidth);
                    $(this).css("height", newHeight);
                });
            });
        });
    });

То есть все работы с картинкой «впихнуты» в ready().
Впрочем, как я уже говорил, в FF ready() срабатывает почему-то слишком резво, это решается, например, так:  smile 
Код

    $(document).ready(function() {
        $("#imglink").click(function() {
            var wnd = window.open("menu.gif", "none", "top=100,left=100,width=800,height=500,resizable=0");
            $(wnd.document).ready(function() {
                setTimeout(function() {
                    $(wnd.document).find("img").css("width", "800px").css("height", "500px");
                    $(wnd.document).find("img").click(function() {
                        var currWidth = $(this).get(0).offsetWidth;
                        var newWidth = (currWidth > 801) ? "800px" : "1000px";
                        var newHeight = (currWidth > 801) ? "500px" : "1000px";
                        $(this).css("width", newWidth);
                        $(this).css("height", newHeight);
                    });
                }, 0);
            });
        });
    });



Цитата(gcc @  20.8.2010,  16:34 Найти цитируемый пост)
можно ли как-то максимально жестко задать разрешение 800x500?

Можно, но только без JQuery. На «чистом» Javascript. 
PM   Вверх
gcc
Дата 20.8.2010, 16:38 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Агент алкомафии
****


Профиль
Группа: Участник
Сообщений: 2691
Регистрация: 25.4.2008
Где: %&й

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



Amphiluke, работает, спасибо...

но теперь по-моиму не работает на самой новой опере 10.6, не уменьшает картинку... у Вас ее нету, посмотрите, пожалуйста, у Вас, тоже, не уменьшает? можно ли это испраивть?  

Это сообщение отредактировал(а) gcc - 20.8.2010, 16:40
PM WWW ICQ Skype GTalk Jabber   Вверх
Amphiluke
Дата 20.8.2010, 16:57 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

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



У меня нет Opera 10.6. В моей старушке O-9.63 работает. smile

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


 




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


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

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