Как вырезать функцию Query
 

Добрый день! Надеюсь тут от IT специалистов получить маленькую помощь если кому то по силам.

Мы захотели в каталог с thumb поставить в <a href>img</a>
такую вот фенечку - http://static.livedemo00.template-he...5/index-1.html - посмотрите что будет, когда навести на каталог мышкой. Я подключила скрипты к сайту с полным адресом -

<script src="js/jquery-1.7.1.min.js"></script>
	<script src="js/script.js"></script>
	<script src="js/jquery.hoverIntent.js"></script>
	<script src="js/superfish.js"></script>
	<script src="js/jquery.responsivemenu.js"></script>
	<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
	<script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
	<script src="js/hover-image.js" type="text/javascript"></script>

На сайте добавила класс к ссылке:

<a class="lightbox-image" href="..url...." ><img src="...images..." alt=""><span></span></a>

А вот только выскакивающей сверху картинки нет.. Я намучалась. Может быть кто-то из вас силен и быстро прочитает исходный код - чтобы понять что к чему. Я не могу.. Сейчас надо это поставить. А яваскрипт я буду учить и узучать, поистине пути явы неисповедимы. Спасибо всем кто не остался равнодушным.

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

Яву тут вобще никто не разжевывает. Java и JavaScript - два разных языка.
По ссылке перешел - там вроде все работает как надо.

Спасибо за ответ, обладатель пикантной аватарки!

Но по ссылке это то чего я хочу добиться! Кроме подключения скриптов и выдачи ссылке класса lightbox-image, что я еще упустила? Может есть скрытый обработчик который посылает срипту что при наведении надо плавно опустить png-шку? ...

вот сайт лайтбокса http://lokeshdhakar.com/projects/lightbox2/
нужно скачать, подключить
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/lightbox.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />
и повесить на ссылки
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

Как же сложно понять женскую просьбу?

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

animhotep - спасибо за активность.


http://cerabox.net/ - тут еще один пример. Но он не эфективен. Как то скучно.. Помогите пожалуйста. Эта тема еще много кому поможет, и будет хорошим вкладом для вашего сайта.

так сразу и нужно было сказать)) за тот эффект отвечает скрипт http://static.livedemo00.template-he...hover-image.js
также css нужно добавить

.lightbox-image span {
		background: url("magnify0.png") no-repeat scroll 50% 50% transparent;
		display: inline-block;
		height: 100%;
		left: 0;
		padding: 0;
		position: absolute;
		top: -100%;
		width: 100%;
		z-index: 2;
	}

это в prettyPh.css

так сразу и нужно было сказать)) за тот эффект отвечает скрипт http://static.livedemo00.template-he...hover-image.js
также css нужно добавить

.lightbox-image span {
		background: url("magnify0.png") no-repeat scroll 50% 50% transparent;
		display: inline-block;
		height: 100%;
		left: 0;
		padding: 0;
		position: absolute;
		top: -100%;
		width: 100%;
		z-index: 2;
	}

это в prettyPh.css[/quote]

Я добавила стили, подключила

http://static.livedemo00.template-he...hover-image.js.

не работает. подключила в дополнение -
http://static.livedemo00.template-he...y-1.7.1.min.js. - при открытии страницы - перебрасывает на гугл. о_О! Удалила - подключила - http://code.jquery.com/jquery-1.7.1.min.js - никакой реакции. span навис над картинкой невидимым. но не спускается при наведении..

нужно смотреть, возможно не правильный путь к картинке с лупой magnify.png

Вот файлик - http://zalil.ru/34403930

Я старалась. Что то упустила - может где то скрытый в css

-webkit-transform ? который в .lightbox-image span регулирует значение - top: -100%;

там не был подключен плагин, отвечающий за анимацию, вот с ним
https://www.dropbox.com/s/9djmkhppas99wyx/test.zip

Всем спасибо, сама же дала себе подсказку. Все решилось без яваскриптов! Дарю аналогичное решение с помощью одного только css:

<body>
	
	<title>test web trans</title>
	<style type="text/css">

.container {position:relative;
		width:200px;
		height:300px;}

.container:hover span {margin-top:0px; }


.zoom {
		width:200px;
		height:300px;
		background: url("img/magnify.png") no-repeat center;
		text-align:center;
		opacity: .9;
		position: absolute;
		top: 0;
		left: 0;
		margin-top: -200px;
		-webkit-transition: margin-top;
		-webkit-transition-timing-function: ease-in;
		-webkit-transition-duration: 250ms; }

</style>


</head>

<body>


<div class="container" >
<a href="#"><img src="img/optimus.jpg"><span class="zoom"></span></a>
</div>
	

</body>

</html>

:dance:

Тема закрыта, себе любимой +1 за Опыт, +1 за убеждение что мужчины мыслят бесповоротно. +1 за смекалку и +1 за просто так)))

animhotep и danik.js получают по +10 балов за составленную компанию. Без вас я бы и не додумалась на результат.

http://javascript.ru/ - отдельное +100 балов, + добавлен в закладки.

Огромное спасибо. одновременно написали ответ. я сравню скорость загрузки и решу что поставить. Спацибааа!!

Беру слова назад! :agree:

можно и без js, только не во всех браузерах будет работать
http://www.w3schools.com/css3/css3_t....asp#gsc.tab=0