Gå til innhold

Fancybox og Coda Slider på samme side.

Gjest Slettet+oiasdf79

Av Gjest Slettet+oiasdf79
i Programmering og webutvikling

Anbefalte innlegg

Gjest Slettet+oiasdf79

Gjest Slettet+oiasdf79

Skrevet
Skrevet

Som tittelen sier:

 

Jeg jobber med en side der jeg ønsker å bruke både Fancybox og Coda Slider.

 

Problemet er at det oppstår en konflikt under starting av skript. Og jeg vet ikke hvordan jeg løse dette. Jeg har lest på jQuery sine nettisder, men får det fortsatt ikke til å virke som det skal.

 

Relevant del av <head>:

<!-- JQUERY -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<!-- FANCYBOX -->	
<script type="text/javascript" src="resources/fancybox/fancybox/jquery.fancybox-1.3.2.pack.js"></script>
<link rel="stylesheet" href="resources/fancybox/fancybox/jquery.fancybox-1.3.2.css" type="text/css" media="screen">
<!-- CODA-SLIDER -->
<script type="text/javascript" src="resources/coda-slider/javascripts/jquery.coda-slider-2.0.js"></script>
<script type="text/javascript"  src="resources/coda-slider/javascripts/jquery.easing.1.3.js" ></script>
<link type="text/css" rel="stylesheet" src="resources/coda-slider/stylesheets/coda-slider-2.0.css">
<link type="text/css" rel="stylesheet" src="resources/coda-slider/stylesheets/reset.css">

 

Lasting av Fancybox:

	<script type="text/javascript"> 
$(document).ready(function() {


$("a.grouped_elements").fancybox();

/* Using custom settings */

$("a#inline").fancybox({
	'hideOnContentClick': true
});

/* Apply fancybox to multiple items */

$("a.group").fancybox({
	'transitionIn'	:	'elastic',
	'transitionOut'	:	'elastic',
	'speedIn'		:	600, 
	'speedOut'		:	200, 
	'overlayShow'	:	false
});

});
	</script>

 

Lasting av Coda Slider:

<script type="text/javascript">
$().ready(function() {
      $('#coda-slider-1').codaSlider();
  });
</script>

 

Jeg forstår at konflikten oppstår fordi at både jQuery (Coda Slider) og Fancybox bruker samme metode for å hente skript. Nemlig: '$'.

 

Men, jeg har også prøvd følgende:

 <script type="text/javascript"> 
	$j = jquery.noConflict();
		$j().ready(function() {
			$j('#coda-slider-1').codaSlider();
		});
	 </script>

Og det fungerer heller ikke. Er det noen som ser hva jeg gjør feil eller har forslag til løsning?

 

PS. Jeg har svært liten erfaring med JS, dette er første gangen jeg har opplevd problemer også. :)

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Jesper Karsrud

Jesper Karsrud

Skrevet
Skrevet

Det har ingenting som helst med problemet ditt å gjøre. Prøv å skrive document inni $() ved oppsett av codaSlider-pluginen. Ellers kan du også legge inn $('#coda-slider-1').codaSlider(); i bunnen av document.ready() der du legger til fancybox. Så du har nok misforstått litt når det kommer til hva som egentlig skjer her. En jQuery-plugin skaper ikke konflikt med jQuery-namespacet ($), det er det andre rammeverk som kan gjøre. Men du har jo ingen andre rammeverk inne, virker det som.

 

En anbefaling dog; legg inn scriptene dine rett før closing-taggen til body (</body>), så slipper du hele problemet ditt med å måtte ha document.ready. I tillegg kan dette bidra til raskere sidelasting, da loading av scripts er en blocking operation i nettleseren, som kan få siden til å virke treg. Strukturen blir da som følger:

<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" href="resources/fancybox/fancybox/jquery.fancybox-1.3.2.css" type="text/css" media="screen" />
<link type="text/css" rel="stylesheet" src="resources/coda-slider/stylesheets/coda-slider-2.0.css" />
<link type="text/css" rel="stylesheet" src="resources/coda-slider/stylesheets/reset.css" />
</head>
<body>
<!-- markupen din her -->
<!-- JQUERY -->
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<!-- FANCYBOX -->       
   <script type="text/javascript" src="resources/fancybox/fancybox/jquery.fancybox-1.3.2.pack.js"></script>
<!-- CODA-SLIDER -->
   <script type="text/javascript" src="resources/coda-slider/javascripts/jquery.coda-slider-2.0.js"></script>
   <script type="text/javascript"  src="resources/coda-slider/javascripts/jquery.easing.1.3.js" ></script>
<script>
(function($) {
$("a.grouped_elements").fancybox();
$('#coda-slider-1').codaSlider();
})(jQuery);
</script>
</body>
</html>

 

Grunnen til at du ikke trenger å ha med en document.ready-block nå, er fordi DOM-en allerede er lastet, og elementene finnes der fra før, uten at du trenger å vente på at dokumentet er ferdig lastet. I tillegg wrappet jeg javascript-koden din i en closure eller en IIFE om du vil. Dette kan hjelpe deg med å forhindre at noen andre scripts highjacker $-namespacet innenfor denne funksjonen.

Lenke til kommentar
Gjest Slettet+oiasdf79

Gjest Slettet+oiasdf79

Skrevet
Skrevet

Ah!

 

Da ser jeg jo at jeg har misforstått totalt! Fant en forumtråd angående fancybox og coda slider på samme side tidligere som nevnte at dette var problemet. Tusen hjertelig takk for korreksjonen! Skal prøve å få det til å fungere senere i kveld! :D

Lenke til kommentar
Kaptein Snus

Kaptein Snus

Skrevet
Skrevet

Tror ikke du trenger

 

<script> 
(function($) {
$("a.grouped_elements").fancybox();
$('#coda-slider-1').codaSlider();
})(jQuery);
</script>

Når du laster inn skriptene etter markupen. Da må du evetuelt bruke det før du laster inn skriptene.

 

Er ikke sikker på om dette løser problemet, men du kan jo prøve ;)

Lenke til kommentar
Jesper Karsrud

Jesper Karsrud

Skrevet
Skrevet

Tror ikke du trenger

 

<script> 
(function($) {
$("a.grouped_elements").fancybox();
$('#coda-slider-1').codaSlider();
})(jQuery);
</script>

Når du laster inn skriptene etter markupen. Da må du evetuelt bruke det før du laster inn skriptene.

 

Er ikke sikker på om dette løser problemet, men du kan jo prøve ;)

Det er forskjell på en closure som får inn jQuery under kjøring enn shorthand-funksjonen for document.ready :)

 

Til trådstarter: Du kjører jo ikke scriptet ditt lenger, derfor det ikke funker i den siste testen din. Gjør som i test.html, og ikke hør på en forvirret Lek1. Når det gjelder siden din, mangler du en del CSS for at det skal se riktig ut. Og jeg har heller ikke se noen form for linker med bilder her der du kjører fancybox, så..

Lenke til kommentar
Gjest Slettet+oiasdf79

Gjest Slettet+oiasdf79

Skrevet
Skrevet

Hvilken CSS er det jeg har gått glipp av her da? For det er dette som har vært problemet mitt hele veien. Jeg får rett og slett ikke slideren til å fungere skikkelig.

 

Jeg er fult klar over at test-siden ikke bruker noe Fancybox as we speak, men det var i utgangspunktet slideren som var problemet og ikke Fancybox, den har jeg tross alt tuklet en del med fra før. :)

 

Takk igjen for hjelpen!

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...