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

sticky i lightbox

VPS Starter Arubacloud
0 głosów
240 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,340 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ź 144 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 143 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 630 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,975 zapytań

141,939 odpowiedzi

321,182 komentarzy

62,302 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.

Wprowadzenie do ITsec, tom 2

Można już zamawiać tom 2 książki "Wprowadzenie do bezpieczeństwa IT" - będzie to około 650 stron wiedzy o ITsec (17 rozdziałów, 14 autorów, kolorowy druk).

Planowana premiera: 30.09.2024, zaś planowana wysyłka nastąpi w drugim tygodniu października 2024.

Warto preorderować, tym bardziej, iż mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy dodatkowe 15% zniżki! Dziękujemy zaprzyjaźnionej ekipie Sekuraka za kod dla naszej Społeczności!

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci

Snow Theme by Q2A Market
Powered by Question2Answer
...