<ul class="gallery">
<li><a href="img/img1.jpg"><img src="img/img1_thumb.jpg"></a></li>
<li><a href="img/img2.jpg"><img src="img/img2_thumb.jpg"></a></li>
<li><a href="img/img3.jpg"><img src="img/img3_thumb.jpg"></a></li>
</ul>
<div id="cover"></div>
<div id="largeImg"><img width="400" src="img/img1.jpg"></div>
</div>
</div>
<!-- inner --></div>
<!-- contents --></div>
<footer>
<small><img src="../../_shared/img/footer_copy.png" width="147" height="14" alt="（C）H2O Space. Mynavi"></small>
<!-- footer --></footer>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$('.gallery a').bind('click', function(e) {
e.preventDefault();
$('#cover').css({
'width': $(window).width(),
'height': $(window).height()
})
.show();
$('#largeImg').css({
'position': 'absolute',
'left': Math.floor(($(window).width() - 400) / 2) + 'px',
'top': $(window).scrollTop() + 30 + 'px'
})
.find('img').attr('src', $(this).attr('href')).end()
.fadeIn('slow');
});
$('#cover, #largeImg').bind('click', function() {
$('#largeImg').fadeOut('slow', function() {
$('#cover').hide();
});
});
</script>
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.