• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi
Zapytaj

sticky i lightbox

Object Storage Arubacloud
0 głosów
158 wizyt
pytanie zadane 6 listopada 2016 w HTML i CSS przez nurek Nowicjusz (120 p.)

Dzień dobry

Stworzyłem galerię fotograficzną www na podstawie 3 odc. kursu CSS.

Mój problem polega na tym, że przy pływającym menu wykorzystującym użyte skrypty przestaje działać lightbox wyświetlający zdjęcia. Doszedłem że problem tkwi tym kawałku kodu (po jego usunięciu lightbox poprawnie wyświetla zdjęcia - rzecz jasna menu nie działa):

	<script src="js/jquery-3.1.1.min.js"></script>
	
		<script>

	$(document).ready(function() {
	var NavY = $('.nav').offset().top;
	 
	var stickyNav = function(){
	var ScrollY = $(window).scrollTop();
		  
	if (ScrollY > NavY) { 
		$('.nav').addClass('sticky');
	} else {
		$('.nav').removeClass('sticky'); 
	}
	};
	 
	stickyNav();
	 
	$(window).scroll(function() {
		stickyNav();
	});
	});
	
</script>

Czy mógłbym prosić o wyjaśnienie gdzie robię błąd?

 

 

 komentarz 6 listopada 2016 przez Czort Nałogowiec (32,500 p.)
Skrypt lightboxa masz dodany między jquery a skryptem "pływającego" menu?
 komentarz 6 listopada 2016 przez pablop76 VIP (123,180 p.)
Cześć. Potrzebny html.
 komentarz 6 listopada 2016 przez nurek Nowicjusz (120 p.)

Po przestawieniu skryptów pomiędzy jquery a skryptem "sticky" działa lightebox, ale za to przestaje działać przyklejanie menu.

Pod spodem zamieszczam kod całej strony.

 

<!DOCTYPE HTML>
<html lang="pl">

<head>
	<meta charset="utf-8" />
	<title>Portfolio - Michał Wajnchold fotoaktywni@fotoaktywni.art.pl</title>

	<meta name="keywords" content="portfolio michal wajnchold fotoaktywni art pl air air.art fotoaktywni.art.pl air.art.pl michal wajnchold michał lotnictwo wojsko aviation military architektura fotografia archi photo photos picture building buildings art budownictwo inwestycje deweloper krajobrazy landscape">
	<meta name="description" content="Przed Tobą moje zdjęcia - zapraszam" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

	<link rel="stylesheet" href="style.css" type="text/css" />
	<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

	<script type="text/javascript" src="js/prototype.js"></script>
	<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
	<script type="text/javascript" src="js/lightbox.js"></script>


</head>
	


<body>
	<div class="wrapper">
	
		<div class="nav">
		<ol>
			<li><a href="archi_index.html">główna</a></li>
			<li><a href="archi_portfolio.html">portfolio</a></li>
			<li><a href="archi_oferta.html">oferta</a></li>
			<li><a href="archi_omnie.html">o mnie</a></li> 
			<li><a href="archi_kontakt.html">kontakt</a></li>
			<li><a href="archi_copyright.html">prawa autorskie</a></li>
			<li><a href="sales.html"><b>kup zdjęcie</b></a></li>
		</ol>
		</div>
		<div class="content">
    
 
    
    
			<table align="center">

				<tr>

					<td>


					<a href="portfolio/_20140221_6666.jpg" rel="lightbox[thebest]" title="<br>Wszelkie prawa zastrzeżone Michał Wajnchold">
					<img src="portfolio/m20140221_6666.jpg" width="250" height="166"></a></td>

					<td>

					<a href="portfolio/_20140612_0575.jpg" rel="lightbox[thebest]" title="<br>Wszelkie prawa zastrzeżone Michał Wajnchold">
					<img src="portfolio/m20140612_0575.jpg" width="250" height="166"></a></td>

					<td>

					<a href="portfolio/_20131019_9351.jpg" rel="lightbox[thebest]" title="<br>Wszelkie prawa zastrzeżone Michał Wajnchold">
					<img src="portfolio/m20131019_9351.jpg" width="250" height="166"></td>

					<td>

					<a href="portfolio/_20140109_4548.jpg" rel="lightbox[thebest]" title="Nocne	życie metropolii<br>Wszelkie prawa zastrzeżone Michał Wajnchold">
					<img src="portfolio/m20140109_4548.jpg" width="250" height="166"></a></td>

				</tr>

				<tr>

					<td>

					<a href="portfolio/_20140729_4272.jpg" rel="lightbox[thebest]" title="<br>Wszelkie prawa zastrzeżone Michał Wajnchold">
					<img src="portfolio/m20140729_4272.jpg" width="250" height="166"></a></td>

					<td>

					<a href="portfolio/_20140218_6326.jpg" rel="lightbox[thebest]" title="<br>Wszelkie prawa zastrzeżone Michał Wajnchold">
					<img src="portfolio/m20140218_6326.jpg" width="250" height="166"></a></td>

					<td>

					<a href="portfolio/_20131222_4056.jpg" rel="lightbox[thebest]" title="<br>Wszelkie prawa zastrzeżone Michał Wajnchold">
					<img src="portfolio/m20131222_4056.jpg" width="250" height="166"></a></td>

					<td>

					<a href="portfolio/_20130806_5658.jpg" rel="lightbox[thebest]" title="<br>Wszelkie prawa zastrzeżone Michał Wajnchold">
					<img src="portfolio/m20140727_4010.jpg" width="250" height="166"></a></td>

				</tr>

				<tr>

					<td>

					<a href="portfolio/_20130127_0137.jpg" rel="lightbox[thebest]" title="<br>Wszelkie prawa zastrzeżone Michał Wajnchold">
					<img src="portfolio/m20130127_0137.jpg" width="250" height="166"></a></td>

					<td>

					<a href="portfolio/_20131018_9050.jpg" rel="lightbox[thebest]" title="<br>Wszelkie prawa zastrzeżone Michał Wajnchold">
					<img src="portfolio/m20131018_9050.jpg" width="250" height="166"></a></td>

					<td>

					<a href="portfolio/_20140824_6879.jpg" rel="lightbox[thebest]" title="<br>Wszelkie prawa zastrzeżone Michał Wajnchold">
					<img src="portfolio/m20140824_6879.jpg" width="250" height="166"></td>

					<td>

					<a href="portfolio/_20130413_6850.jpg" rel="lightbox[thebest]" title="<br>Wszelkie prawa zastrzeżone Michał Wajnchold">
					<img src="portfolio/m20130413_6850.jpg" width="250" height="166"></a></td>

				</tr>

				<tr>

					<td>
					<a href="portfolio/_20131008_7560.jpg" rel="lightbox[thebest]" title="<br>Wszelkie prawa zastrzeżone Michał Wajnchold">
					<img src="portfolio/m20131008_7560.jpg" width="250" height="166"></a></td>

					<td>
					<a href="portfolio/_20131029_1685.jpg" rel="lightbox[thebest]" title="<br>Wszelkie prawa zastrzeżone Michał Wajnchold">
					<img src="portfolio/m20131029_1685.jpg" width="250" height="166"></a></td>

					<td>
					<a href="portfolio/_20140727_4010.jpg" rel="lightbox[thebest]" title="<br>Wszelkie prawa zastrzeżone Michał Wajnchold">
					<img src="portfolio/m20131019_9355.jpg" width="250" height="166"></a></td>

					<td>

					<a href="portfolio/_20131013_8401.jpg" rel="lightbox[thebest]" title="<br>Wszelkie prawa zastrzeżone Michał Wajnchold">
					<img src="portfolio/m20131013_8401.jpg" width="250" height="166"></a></td>

				</tr>

				<tr>

					<td>

					<a href="portfolio/_20140218_6424.jpg" rel="lightbox[thebest]" title="<br>Wszelkie prawa zastrzeżone Michał Wajnchold">
					<img src="portfolio/m20140218_6424.jpg" width="250" height="166"></a></td>

					<td>

					<a href="portfolio/_20131217_3966.jpg" rel="lightbox[thebest]" title="<br>Wszelkie prawa zastrzeżone Michał Wajnchold">
					<img src="portfolio/m20131217_3966.jpg" width="250" height="166"></a></td>

					<td>

					<a href="portfolio/_20131214_3702.jpg" rel="lightbox[thebest]" title="<br>Wszelkie prawa zastrzeżone Michał Wajnchold">
					<img src="portfolio/m20131214_3702.jpg" width="250" height="166"></a></td>

					<td>

					<a href="portfolio/_20120717_6195.jpg" rel="lightbox[thebest]" title="<br>Wszelkie prawa zastrzeżone Michał Wajnchold">
					<img src="portfolio/m20120717_6195.jpg" width="250" height="166"></a></td>

				</tr>


				</table>

	</div> 
	<script src="js/jquery-3.1.1.min.js"></script>
	
		<script>

	$(document).ready(function() {
	var NavY = $('.nav').offset().top;
	 
	var stickyNav = function(){
	var ScrollY = $(window).scrollTop();
		  
	if (ScrollY > NavY) { 
		$('.nav').addClass('sticky');
	} else {
		$('.nav').removeClass('sticky'); 
	}
	};
	 
	stickyNav();
	 
	$(window).scroll(function() {
		stickyNav();
	});
	});
	
</script>


</body>
</html>

 

 komentarz 6 listopada 2016 przez Czort Nałogowiec (32,500 p.)
Brak jakiegokolwiek porządku w ładowaniu skryptów. Powinno się wczytywać wszystkie na końcu body z wiadomych przyczyn.
 komentarz 6 listopada 2016 przez nurek Nowicjusz (120 p.)
Skrypty są podlinkowane dokładnie tak jak było to wskazane w kursie oraz w dokumentacji lightboxa. Niestety prowadzący kurs  nie wytłumaczył dlaczego wstawił na końcu body a nie w head.

Przestawienie skryptów z head do body nic nie dało.

Niestety css dopiero zaczynam więc nie dysponuję zapewne odpowiednim zakresem wiedzy - stąd pytanie.
1
 komentarz 6 listopada 2016 przez Czort Nałogowiec (32,500 p.)

Aż z ciekawości zajrzałem do dokumentacji lightboxa i jak byk jest napisane:

3. (...)

- Include the Javascript at the bottom of your page before the closing </body> tag:

<script src="path/to/lightbox.js"></script>

4. Make sure jQuery, which is required by Lightbox, is also loaded.

If you already use jQuery on your page, make sure it is loaded before lightbox.js. 

Źródło: http://lokeshdhakar.com/projects/lightbox2/#getting-started.

 

 komentarz 6 listopada 2016 przez nurek Nowicjusz (120 p.)
Niestety ja mam inny niż Lightbox by by Lokesh Dhakar

Po zainstalowaniu tego lightboxa wszystko działa w najlepszym porządku choć nadal nie rozumiem gdzie jest problem, żeby w przyszłości uniknąć podobnych problemów.

Dziękuję za pomoc i nakierowanie na źródło problemu.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

0 głosów
1 odpowiedź 129 wizyt
Sticky i lightbox się wykluczają.
pytanie zadane 5 kwietnia 2016 w JavaScript przez Sebastian Kopiczko Początkujący (370 p.)
0 głosów
0 odpowiedzi 128 wizyt
LightBox czarny obraz po wykonaniu animacji
pytanie zadane 10 października 2019 w HTML i CSS przez livinsky Nowicjusz (230 p.)
0 głosów
2 odpowiedzi 504 wizyt
Lightbox ze zdjęciem po kliknięciu w tekst ?!
pytanie zadane 28 lipca 2018 w HTML i CSS przez marek90552 Początkujący (430 p.)

92,576 zapytań

141,426 odpowiedzi

319,652 komentarzy

61,961 pasjonatów

Kategorie pytań
Programowanie
Sprzęt komputerowy
Systemy operacyjne, programy
Sieci komputerowe
Hostingi, domeny, usługi
Urządzenia mobilne
Bezpieczeństwo, hacking
Rozwój zawodowy, nauka, praca
Egzaminy zawodowe
Matematyka, fizyka, logika
Grafika i multimedia
Ogłoszenia, zlecenia
Nasze projekty
Nasze poradniki
Sprawy forum
Offtop
Programowanie
C i C++ HTML i CSS JavaScript PHP SQL, bazy danych C# Java SPOJ Python Ruby Assembler Visual Basic Android, Swift, Symbian OpenGL, Unity Inne języki Algorytmy Systemy CMS Mikrokontrolery

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci

Snow Theme by Q2A Market
Powered by Question2Answer
...