Как автоматически добавить изображение лупы(magnifier) для изображений-превью? - Интерфейс - Интересные решения для программистов - Примеры кода

Интерфейс → Как автоматически добавить изображение лупы(magnifier) для изображений-превью? → JavaScript

Для всех изображений завернутыx в тег A и имеющих в атрибуте href путь начинающийся с upload, скрипт создает Div-обертку и перемещает туда изображение.
Также туда добавляется изображение лупы, обернутое в тег A c атрибутами которое открывает всплывающее окно с изображением из атрибуты href. Если у изображения задан align - то контент перестает корректно отображаться, так как изображение уже в div'e, поэтому этот аттрибут удаляем, точнее переносим его значение в свойство float div'a-обертки.

1. Необходимо подключить данный скрипт в шаблонах сайта.
2. Необходимо положить картинку с лупой (желательно прозрачную) в папку /_i/magnifier_16x16.png или подправить путь в скрипте.
3. При надобности подправить стили в коде скрипта
4. Подключить библиотеку JQuery
5. Изображение лупы автоматически подставятся после загрузки страницы

$(element).after($('<div class="magnifier_and_image" style="' +  div_style + 'width:' + div_width + 'px"></div>').append($(element).clone().css('position', 'relative')).append(minifier_a));
            $(element).remove();
            
        }
    );
}

$(
  function(){addMagnifier()}
);

javascript, jquery, magnifier, preview, ЛУПА

KOS_MOS

09.12.2008

Меню

Подписка на RSS:

Подпишись на RSS-ленту

Поиск

Облако тегов

	Интерфейс → Как автоматически добавить изображение лупы(magnifier) для изображений-превью? → JavaScript Для всех изображений завернутыx в тег A и имеющих в атрибуте href путь начинающийся с upload, скрипт создает Div-обертку и перемещает туда изображение. Также туда добавляется изображение лупы, обернутое в тег A c атрибутами которое открывает всплывающее окно с изображением из атрибуты href. Если у изображения задан align - то контент перестает корректно отображаться, так как изображение уже в div'e, поэтому этот аттрибут удаляем, точнее переносим его значение в свойство float div'a-обертки. 1. Необходимо подключить данный скрипт в шаблонах сайта. 2. Необходимо положить картинку с лупой (желательно прозрачную) в папку /_i/magnifier_16x16.png или подправить путь в скрипте. 3. При надобности подправить стили в коде скрипта 4. Подключить библиотеку JQuery 5. Изображение лупы автоматически подставятся после загрузки страницы function addMagnifier() { $('.content a img').each( function() { var div_width = this.offsetWidth + 16; var div_style = ''; //если у изображения задан align - то используем это свойство у div'a-обертки, а из изображения удалим if ($(this).attr('align') != '') { div_style = 'float:' + $(this).attr('align') + '; '; $(this).removeAttr('align'); } var element = $(this).parent(); //если у изображения в href есть "_upload" значит картинка из редактора var imgSrc = element.attr('href'); if (imgSrc.search(/\/_upload\//) == -1) { return; } html = '<a target=_blank href="'+imgSrc+'"><img class="magnifier" src="/_i/magnifier/magnifier_16x16.png" style="position:relative; left:0px; z-index:100; border:none !important; background: none !important; padding: 0px !important;"/></a>'; var minifier_a = $(html); $(minifier_a).bind("click", function() { var wind_img=window.open('',this.target,'width=800,height=600,resizable=1,toolbar=0,location=0,directories=0,status=0,scrollbars=0,menubar=0'); wind_img.focus(); wind_img.document.open(); wind_img.document.write('<html><head><META http-equiv=\'Content-Type\' content=\'text/html; charset=windows-1251\'></head>'); wind_img.document.write('<body leftmargin=0 rightmargin=0 topmargin=0 bottommargin=0 marginwidth=0 marginheight=0><img src='+imgSrc+' border=0 width=800 height=600>'); wind_img.document.write('</body></html>'); wind_img.document.close(); return false; } ); $(element).after($('<div class="magnifier_and_image" style="' + div_style + 'width:' + div_width + 'px"></div>').append($(element).clone().css('position', 'relative')).append(minifier_a)); $(element).remove(); } ); } $( function(){addMagnifier()} ); javascript, jquery, magnifier, preview, ЛУПА KOS_MOS KOS_MOS 09.12.2008 Ваше имя Ваш E-mail (если хотите отслеживать комментарии) Дoкажи, что ты не робот Текст комментария	Меню CodeIgniter Алгоритмы Базы данных Дата и Время Интернет Интерфейс Мультимедиа ОС и Железо Работа с текстом Разное Технологии Файлы Подписка на RSS: Подпишись на RSS-ленту Поиск Облако тегов .net array asp bash browser charset check class clean convert count create css curl database date delete directory download element email equivalent extension file find form format function get height html http ie image javascript jquery load mysql number page perl php random scriplet send shell size sql string text time url utf8 variable vb visual basic width window xml xslt