Не получается изменить стандартные действия ссылки
Доброго времени суток. Хочу сделать маленький слайд шоу. В ссылки поместил миниатюры картинок элементов img, далее в href ссылки поставил ссылку на большую картинку. В общем коротко говоря смысл такой, есть большой экран(блок div), в низу него расположены миниатюры картинок обвернутые ссылками, по нажатию на миниатюру, в большом экране должна появится большая картинка. Так вот, я сделал событие клик, сделал что бы по нажатию на миниатюру, заставка на экране пряталась, затем меняется атрибут src на атрибут href ссылки, т.е. таким образом на большом экране должна загрузится ссылка на большую картинку, так вот, нажимаю по миниатюре, а она открывает большую картинку в новом окне. Я пробовал воздействовать на объект события (e.preventDefault()), не помогает, затем сделал return false; тоже не помогло. Все равно срабатывает стандартное действие ссылки. Вот код:
<div id="small"> <a href="images/gal/1.jpg"><img src="images/gal/1_mini.jpg" alt="Миниатюра 1" /></a> <a href="images/gal/2.jpg"><img src="images/gal/2_mini.jpg" alt="Миниатюра 2" /></a> <a href="images/gal/3.jpg"><img src="images/gal/3_mini.jpg" alt="Миниатюра 3" /></a> <a href="images/gal/4.jpg"><img src="images/gal/4_mini.jpg" alt="Миниатюра 4" /></a> </div>
$(document).ready(function () {
$('#small a').click(function(eventObject){
$('#big img').hide().attr('src',$(this).attr('href'));
$('#big img').load(function() {
$(this).fadeIn(1000);
}); //end load
eventObject.preventDefault();
}); //end click
}); //end ready
|
Dolphin,
jquery не загружено или $ уже нет, и незачем назначать load бесконечно, строки 6-8 перенесите в строку 2. |
Сама библиотека jQuery подключена? Судя по всему ваш JS скрипт не отрабатывает а тупа вы переходите по ссылке.
$('#small > a').click(function ( e ) {
$('#big img')
.hide()
.attr({ 'src' : e.target.href })
.load(function ( e ) {
$( e.target ).fadeIn( 1000 );
});
return false;
});
|
Рони, спасибо за ответ. Я сделал ваши рекомендации, перенес строки 6-8 на строку 2, но не помогло.
|
dd_smol,
библиотека подключена, <head> <meta charset="utf-8" /> <title>Курс по Javascript</title> <link href="css/mystyle.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/events/scr.js"></script> </head> Версия библиотеки такая: /*! jQuery v3.1.0 | (c) jQuery Foundation | jquery.org/license */ пойдет? |
dd_smol,
если убираю load, то при нажатии на ссылку не открывается новое окно, но в месте с этим не грузится большая в большой экран. Т.е. по нажатию ссылки тупо не чего не происходит. |
Действительно проблема в load ...
jQuery(function ( $ ) {
$('#small a').click(function ( e ) {
$('#big img')
.hide()
.attr('src', this.href)
.fadeIn('slow');
return false;
});
});
|
Dolphin,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(function() {
$("#big img").on("load", function() {
$(this).fadeIn(1000)
});
$("#small a").on("click", function(event) {
event.preventDefault()
$("#big img").hide().prop("src", $(this).attr("href"));
})
});
</script>
</head>
<body> <div id="big"><img src="" alt=""></div>
<div id="small">
<a href="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif"><img src="images/gal/1_mini.jpg" alt="Миниатюра 1" /></a>
<a href="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif"><img src="images/gal/2_mini.jpg" alt="Миниатюра 2" /></a>
<a href="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif"><img src="images/gal/3_mini.jpg" alt="Миниатюра 3" /></a>
<a href="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif"><img src="images/gal/4_mini.jpg" alt="Миниатюра 4" /></a>
</div>
</body>
</html>
|
Во что значит по ночам не спать ... в начали надо событие создать а уж потом им пользоваться. :)
Подумал немного можно намутить таких каких нибудь костылей.
jQuery(function () {
$('#small a').click(function ( e ) {
var img = $('#big img');
img
.hide()
.one('load', function ( e ) {
$( this ).fadeIn('slow');
})
.attr('src', this.href)[ 0 ].complete && img.trigger('load')
return false;
});
});
|
рони, dd_smol
Все ваши варианты работают отлично! Спасибо Вам большое! С Вашей помщью я узнал еще варианты по решению данной задачи :thanks: :thanks: :) |
| Часовой пояс GMT +3, время: 07:56. |