Здравствуйте товарищи, вопрос от начинающего ))
Вот хочу сделать небольшую фотогалерею с помощью jquery, что есть:
$(document).ready(function(){
$(".thumbs a").css({opacity: 0.5});
$(".thumbs a").hover (
function() {
$(this).fadeTo("fast", 1);
},
function() {
$(this).fadeTo("fast", 0.5);
})
$(".thumbs a").click(function(){
var largePath = $(this).attr("href");
var largeAlt = $(this).attr("title");
largeRel = $(this).attr("rel");
$("#largeImg").css({opacity: 0});
$("#largeImg").attr({ src: largePath, alt: largeAlt });
$("#largeImg").fadeTo("slow", 1);
$("#h22").html(" (" + largeAlt + ")"); return false;
});
});
<div id="h22">Image 2</div>
<p><img id="largeImg" src="img/camera-314.jpg" alt="Large image" /></p>
<p class="thumbs">
<a href="img/camera-314.jpg" title="Image 2" rel="1" ><img src="img/camera-314_1.jpg" /></a>
<a href="img/camera-328.jpg" title="Image 3" rel="2"><img src="img/camera-328_1.jpg" /></a>
<a href="img/camera-314.jpg" title="Image 2"><img src="img/camera-314_1.jpg" /></a>
<a href="img/camera-328.jpg" title="Image 3"><img src="img/camera-328_1.jpg" /></a>
<a href="img/camera-314.jpg" title="Image 2"><img src="img/camera-314_1.jpg" /></a>
<a href="img/camera-328.jpg" title="Image 3"><img src="img/camera-328_1.jpg" /></a>
<a href="img/camera-314.jpg" title="Image 2"><img src="img/camera-314_1.jpg" /></a>
<a href="img/camera-328.jpg" title="Image 3"><img src="img/camera-328_1.jpg" /></a>
<a href="img/camera-314.jpg" title="Image 2"><img src="img/camera-314_1.jpg" /></a>
<a href="img/camera-328.jpg" title="Image 3"><img src="img/camera-328_1.jpg" /></a>
</p>
Хотелось бы проконсультироваться у знающих людей:
- Как сделать так чтоб текущее изображение оставалось обрамлено рамкой и оставалось непрозрачным
- Как можно сделать ссылки "Следующее изображение" и "Предыдущее изображение"
Заранее спасибо
