X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Увеличение изображения по клику (jquery )
InviS
InviS
Topic Starter сообщение 19.2.2010, 13:12; Ответить: InviS
Сообщение #1


Подскажите, пожалуйста. Не получается работать с динамически созданным элементом.
Код:
<html>
    <style type = 'text/css'>
        #LoadImage{
            display: none;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
    <head>
        <script type='text/javascript' src='jquery-1.4.1.min.js'></script>
        <script type='text/javascript'>
            $(document).ready(function(){
            
                $("#SlideShow").click(function(){
                    var src = $(this).attr("alt");
                    var myImage = new Image();
                    myImage.src = src;

                    var Width = document.body.clientWidth;
                    var Height = document.body.clientHeight;
                    var Left = (Width - myImage.width) / 2;
                    var Top = (Height - myImage.height) / 2;

                    $(this).after("<img src='"+src+"' id='LoadImage' />");
                    $("#LoadImage").css({"left" : Left, "top" : Top,"display" : "block"}).fadeIn("slow");
                });
                
                $("#LoadImage").click(function(){
                    alert("aslkjd");
                    $(this).hide("slow");
                });
            });
        </script>
    </head>
    <body>
        <center><img id='SlideShow' src='thumb/01.jpg' alt='img/01.jpg' title='Увеличение по клику' /></center>
    </body>
</html>


1) $("#LoadImage").click() категорически не хочет работать... Что делать?
2) Почему при первом нажатии на маленькую картинку большая появляется непонятно где (правее и ниже, чем нужно)?
Пример тут: http://www.invis.emaxihost.com/galery/preview.html
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ZhukV
ZhukV
сообщение 19.2.2010, 15:46; Ответить: ZhukV
Сообщение #2


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

вот примерно так:
$('<div id="123"><img src="asjhdakjd.jpg"></div>').appendTo('#321');


Почему так, я совсем вехать не могу. Но все же работает!!!
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ZhukV
ZhukV
сообщение 19.2.2010, 15:48; Ответить: ZhukV
Сообщение #3


И все же лучше те её сначала прогрузить хтмл, а на яве просто показывать. Просто у меня туповата скорость, и сидеть ждать, пока грузанется картинка, просто отвратительно.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
InviS
InviS
Topic Starter сообщение 19.2.2010, 18:09; Ответить: InviS
Сообщение #4


Спасибо, попробую вечером так, как ты написал, но я решил пойти другим путем. Мне показалось, что более правильным... Изображение одно и то же, увеличивается до размеров оригинала по щелчку, а по повторному щелчку возвращается на место.
Вот, что получилось: http://www.invis.emaxihost.com/galery/zoom.html
Код можно глянуть там. Как вы считаете, верен ли такой путь? Просто Я не знал, куда девать лишние контейнеры при возвращении изображения на исходное место.

Теперь возникла другая проблема: как узнать координаты начального изображения, чтоб возвращать именно на его исходное место... или как иначе это делать?

ZhukV, уже изменил начало выполнения скрипта с метода $(document).ready() на $(window).load() :) Чтоб выполнение jquery начиналось после подгрузки всех изображений :) это все лишь сырые исходники, и то, что меня сейчас интересует :) Ничего коммерческого, - знаний маловато =)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ZhukV
ZhukV
сообщение 20.2.2010, 2:16; Ответить: ZhukV
Сообщение #5


$(document).ready() на $(window).load() :) Чтоб выполнение jquery начиналось после подгрузки всех изображений :)

Это тоже верно, но те нужно учитывать, что может быть, что картинка будет долго грузится, тоесть пользователь, кликнув на определенную кнопку получить огромный ФЛАГ В РУКИ. В таком случае, на мой взгляд, нужно использовать прелоадер.

display: none;
position: absolute;
top: 0;
left: 0;


Стиль прописан не плохо, но не нужно указыать display: none, на некотором осле, посто не покажет картинку, посколки стоит тип типа "скрытый", лучше просто функцией jQuery('#123').animate({width:300px}), и так далее просто изменить стиль картинки!!!
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
InviS
InviS
Topic Starter сообщение 20.2.2010, 3:07; Ответить: InviS
Сообщение #6


Все переверстал на использование оригинальных изображений - без уменьшенных копий. Насколько эффективно еще не знаю. Также еще колеблюсь с прелоадом. Естественно, если на сайте будет куча графического контента, то будет использован прелоад, но пока что именно для тебя с инетом сделал так =)

Кстати, до сих пор не знаю как организовать прелоад в IE... не хочет работать и все... ;( Везде все идеально, кроме IE 6.0 Постоянно подгружает изображения по
<script type='text/javascript'>
            var ImgArray = Array(img_array);
    var img = Array();
    for (i=0;i<ImgArray.length; i++){
        img[i] = new Image();
        img[i].src = ImgArray[i];
            }
</script>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ZhukV
ZhukV
сообщение 20.2.2010, 3:13; Ответить: ZhukV
Сообщение #7


Я к примеру использую прелоадер по "тупому":

Для начала просто прописываю контент с прелоадером:
<div id="preload"><img src="123.jpg"></div>


Далее сам контент, котрый скрыт подпрелоадером, но с стилем дисплей:ноне

<div id="con" style="display:none">
CONTENT
</div>

Этот код означает, что даный контент буде скрыт.
Сразу после контента, пишеш код, чтобы его открыть, поскольку он уже прогрузился (ЗНАЙ, ВСЕ ЧТО ТЫ ПРОПИСАЛ В ХТМЛ ПОДГРУЖАЕТСЯ В ТОМ ПОРЯДКЕ, В КОТОРМ ТЫ УУКАЗАЛ!!!)

jQuery('#preload').remove()// delete preload
jQuery('#con').show()//show your content
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
InviS
InviS
Topic Starter сообщение 20.2.2010, 4:17; Ответить: InviS
Сообщение #8


Очень "жесткий" прелоад :D И что, реально работает в IE 6.0?
В опере, хроме и ФФ работает и человеческий прелоад... А IE перед загрузкой динамической картинки постоянно запрашивает с сервера изображение...
Я так понял, что это прелоад изображений, явно прописанный? А если пользователю не нужны все изображения? как в галерее, к примеру? Вообще тема ппц, или я тупой... Не пойму что не так в IE... Сжечь его нужно)))
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ZhukV
ZhukV
сообщение 20.2.2010, 4:29; Ответить: ZhukV
Сообщение #9


Насколько знаю, работает везде, порсто нужно для себя выставить дизайн, и т.д. Картинка тоже должна мало весить, чтоб пользователь не видел типа пустой блок и напись "Изображение"
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ZhukV
ZhukV
сообщение 20.2.2010, 4:31; Ответить: ZhukV
Сообщение #10


В опере, хроме и ФФ работает и человеческий прелоад...

Какой это?
Я очкнь много видел прелоадеров на слоях, но для меня это полно ФУФЛО, если ты используеш на сайте куча слоев, ЗАВАЛ!!!
Да я так, не мой взгляд, лучше пред загрузкой скрыть, а после загрузки показать.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыВерстка/Натяжка/Оптимизация/Увеличение функционала шаблонов на WP
Разработка на профессиональном уровне
144 Gerga 91675 11.3.2024, 19:59
автор: anchous
Открытая тема (нет новых ответов) Услуги по созданию и доработке скриптов PHP, MySQL, JavaScript, jQuery
Разработка сайтов и сервисов под-ключ
0 alexey 1170 24.11.2023, 14:46
автор: alexey
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыВеб-разработка (HTML5, CSS3, JavaScript, jQuery, Ajax, PHP)
56 qpPeW 44765 19.7.2023, 10:03
автор: qpPeW
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыОтдам 2 лендинга: летающие рыбы, увеличение груди
5 kolua 2348 11.2.2020, 19:03
автор: webcreators
Открытая тема (нет новых ответов) Грамотная внутренняя SEO оптимизация, увеличение конверсии продаж
23 Black_Mag 13236 15.9.2019, 16:14
автор: chelsea1994


 



RSS Текстовая версия Сейчас: 29.3.2024, 5:18
Дизайн