Od razu zaznaczam, że przygodę z webmasteringiem zacząłem dwa dni temu dopiero, wcześniej zajmowałem się tylko layoutami, ale zdecydowałem, że fajnie byłoby się usamodzielnić.
No i pociąłem sobie layout, HTML wygląda tak:
<html>
<head>
//tutaj pierdoły meta, title, itd.
<link href="index.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="nivo-zoom.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.nivo.zoom.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
$('body').nivoZoom({
speed:1100,
zoomHoverOpacity:0.8,
overlay:true,
overlayColor:'#FFFFFF',
overlayOpacity:0.8,
captionOpacity:0.8
});
});
</script>
<script type="text/javascript" src="js.js"></script>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="main">
<div id="header">
//headerowe rzeczy
</div>
<div id="left">
<ul>
<li><a rel="nofollow" href="index.html" title="strona glówna">strona glówna</a></li>
<li><a rel="nofollow" href="index.html?go=portretowe" title="portretowe">portretowe</a></li>
<li><a rel="nofollow" href="index.html?go=komercyjne" title="komercyjne">komercyjne</a></li>
<li><a rel="nofollow" href="index.html?go=makro" title="makro">makro</a></li>
<li><a rel="nofollow" href="index.html?go=oferta" title="oferta">oferta</a></li>
<li><a rel="nofollow" href="index.html?go=o nas" title="o nas">o nas</a></li>
</ul>
</div>
<div id="content">
<ul>
<li><a rel="nofollow" href="images/z1large.jpg" class="nivoZoom topLeft"><img src="images/z1.jpg" border="0"></a></li>
<li><a rel="nofollow" href="images/z2large.jpg" class="nivoZoom topRight"><img src="images/z2.jpg" border="0"></a></li>
<li><a rel="nofollow" href="images/z3large.jpg" class="nivoZoom topRight"><img src="images/z3.jpg" border="0"></a></li>
<li><a rel="nofollow" href="images/z4large.jpg" class="nivoZoom topLeft"><img src="images/z4.jpg" border="0"></a></li>
<li><a rel="nofollow" href="images/z5large.jpg" class="nivoZoom center"><img src="images/z5.jpg" border="0"></a></li>
<li><a rel="nofollow" href="images/z6large.png" class="nivoZoom center"><img src="images/z6.jpg" border="0"></a></li>
<li><a rel="nofollow" href="images/z7large.jpg" class="nivoZoom bottomLeft"><img src="images/z7.jpg" border="0"></a></li>
<li><a rel="nofollow" href="images/z8large.png" class="nivoZoom center"><img src="images/z8.jpg" border="0"></a></li>
<li><a rel="nofollow" href="images/z9large.jpg" class="nivoZoom bottomRight"><img src="images/z9.jpg" border="0"></a></li>
</ul>
</div>
</div>
</body></html>
I teraz tak. Póki miałem tylko wgrany skrypt (nie mój, tylko trochę przerobiony na mój użytek) z jquery.nivo.zoom.pack.js to wszystko było okej. Skrypt ten działa tak, że po naciśnięciu na miniaturę będącą odnośnikiem w contencie pokazuje się pełnowymiarowa wersja obrazka tak jakby nad warstwą strony, po kolejnym kliknięciu wraca. Do tego momentu wszystko było cacy. Tutaj dołączałem:
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
jquery.nivo.zoom.pack.js
Po dołączeniu jQuery.js i skryptu js.js powodującego, że po kliknięciu odnośnika w #left zmienia się TYLKO #content, to po jednym takim kliknięciu na odnośnik strona zaczyna wariować i ten nivo-zoom już nie działa, tzn. otwiera się zdjęcie ale w nowej stronie..
I teraz nie wiem czy nie ma tu jakiegoś konfliktu miedzy tymi skryptami? Czy może po prostu jednej takiej zamianie contentu po kliknięciu odnośnika jest jakiś inny błąd powodujący, że zoom przestaje działać?
js.js wygląda tak:
$(document).ready(function() {
var hash = window.location.hash.substr(1);
var href = $('#left li a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #content';
$('#content').load(toLoad)
}
});
$('#left li a').click(function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').fadeOut(1400,loadContent);
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#content').fadeIn(1400);
}
return false;
});
});
Najważniejsza informacja jest taka, że po wykonaniu powyższej funkcji (czyli po kliknięciu w odnośnik w nawigacji) coś się psuje w skrypcie zoomowania. Bo PRZED kliknięciem w odnośnik, cały nivo-zoom normalnie działa. A więc prawdopodobnie ta funkcja w powyższym skrypcie wykonuje coś takiego co uniemożliwia potem wykonanie skryptu zoomowania.
file:///C:/Users/Mosar/Desktop/fotolay/index.html - tutaj się da zoomować
file:///C:/Users/Mosar/Desktop/fotolay/index.html#index - tu już nie, tak jakby po wejściu tutaj już nie umiało się odnieść do skryptu związanego z zoomem.