Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.09.2016, 08:45
Новичок на форуме
Отправить личное сообщение для Dolphin Посмотреть профиль Найти все сообщения от Dolphin
 
Регистрация: 20.09.2016
Сообщений: 5

Не получается изменить стандартные действия ссылки
Доброго времени суток. Хочу сделать маленький слайд шоу. В ссылки поместил миниатюры картинок элементов 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
Ответить с цитированием
  #2 (permalink)  
Старый 20.09.2016, 09:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

Dolphin,
jquery не загружено или $ уже нет, и незачем назначать load бесконечно, строки 6-8 перенесите в строку 2.
Ответить с цитированием
  #3 (permalink)  
Старый 20.09.2016, 09:18
Аватар для dd_smol
Кандидат Javascript-наук
Отправить личное сообщение для dd_smol Посмотреть профиль Найти все сообщения от dd_smol
 
Регистрация: 08.03.2015
Сообщений: 131

Сама библиотека jQuery подключена? Судя по всему ваш JS скрипт не отрабатывает а тупа вы переходите по ссылке.

$('#small > a').click(function ( e ) {
	$('#big img')
		.hide()
		.attr({ 'src' : e.target.href })
		.load(function ( e ) {
			$( e.target ).fadeIn( 1000 );
		});

	return false;
});
Ответить с цитированием
  #4 (permalink)  
Старый 20.09.2016, 09:26
Новичок на форуме
Отправить личное сообщение для Dolphin Посмотреть профиль Найти все сообщения от Dolphin
 
Регистрация: 20.09.2016
Сообщений: 5

Рони, спасибо за ответ. Я сделал ваши рекомендации, перенес строки 6-8 на строку 2, но не помогло.
Ответить с цитированием
  #5 (permalink)  
Старый 20.09.2016, 09:34
Новичок на форуме
Отправить личное сообщение для Dolphin Посмотреть профиль Найти все сообщения от Dolphin
 
Регистрация: 20.09.2016
Сообщений: 5

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 */
пойдет?
Ответить с цитированием
  #6 (permalink)  
Старый 20.09.2016, 09:39
Новичок на форуме
Отправить личное сообщение для Dolphin Посмотреть профиль Найти все сообщения от Dolphin
 
Регистрация: 20.09.2016
Сообщений: 5

dd_smol,

если убираю load, то при нажатии на ссылку не открывается новое окно, но в месте с этим не грузится большая в большой экран. Т.е. по нажатию ссылки тупо не чего не происходит.
Ответить с цитированием
  #7 (permalink)  
Старый 20.09.2016, 10:20
Аватар для dd_smol
Кандидат Javascript-наук
Отправить личное сообщение для dd_smol Посмотреть профиль Найти все сообщения от dd_smol
 
Регистрация: 08.03.2015
Сообщений: 131

Действительно проблема в load ...

jQuery(function ( $ ) {
	$('#small a').click(function ( e ) {
		$('#big img')
			.hide()
			.attr('src', this.href)
			.fadeIn('slow');

		return false;
	});
});

Последний раз редактировалось dd_smol, 20.09.2016 в 10:22.
Ответить с цитированием
  #8 (permalink)  
Старый 20.09.2016, 10:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

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>
Ответить с цитированием
  #9 (permalink)  
Старый 20.09.2016, 10:54
Аватар для dd_smol
Кандидат Javascript-наук
Отправить личное сообщение для dd_smol Посмотреть профиль Найти все сообщения от dd_smol
 
Регистрация: 08.03.2015
Сообщений: 131

Во что значит по ночам не спать ... в начали надо событие создать а уж потом им пользоваться.

Подумал немного можно намутить таких каких нибудь костылей.
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, 20.09.2016 в 11:39.
Ответить с цитированием
  #10 (permalink)  
Старый 20.09.2016, 12:36
Новичок на форуме
Отправить личное сообщение для Dolphin Посмотреть профиль Найти все сообщения от Dolphin
 
Регистрация: 20.09.2016
Сообщений: 5

рони, dd_smol

Все ваши варианты работают отлично! Спасибо Вам большое! С Вашей помщью я узнал еще варианты по решению данной задачи
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Внутри разворачивающегося по клику DIVа не работают ссылки JavaScriptNoob Элементы интерфейса 2 17.11.2015 00:01
Как объединить 4 одинаковых функции Batyabest Общие вопросы Javascript 2 21.12.2013 22:53
Изменить адрес ссылки для определенной страницы strato jQuery 7 14.03.2013 19:18
Не получается изменить код jquery GoloArt jQuery 1 27.01.2012 10:34
Изменить текст ссылки Romanich Общие вопросы Javascript 9 17.11.2011 14:11