Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.11.2014, 16:14
Интересующийся
Отправить личное сообщение для landerorly Посмотреть профиль Найти все сообщения от landerorly
 
Регистрация: 05.05.2014
Сообщений: 23

показать блок скрытый overflow
Здравствуйте. Подскажите новичку. Есть блок со свойством overflow:hidden в нем выводятся фото (что-то типо галереи), при наведении на каждую из этих "фоток": 1. показывается увеличенное ее изображение 2. должно показываться описание этой "фотки". Так вот, с увеличенным фото вроде разобрался, а на "описание" чет уже не хватает мозгов/знаний/сил.

Хтмл примерно такой:
<div class="1" style="overflow:hidden">
<div class="2">
<div class="3">
<img>
</div>     
<div class="4">
<p>Описание</p>
</div> 
</div>
</div>


Скрипт который выводит увеличенное фото:
this.screenshotPreview = function(){
	/* CONFIG */

		xOffset = 190;
		yOffset = -170;

	/* END CONFIG */
        jQuery("a.screenshot").hover(function(e){
		this.t = this.title;
		this.title = "";
		var c = (this.t != "") ? "<br/>" + this.t : "";
		jQuery("body").append("<p id='screenshot'><img src='"+ this.rel +"' alt='url preview' />"+ c +"</p>");
        jQuery("#screenshot")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px")
			.fadeIn("slow");
    },
	function(){
		this.title = this.t;
		jQuery("#screenshot").remove();
    });


	jQuery("a.screenshot").mousemove(function(e){
		jQuery("#screenshot")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px");
	});
};


// starting the script on page load


$(document).ready(function(){
	screenshotPreview();
});


Изображения:
Тип файла: jpg 2014.11.09-22.44.32.jpg (17.8 Кб, 1 просмотров)
Тип файла: jpg 2014.11.09-22.48.22.jpg (19.3 Кб, 1 просмотров)
Тип файла: jpg 2014.11.09-22.52.49.jpg (18.8 Кб, 0 просмотров)

Последний раз редактировалось landerorly, 09.11.2014 в 16:19.
Ответить с цитированием
  #2 (permalink)  
Старый 09.11.2014, 16:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,072

Сообщение от landerorly
Хтмл примерно такой:
и где в этом html a.screenshot ?
Ответить с цитированием
  #3 (permalink)  
Старый 09.11.2014, 16:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,072

landerorly,

c = $(this).parents('.1').find('p').text()
Ответить с цитированием
  #4 (permalink)  
Старый 09.11.2014, 18:00
Интересующийся
Отправить личное сообщение для landerorly Посмотреть профиль Найти все сообщения от landerorly
 
Регистрация: 05.05.2014
Сообщений: 23

сори ссылка в хтмл "обрамляет" img, т.е.:
...<div class="3">
<a class="screenshot">
<img>
</a>
</div>...


а вообще огромного вам.... на мыслю навели, все сделал, работает
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Копирование блоков в блок maximus Events/DOM/Window 1 14.09.2013 19:40
как скрыть блок div по ключевому слову Sacred13 Элементы интерфейса 6 06.08.2013 19:13
Показать/скрыть блок Lelja_05 jQuery 10 01.07.2013 20:05
Скрыть/показать блок в зависимости от radio MBmusic Элементы интерфейса 10 08.05.2013 17:23
как передать this и показать по нему скрытый текст mbp64 jQuery 4 26.11.2012 14:52