Мы советуем регистрировать домены на:

UCOZ DOMAIN

REG.RU

REGGI.RU

IMENA.UA

UKRAINE

RX-NAME



Изображения на jQuery - Форум по uCoz

[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
Страница 1 из 11
Форум по uCoz » Прочее » Дизайн » Изображения на jQuery
Изображения на jQuery
911Дата: Четверг, 12.08.2010, 17:27 | Сообщение # 1
Рядовой
Группа: Заблокированные
Сообщений: 14
Репутация: 0
Статус: Offline
Первый способ:
В CSS вставить следующее:

Code

/* =Hoverbox Code= */

   .hoverbox { cursor: default; list-style: none; }
   .hoverbox a { cursor: default; }
   .hoverbox a .preview { display: none; }
   .hoverbox a:hover .preview { display: block; position: absolute; top: -33px; left: -95px; z-index: 1; }
   .hoverbox img { background: #F8F1DC; border-color: #FFCC66; border-style: solid; border-width: 1px; color: inherit; padding: 2px; vertical-align: top; }
   .hoverbox li { background: #F8F1DC; color: inherit; display: inline; float: left; margin: 3px; padding: 5px; position: relative; }
   .hoverbox .preview { border-color: #FFCC99; }
   /* ----------------- */

[admin]Меняя цветовые значения, можно настроить рамку вокруг картинки под свой дизайн.

.hoverbox a:hover .preview { display: block; position: absolute; top: -33px; left: -95px; z-index: 1; }
- в этой строке настраивается расположение рисунка на странице относительно превью.
[/admin]

А это второй вариант кода, быть может у кого-то не сработает первый

Сам код картинки должен выглядеть вот так:

Code
<ul class="hoverbox">
         <li>
         <a href="#">
         <img src="АДРЕСС КАРТИНКИ ПРЕВЬЮ" border="0" alt="ОПИСАНИЕ" />
         <img class="preview"  src="АДРЕСС ПОЛНОГО ИЗОБРАЖЕНИЯ" border="0" alt="ОПИСАНИЕ" />
         </a>
         </li>
</ul>



Все спасибо в РЕПУтацию!
 
911Дата: Пятница, 13.08.2010, 22:27 | Сообщение # 2
Рядовой
Группа: Заблокированные
Сообщений: 14
Репутация: 0
Статус: Offline
1. Создаём файл imagesize.css

Code
img.expando{
border: none;
vertical-align: bottom;
}

затем подгружаем его:

Code
<link rel="stylesheet" href="ПУТЬ К ФАЙЛУ/imagesize.css" type="text/css" />

2. Создаём файл imagesize.js

Code
if (document.images){
(function(){
var cos, a = /Apple/.test(navigator.vendor), times = a? 20 : 40, speed = a? 40 : 20;
var expConIm = function(im){
im = im || window.event;
if (!expConIm.r.test (im.className))
im = im.target || im.srcElement || null;
if (!im || !expConIm.r.test (im.className))
return;
var e = expConIm,
widthHeight = function(dim){
return dim[0] * cos + dim[1] + 'px';
},
resize = function(){
cos = (1 - Math.cos((e.ims[i].jump / times) * Math.PI)) / 2;
im.style.width = widthHeight (e.ims[i].w);
im.style.height = widthHeight (e.ims[i].h);
if (e.ims[i].d && times > e.ims[i].jump){
++e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
} else if (!e.ims[i].d && e.ims[i].jump > 0){
--e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
}
}, d = document.images, i = d.length - 1;
for (i; i > -1; --i)
if(d[i] == im) break;
i = i + im.src;
if (!e.ims[i]){
im.title = '';
e.ims[i] = {im : new Image(), jump : 0};
e.ims[i].im.onload = function(){
e.ims[i].w = [e.ims[i].im.width - im.width, im.width];
e.ims[i].h = [e.ims[i].im.height - im.height, im.height];
e (im);
};
e.ims[i].im.src = im.src;
return;
}
if (e.ims[i].timer) clearTimeout(e.ims[i].timer);
e.ims[i].d = !e.ims[i].d;
resize ();
};
expConIm.ims = {};
expConIm.r = new RegExp('\\bexpando\\b');
if (document.addEventListener){
document.addEventListener('mouseover', expConIm, false);
document.addEventListener('mouseout', expConIm, false);
}
else if (document.attachEvent){
document.attachEvent('onmouseover', expConIm);
document.attachEvent('onmouseout', expConIm);
}
})();
}

подгружаем:

Code
<script type="text/javascript" src="ПУТЬ К ФАЙЛУ/imagesize.js"></script>

3. Помещаем картинки в любое место на сайте прописав в коде:

Code
<div>
<img class="expando" border="0" src="ПУТЬ К ФАЙЛУ/blue_sky.jpg" width="150" height="110">
<img class="expando" border="0" src="ПУТЬ К ФАЙЛУ/zakat.jpg" width="212" height="160">
<img class="expando" border="0" src="ПУТЬ К ФАЙЛУ/gorod.jpg" width="127" height="86">
</div>

[admin]Размер картинки надо указывать не реальный а тот каким, Вы, хотите видеть его в миниатюре. Например реальный размер картинки blue_sky.jpg 320 x 240 а в коде указан: width="150" height="110"[/admin]


Все спасибо в РЕПУтацию!
 
Форум по uCoz » Прочее » Дизайн » Изображения на jQuery
Страница 1 из 11
Поиск: