Result
jQuery
$(document).ready(function() { //オーバーレイ用のボックス生成 $("body").prepend('<div class="overlay"></div>'); var h = $(document).height(); //画面の高さをオーバーレイの高さにする $(".overlay").css('height', h); //クリックイベント $("#sample li img").click(function() { var url = $(this).attr('src'); var w = ($(document).width()/2)-200; var t = $(document).scrollTop()+100; //閉じるボタンを生成 $(".overlay").empty().append('<img src="' + url + '" /><span id="cursol">close</span>').fadeIn('fast'); $(".overlay img").css({left: w, top: t, opacity: '1'}); //マウスにあわせてボタンも動くようにする $("body").mousemove(function(e) { var x = e.pageX + 10; var y = e.pageY - 30; $("#cursol").css({top: y, left: x}); }); }); //オーバーレイを閉じる $(".overlay").click(function() { $(".overlay").fadeOut(); });}); |
css
.overlay { position: absolute; display: none; top: 0; width: 100%; z-index: 1; background: #000;}.overlay img { display: inline-block; position: absolute; width: 500px;}#cursol { position: absolute; padding: 5px; color: #fff; background: #666;}#sample li{float:left;margin-left:5px;}#sample li img{width:200px;} |
html
<div id="sample"><ul><li><img src="01.jpg" /></li><li><img src="02.jpg" /></li><li><img src="03.jpg" /></li></ul></div> |
via
Warning: include(/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php): Failed to open stream: No such file or directory in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7
Warning: include(): Failed opening '/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php' for inclusion (include_path='.:/opt/php-8.1.29/data/pear') in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7
