Linkowanie img Opcje

[Mikouaj]

Witam!
Na wstępie chciałbym powiedzieć że po prostu nie znam Javascript a potrzebuję pewnej rzeczy, wobec czego byłbym bardzo wdzięczny za pomoc.


A więc: Skrypt wyświetla zdjęcia jako 'img' w divie 'imageview2' a w divie 'thumbnails2' jest menu wyboru owego zdjęcia. Problem polega na tym że to wyświetlane zdjęcie chciałbym podlinkować - każde pod inny link.
I teraz widzę dwie opcje rozwiązania: zdjęcie wyświetlające się będzie podlinkowane lub równolegle ze zdjęciem będzie się wyświetlał div który już tam sobie ogarnę w css.

Niestety od strony html/css nie jest w stanie tego technicznie zrobić... chyba... Dodatkowo w skrypcie mogą być przyciski dalej, wstecz itd... ale to już sprawa poboczna.


java:

CODE

(function($) {
$.fn.simplethumbs = function(o, p) {
var defaults = {
slideshow: "false",//required, location of image viewport
preload: true,//recommended for anything but very large galleries, preloads all required images
activeClass: "active",//class placed on active thumbnail
speed: 600,//speed of transition between images
next: "#next-image",//button for "next" image
prev: "#prev-image",//button for "previous" image
wrap: true,//if true, reaching the end wraps back to the beginning, when using "next" and "previous" buttons
cycle: true,//autostart slideshow
cycleWrap: true,//does slideshow stop at end? similar to "wrap" option for next and previous
interval: 3000,//delay between automatic slides
reverse: false,//if true, slideshow goes in reverse
startCycle: "#start-cycle",//to start the slideshow
stopCycle: "#stop-cycle",//to stop it
toggleCycle: "#toggle-cycle",//to toggle it
hoverPause: false,//if true, hovering over the slideshow will pause the automatic cycle
callAfter: function(thumb) {},//callback before
callBefore: function(thumb) {},//callback after
beforeCycle: function() {},//callback before automatic cycle
afterCycle: function() {}//callback after automatic cycle
}
if (typeof o == "string" && typeof p != "undefined") {
defaults[o] = p;
o = {};
}
else if(typeof p == "function") {
defaults.callAfter = p;
}
o = $.extend(defaults, o || {});

if(o.slideshow == "") return this;
if(o.cycle) o.cycleMem = o.wrap;
//var thumbList = this,
var defaultSrc = $(o.slideshow).find("img")[0].src;
$(o.slideshow).css({
position: "relative",
lineHeight: 0,
overflow: "hidden"
});
$("<img>").attr("src", $(o.slideshow).find("img").attr("src")).appendTo(o.slideshow);
$(o.slideshow).find("img").eq(0).css({
position: "absolute",
top: 0,
left: 0
});
$(o.slideshow).find("img").eq(1).css({
//"float": "left",
position: "relative"
});

this.find("a").each(function(){
if(o.preload && this.href) {
var img = new Image();
img.src = this.href;
}
if(this.href == defaultSrc) $(this).addClass(o.activeClass);
});

return this.each(function() {
var a = $(this).find("a"),
running = false,
id1, id2;
a.click(function() {
if (!running && !$(this).hasClass(o.activeClass)) {
running = true;
o.callBefore.call(this, this);
var href = this.href,
title = this.title,
captionOk = false,
thumb = this;//,
//lastThumb = $(thumbList).find(o.activeClass)[0];
var img = $(o.slideshow).find("img").eq(1);
if ($(o.slideshow).siblings("#caption").length) {
captionOk = true;
}
$(o.slideshow).find("img").eq(0).attr("src", href);

if (captionOk) {
$(o.slideshow).siblings("#caption").slideUp("normal");
}
$(a).removeClass(o.activeClass);
$(this).addClass(o.activeClass);
$(img).fadeOut(o.speed, function(){
$(img).attr("src", href).css("display", "block");
if (captionOk) {
$(o.slideshow).siblings("#caption").find("div").text(title);
$(o.slideshow).siblings("#caption").slideDown("normal");
}
o.callAfter.call(thumb, thumb);
//o.callAfter.call(thumb, thumb, lastThumb);
running = false;
});
}
return false;
});
function _triggerNext() {
for(var i = 0; i < a.length; i++) {
if(a.eq(i).hasClass(o.activeClass)) {
if((a.length - 1) == i) {
if(o.wrap)
a.eq(0).trigger("click");
}
else {
a.eq(i + 1).trigger("click");
}
break;
}
}
return false;
}
function _triggerPrevious() {
for(var i = 0; i < a.length; i++) {
if(a.eq(i).hasClass(o.activeClass)) {
if(i == 0) {
if(o.wrap)
a.eq(a.length - 1).trigger("click");
}
else {
a.eq(i - 1).trigger("click");
}
break;
}
}
return false;
}
function _startCycle() {
o.beforeCycle();
o.cycle = true;
o.wrapMem = o.wrap;
o.wrap = o.cycleWrap;
if(o.reverse) {
_triggerPrevious();
}
else {
_triggerNext();
}
id1 = setTimeout(function() {//instead of setInterval for better memory management.
if(o.reverse) {
_triggerPrevious();
}
else {
_triggerNext();
}
id2 = setTimeout(arguments.callee, o.speed + o.interval);
},o.speed + o.interval);
return false;
}
function _stopCycle() {
clearTimeout(id1);
clearTimeout(id2);
o.cycle = false;
o.wrap = o.wrapMem;
o.afterCycle();
return false;
}
$(o.next).click(function() {
_stopCycle();
return _triggerNext();
});

$(o.prev).click(function() {
_stopCycle();
return _triggerPrevious();
});
$(o.startCycle).click(function() {
return _startCycle();
});
$(o.stopCycle).click(function() {
return _stopCycle();
});
$(o.toggleCycle).click(function() {//can't use $().toggle() because o.cycle could be defaulted to true
if(o.cycle) {
return _stopCycle();
}
else {
return _startCycle();
}
});
if(o.hoverPause) {
$(o.slideshow).hover(function() {
_stopCycle();
}, function() {
_startCycle();
});
}
if(o.cycle) {
_startCycle();
}
});
}
})(jQuery);

html:

CODE

<div id="imageview2">

<img src="instalacje/parlament1.jpg" alt="example" />

</div>
<div id="thumbnails2"><span class="miniaturki"><a href="instalacje/wybrzeze1.jpg" align="center"><img src="instalacje/wybrzeze1m.jpg" alt="" border="1"/></a><a href="instalacje/pogoart1.jpg" align="center"><img src="instalacje/pogoart1m.jpg" alt="" border="1"/></a><a href="instalacje/parlament1.jpg" align="center"><img src="instalacje/parlament1m.jpg" alt="" border="1"/></a><a href="instalacje/pg1.jpg" align="center"><img src="instalacje/pg1m.jpg" alt="" border="1"/></a></span></div>
<script type="text/javascript">
jQuery(document).ready(function() {
$('#thumbnails2').simplethumbs({slideshow: '#imageview2'});
});
</script>

<div id="prev-image"><a href="#prev-image"><img src="produkty/left.png" /></a></div>

<div id="next-image"><a href="#next-image"><img src="produkty/right.png" /></a></div>