Альтернативный текст изображения сделать видимым
Доброго всем! Суть - есть слайдер (галерея товара по клику), и несколько изображений с прописанными альтами. Хотелось минимальными движениями вывести альтернативный текст над изображением, в качестве пояснения..
На другом форуме пытался решить данную задачу, изначально средствами css+html. В ряде своих экспериментов, и по советам других ничего "рабочего" не получилось. Обратился к js + помощь со стороны = родился вот такой инвалид: codepen Костыли. Этот скрипт: $('.img img').load(function () { $(this).before($('<div id="alt-tx">').html($(this).attr('alt'))); }) Создает Код:
<div id="alt-tx">с помещенным внутрь альт. текстом выбранного изображения</div> Получается вот так: Это не позволяет сделать прозрачность, и вообще не есть хорошо.. Как можно дополнить js, чтобы скрипт при событии клика на превью, удалял предыдущий созданный <div id="alt-tx">? |
никрусскимибуквами,
ненадо создавать div программно и не будет проблемы -- 2 строка половина лишнее P.S да и весь скрипт нафиг не нужен P.S.S да и jquery лишнее |
Хм.. Не понял. А как же я тогда "подниму" альтернативный текст над изображением?
Див абсолютно спозиционирован и выставлен z-index выше, плюс оформление фона.. |
Цитата:
2.На счет jquery - ну он изначально таким был |
Не нужно его удалять, пусть он будет один, при клике заменяется содержимое блока на то что в альте.
|
никрусскимибуквами,
<!DOCTYPE html><html class=''> <head><meta charset='UTF-8'> <style class="cp-pen-styles"> body {background:#eaeaea} .slidebox {position:relative;height: 390px;width: 431px; margin:0 auto;overlow:hidden;} #fancybox-loading{position:fixed;top:50%;left:50%;width:40px;height:40px;margin-top:-20px;margin-left:-20px;cursor:pointer;overflow:hidden;z-index:1104;display:none;} #fancybox-loading div{position:absolute;top:0;left:0;width:40px;height:480px;background-image:url('../img-system/fancybox.png');} #fancybox-overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1100;display:none;} #fancybox-tmp{padding:0;margin:0;border:0;overflow:auto;display:none;} #fancybox-wrap{position:absolute;top:0;left:0;padding:20px;z-index:1101;outline:none;display:none;} #fancybox-outer{position:relative;width:100%;height:100%;background:#fff;} #fancybox-content{width:0;height:0;padding:0;outline:none;position:relative;overflow:hidden;z-index:1102;border:0 solid #fff;} #fancybox-hide-sel-frame{position:absolute;top:0;left:0;width:100%;height:100%;background:transparent;z-index:1101;} #fancybox-close{position:absolute;top:-15px;right:-15px;width:30px;height:30px;background:transparent url('../img-system/fancybox.png') -40px 0;cursor:pointer;z-index:1103;display:none;} #fancybox-error{color:#444;font:normal 12px/20px Arial;padding:14px;margin:0;} #fancybox-../img{width:100%;height:100%;padding:0;margin:0;border:none;outline:none;line-height:0;vertical-align:top;} #fancybox-frame{width:100%;height:100%;border:none;display:block;}#fancybox-left, #fancybox-right{position:absolute;bottom:0;height:100%;width:35%;cursor:pointer;outline:none;background:transparent url('../img-system/blank.gif');z-index:1102;display:none;} #fancybox-left{left:0;} #fancybox-right{right:0;} #fancybox-left-ico, #fancybox-right-ico{position:absolute;top:50%;left:-9999px;width:30px;height:30px;margin-top:-15px;cursor:pointer;z-index:1102;display:block;} #fancybox-left-ico{background-image:url('../img-system/fancybox.png');background-position:-40px -30px;} #fancybox-right-ico{background-image:url('../img-system/fancybox.png');background-position:-40px -60px;} #fancybox-left:hover, #fancybox-right:hover{visibility:visible;} #fancybox-left:hover span{left:20px;} #fancybox-right:hover span{left:auto;right:20px;} .img {position:relative;width:431px;height: 312px; border:1px solid #D4D4D4; overflow: hidden;-webkit-transition: all 0.15s ease-in-out;transition: all 0.15s ease-in-out;} .img:hover {border: 1px solid #FFF; -webkit-box-shadow: 0px 0px 30px -12px rgba(0,0,0,1); -moz-box-shadow: 0px 0px 30px -12px rgba(0,0,0,1); box-shadow: 0px 0px 30px -12px rgba(0,0,0,1);} .img img{width:431px;-webkit-transition: all 0.15s ease-in-out;transition: all 0.15s ease-in-out;} .img img:hover{-webkit-transform:scale(1.05,1.05);transform:scale(1.05,1.05);} .it img {width:70px;border-radius: 2px; float:left;border: 1px solid #D4D4D4;margin-right: 7px;margin-top: 7px;-webkit-transition: all 0.15s ease-in-out;transition: all 0.15s ease-in-out;} .it img:hover {border: 1px solid #FFF; cursor:pointer;-webkit-box-shadow: 0px 0px 30px -12px rgba(0,0,0,1); -moz-box-shadow: 0px 0px 30px -12px rgba(0,0,0,1); box-shadow: 0px 0px 30px -12px rgba(0,0,0,1);} #alt-tx {position:absolute;bottom:10px;width:100%;background:#f4ebdb;height:20px;line-height:20px;padding-left:15px;font: 16px Tahoma; color:#333;border-top:1px solid white;border-bottom:1px solid white;-webkit-transition: all 0.15s ease-in-out;transition: all 0.15s ease-in-out;z-index:999;} .img:hover #alt-tx {bottom:-30px;}</style> <script> window.addEventListener('DOMContentLoaded', function() { var imgs = document.querySelectorAll('.thumbs img'), bigImg = document.querySelector('.img img'), tx = document.querySelector('#alt-tx'); [].forEach.call(imgs, function(img) { img.addEventListener('click', function() { bigImg.src = img.src; bigImg.alt = img.alt; tx.innerHTML = img.alt; }); }); }); </script> </head><body> <div class="slidebox"> <div class="img"> <a href="http://storage4.static.itmages.ru/i/15/1108/h_1447026901_2768613_70d2d7f24b.png" rel="example_group" id="adpdp14"> <div id="alt-tx">тигр на синем фоне</div> <img src="http://storage4.static.itmages.ru/i/15/1108/h_1447026901_2768613_70d2d7f24b.png" id="dp14" style="margin-bottom: 3px;" alt="тигр на синем фоне" /></a> </div> <div class="thumbs"> <div class="it"><a style="display:none;" href="http://storage4.static.itmages.ru/i/15/1108/h_1447026901_2768613_70d2d7f24b.png" rel="example_group"></a> <img src="http://storage4.static.itmages.ru/i/15/1108/h_1447026901_2768613_70d2d7f24b.png" alt="тигр на синем фоне" /></div> <div class="it"><a style="display:none;" href="http://storage4.static.itmages.ru/i/15/1108/h_1447026901_8526342_a9544f81e5.png" rel="example_group"></a> <img src="http://storage4.static.itmages.ru/i/15/1108/h_1447026901_8526342_a9544f81e5.png" alt="тигр на желтом фоне" /></div> <div class="it"><a style="display:none;" href="http://storage3.static.itmages.ru/i/15/1108/h_1447026901_4225697_63e5676afd.png" rel="example_group"></a> <img src="http://storage3.static.itmages.ru/i/15/1108/h_1447026901_4225697_63e5676afd.png" alt="тигр на черном фоне" /></div> <div class="it"><a style="display:none;" href="http://storage3.static.itmages.ru/i/15/1108/h_1447026901_2299179_16bd4d0d96.png" rel="example_group"></a> <img src="http://storage3.static.itmages.ru/i/15/1108/h_1447026901_2299179_16bd4d0d96.png" alt="тигр на весь фон" /></div> <div class="it"><a style="display:none;" href="http://storage3.static.itmages.ru/i/15/1108/h_1447026901_8345667_ef9ad72d59.png" rel="example_group"></a> <img src="http://storage3.static.itmages.ru/i/15/1108/h_1447026901_8345667_ef9ad72d59.png" alt="тигр и человек" /></div> </div> </div> </body> </html> |
Огромное всем спасибо!
PS. Рони, плюсануть не смог в карму - говорит, поставьте еще кому нибудь. поставил - говорит еще надо. Отдельное спасибо! |
никрусскимибуквами,
на всякий случай достаточно одного клика по <div class="thumbs"> а не десяток - читать делегирование https://learn.javascript.ru/task/image-gallery смотреть решение |
Часовой пояс GMT +3, время: 07:12. |