Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Применение библиотек > jquery открыть окно и сделать картинку по меньше..

Автор: gcc 19.8.2010, 13:22

сейчас есть

Код


<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, 20:22

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

это реально вообще?

Автор: Amphiluke 19.8.2010, 20:33

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

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

Автор: gcc 19.8.2010, 20:47

Цитата(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, 21:02

или как сделать, чтобы при щелчке на картинке в окне заменить саму картинку ...window.open(pict,... ?

Автор: Amphiluke 19.8.2010, 21:20

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

Код


<!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 секунды
Естественно, что размеры картинки можно уменьшить сразу после загрузки документа в новом окне. Нужно показывать, как? Или из примера уже понятно?

Автор: gcc 19.8.2010, 22:20

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

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

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>

Автор: Amphiluke 19.8.2010, 22:44

Что-то я вообще пока что смысла не догоняю… smile

Зачем открывать второе вспывающее окно? Непонятны манипуляции с переменной clik.

Автор: gcc 19.8.2010, 22:56

Цитата(Amphiluke @ 19.8.2010, 22:44)

Что-то я вообще пока что смысла не догоняю… smile

Зачем открывать второе вспывающее окно? Непонятны манипуляции с переменной clik.

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

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

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

а как это по другому сделать?

Автор: Amphiluke 19.8.2010, 23:11

ИМХО, можно обойтись без посторонних переменных. 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
«Без посторонних» — имеется в виду, без переменных вне обработчика.

Автор: gcc 20.8.2010, 00:23

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, 12:34

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

Код


    <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

Автор: Amphiluke 20.8.2010, 13:06

Цитата(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.

Автор: gcc 20.8.2010, 16:38

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

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

Автор: Amphiluke 20.8.2010, 16:57

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

Добавлено через 1 минуту и 14 секунд
А http://x0.org.ua/test-js/index.html у вас ничего не поменялось.

Автор: gcc 23.8.2010, 17:43

остаточный вариант, по другому никак

Код


<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script type="text/javascript">
        


function openpict(pict,pict_medium) {   



var opera = 0;
if (window.navigator.userAgent.indexOf ("Opera") >= 0) {

    opera = 1;

}


            var wnd = window.open( ( opera > 0 ? "upload/medium_"+pict_medium : pict ), "none", "top=100,left=100,width=800,height=500,scrollbars=yes,resizable=0");
       
           // $(wnd.document).find("img").css("width", "800px");
           // $(wnd.document).find("img").css("height", "600px");

          var clik = 1;    

            $(wnd.document).ready(function() {
            

   setTimeout(function() {            
            
                $(wnd.document).click(function() {
 
            // wnd.close();

        if (clik == 1) {
        clik = 0;
         
//    $(wnd.document).animate({opacity: "show", top: "800"}, "slow");                 
         
        $(wnd.document).find("img").attr('src', pict_medium).animate({opacity: "show", top: "800"}, "slow");


        //   $(wnd.document).find("img").append("<span>sdfsdf</span>");         
        //   $(wnd.document).window.open("or_390_3.jpg", "none", "top=100,left=100,width=100%,height=100%,resizable=0");

//    $(wnd.document).animate({opacity: "show", top: "800"}, "slow");        

        } else {


//    $(wnd.document).animate({opacity: "show", top: "800"}, "slow");        




                 $(wnd.document).find("img").attr('src', ( opera > 0 ? "medium_"+pict_medium : pict ) ).animate({opacity: "show", top: "800"}, "slow")

//    $(wnd.document).animate({opacity: "show", top: "800"}, "slow");        
    
       //   $(wnd.document).find("img").attr('title', 'or_390_3.jpg');
       //  $(wnd.document).window.open("or_390_1.jpg", "none", "top=100,left=100,width=800,height=500,resizable=0");


    
        clik = 1;        

          //  $(this).css("width", "800px");
         //   $(this).css("height", "600px");
            

        }
           
              
                });
                
                
 }, 2000);                
                
            });
            
       
    
        
    }
</script>