Я недавно загрузил галерею jQuery для использования на веб-сайте. Все работает нормально, но я хочу, чтобы изображения, показанные в галерее, были ссылками на другие (более качественные) изображения. Вот код для галереи, представленной на моем сайте, www.mindsparkdesigns.com
(function($){
var settings = {
width: 940,
height: 252,
thumbWidth: 50,
thumbHeight: 50,
thumbOpacity: 0.4,
thumbHoverOpacity: 1,
displayAlt: true
}
$.uGallery = function(userSettings){
var images = [];
$.extend(settings, userSettings);
// parse input structure to images
$("ul.gal>li>img").each(function(index, element){
images[index] = $(element)
.css({width: element.width+"px", height: element.height+"px"})
.attr("a href", $(element).attr("a href"))
.attr("src", $(element).attr("src"))
.attr("alt", $(element).attr("alt"));
});
// recreate gallery structure using divs
$("ul.gal").replaceWith("<div class='gal'><div class='gal-thumbs'></div><div class='gal-main-viewer'></div></div>");
for(var i = 0; i < images.length; i++){ // fill it with images
$("div.gal-thumbs").append(makeThumb(images[i]));
}
$("div.gal-thumbs>img").wrap("<div class='gal-thumb'><div class='gal-thumb-padder'></div></div>");
// display the first thumb image in main viewer
$("div.gal-thumbs>div.gal-thumb>div.gal-thumb-padder:first>img").trigger('click');
// style the gallery
setupCSS(images);
// fade thumbs to the initial state
$("div.gal-thumb-padder>img").fadeTo("slow", settings.thumbOpacity);
// add thumb highlight onmouseover behaviour
$("div.gal-thumb-padder>img").hover(
function(){ $(this).fadeTo("fast", settings.thumbHoverOpacity); },
function(){ $(this).fadeTo("slow", settings.thumbOpacity); }
);
}
/**
* creates proportionally resized image with onclick showing full image in image viewer
*/
makeThumb = function(img){
var image = $("<img src='"+$(img).attr("src")+"' alt='"+$(img).attr("alt")+"' />");
image.css({width: "127px", height: "50px" });
image.css({msInterpolationMode: "bicubic"}); // smooth out thumbs in IE7
image.bind("click", img, function(e){
var image = $("<img src='"+$(img).attr("src")+"' alt='"+$(img).attr("alt")+"' />");
//image.css(proportionalDimensions(img, {x: settings.width - 20, y: settings.height - 20}));
var alt = $("<div class='gal-alt'>"+$(img).attr("alt")+"</div>");
alt.css({
clear: "both",
width: 640 +"px",
padding: "10px",
"background-color": "black",
"margin": "auto",
color: "white",
textAlign: "left"
});
alt.fadeTo("fast", 0.75);
$("div.gal-main-viewer").fadeOut("slow", function(){
$(this).html(image).hide().fadeIn("slow").append(alt);
if(settings.displayAlt){
$("div.gal-alt").animate({marginTop: "-47px"}, 600);
}
});
});
return image;
}
/**
* style the gallery
*/
setupCSS = function(images){
$("div.gal-thumb").css({
float: "left",
width: settings.thumbWidth+"px",
height: settings.thumbHeight+"px",
"text-align": "center",
"margin": "5px 5px 0px 0px",
border: "1px solid #343434",
padding: "5px",
overflow: "hidden"
});
$("div.gal-thumb-padder").css({
margin: "auto",
width: settings.thumbWidth-5+"px",
height: settings.thumbHeight-2+"px",
overflow: "hidden"
});
$("div.gal").css({
width: "940px",
overflow: "hidden",
marginLeft: "30px",
marginTop: "10px"
});
$("div.gal-main-viewer").css({
width: "640px",
height: "252px",
"text-align": "center",
overflow: "hidden",
margin: "auto",
float: "right",
border: "3px solid #141414",
marginTop: "5px"
});
$("div.gal-thumbs-wrapper").css({
width: settings.width-20+"px",
margin: "auto",
overflow: "hidden",
"padding-top": "5px",
"padding-bottom": "10px"
});
$("div.gal-thumbs").css({
width: "240px",
height: "260px",
overflow: "auto",
float: "left",
});
$("div.gal-thumb>img").css("background-color", "black");
}
})(jQuery)
Теперь HTML-код для галереи div:
<div id="gall">
<p class="gallery-name">Portfolio</p>
<ul class="gal">
<li><a href="images/gowang-logo-big.jpg"><img src="images/gowang-logo.jpg" class="gal-image" title="Logo for Gowang Adventures" alt="Logo design for the Gowang Adventures video game"/></a></li>
<li><img src="images/gowang.jpg" class="gal-image" title="Gowang Adventures Box Art" alt="A concept video-game box art for Gowang Adventures"/></li>
<li><img src="images/magical.jpg" class"gal-image" title="Magical" alt="Personal logo for a Video Game Box Artist"/></li>
<li><img src="images/roaring.jpg" class"gal-image" title="Roaring Arts" alt="Logo design for an online art event"/></li>
<li><img src="images/zelda.jpg" class"gal-image" title="Zelda Treasure Scroll" alt="Concept video game logo for personal project"/></li>
<li><img src="images/eyeronic-logo.jpg" class="gal-image" title="Eyeronic Surf Team logo" alt="Logo for Eyeronic Surf Team"/></li>
<li><img src="images/mycheal-logo.jpg" class="gal-image" title="Mycheal McQureerirais" alt="Personal logo for Game Designer Mycheal McQureerirais"/></li>
<li><img src="images/mycheal-card.jpg" class="gal-image" title="Mycheal McQureerirais" alt="Business Card for Game Designer Mycheal McQureerirais"/></li>
<li><img src="images/girard-logo.jpg" class="gal-image" title="Girard Home Interiors" alt="Company logo for Girard Custom Home Interiors"/></li>
</ul>
</div>
Первая ссылка, которую я добавил a href, чтобы просто показать вам, где я хочу, чтобы изображения связывались. Каждое изображение должно ссылаться на другое изображение.
Теперь я попытался добавить атрибут a href к изображениям в списке, как показано здесь:
http://www.h -3.abload.de / IMG / 1qe2s.png
Когда я это делаю, изображения связываются с другими изображениями, точно так же, как я хочу их, но галерея разрушается.
До: http://www.h -3.abload.de / img / 3dg4n.png
После: http://wwwh -3.abload.de / img / 2ce8p.png
Я уверен, что есть способ сделать это правильно, но мои знания jQuery являются базовыми, поэтому я не уверен, как. Любая помощь будет принята с благодарностью! Если вам нужна дополнительная информация, просто спросите.