Hallo,
habe eine Problem mit mehreren jQuery's und zwar möchte ich eine Slideshow als Banner in meiner Homepage haben und benutze dafür jQuery.
Zusätzlich habe ich noch eine Lightbox in einer Seite versucht zu integrieren, die ebenfalls mit jQuery funktioniert.
Problem ist nun, wenn des eine funktioniert, geht das andere nicht und umgekehrt, je nachdem welche .js - Datei geladen wurde.
Hab im Internet schon was gefunden, dass bei mehreren jQuery's oftmals das $ ein Problem macht und man dann mit dem Code - Schnipsel das ganze umgehen kann.
Klappt bei mir aber leider nicht.
Hier mal der Code meiner Seite:
Was muss ich anstellen, damit es funktioniert?
Danke schon mal
habe eine Problem mit mehreren jQuery's und zwar möchte ich eine Slideshow als Banner in meiner Homepage haben und benutze dafür jQuery.
Zusätzlich habe ich noch eine Lightbox in einer Seite versucht zu integrieren, die ebenfalls mit jQuery funktioniert.
Problem ist nun, wenn des eine funktioniert, geht das andere nicht und umgekehrt, je nachdem welche .js - Datei geladen wurde.
Hab im Internet schon was gefunden, dass bei mehreren jQuery's oftmals das $ ein Problem macht und man dann mit dem Code - Schnipsel das ganze umgehen kann.
HTML:
<script type="text/javascript">
$.noConflict();
// Code that uses other library's $ can follow here.
jQuery(document).ready(function($) {
$('.header').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>Klappt bei mir aber leider nicht.
Hier mal der Code meiner Seite:
HTML:
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<!-- Add jQuery library -->
<script type="text/javascript" src="fancybox/lib/jquery-1.10.1.min.js"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="fancybox/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.css?v=2.1.5" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
/*
* Simple image gallery. Uses default settings
*/
$('.fancybox').fancybox();
/*
* Different effects
*/
// Change title type, overlay closing speed
$(".fancybox-effects-a").fancybox({
helpers: {
title : {
type : 'outside'
},
overlay : {
speedOut : 0
}
}
});
// Disable opening and closing animations, change title type
$(".fancybox-effects-b").fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
title : {
type : 'over'
}
}
});
// Set custom style, close if clicked, change title type and overlay color
$(".fancybox-effects-c").fancybox({
wrapCSS : 'fancybox-custom',
closeClick : true,
openEffect : 'none',
helpers : {
title : {
type : 'inside'
},
overlay : {
css : {
'background' : 'rgba(238,238,238,0.85)'
}
}
}
});
// Remove padding, set opening and closing animations, close if clicked and disable overlay
$(".fancybox-effects-d").fancybox({
padding: 0,
openEffect : 'elastic',
openSpeed : 150,
closeEffect : 'elastic',
closeSpeed : 150,
closeClick : true,
helpers : {
overlay : null
}
});
/*
* Button helper. Disable animations, hide close button, change title type and content
*/
$('.fancybox-buttons').fancybox({
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
helpers : {
title : {
type : 'inside'
},
buttons : {}
},
afterLoad : function() {
this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
}
});
/*
* Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked
*/
$('.fancybox-thumbs').fancybox({
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
arrows : false,
nextClick : true,
helpers : {
thumbs : {
width : 50,
height : 50
}
}
});
/*
* Media helper. Group items, disable animations, hide arrows, enable media and button helpers.
*/
$('.fancybox-media')
.attr('rel', 'media-gallery')
.fancybox({
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',
arrows : false,
helpers : {
media : {},
buttons : {}
}
});
/*
* Open manually
*/
$("#fancybox-manual-a").click(function() {
$.fancybox.open('1_b.jpg');
});
$("#fancybox-manual-b").click(function() {
$.fancybox.open({
href : 'iframe.html',
type : 'iframe',
padding : 5
});
});
$("#fancybox-manual-c").click(function() {
$.fancybox.open([
{
href : '1_b.jpg',
title : 'My title'
}, {
href : '2_b.jpg',
title : '2nd title'
}, {
href : '3_b.jpg'
}
], {
helpers : {
thumbs : {
width: 75,
height: 50
}
}
});
});
});
</script>
/* Hier der Teil für den Banner
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jqFancyTransitions.js"></script>
</head>
<body>
<div id="body">
<div id="slideshow">
<img src="bilder/slideshow/Seite-01.jpg" alt="Seite 01" />
<img src="bilder/slideshow/Seite-02.jpg" alt="Seite 02" />
<img src="bilder/slideshow/Seite-03.jpg" alt="Seite 03" />
</div>
<script type="text/javascript">
$('#slideshow').jqFancyTransitions({ width: 1100, height: 525, delay: 5000, effect: 'curtain', direction: 'top', stripDelay: 60, strips: 10, titleOpacity: 0.0, position: 'alternate'});
</script>
<div id="inhalt">
<a class="fancybox" href="fancybox/demo/1_b.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet"><img src="fancybox/demo/1_s.jpg" alt="" /></a>
<a class="fancybox" href="fancybox/demo/2_b.jpg" data-fancybox-group="gallery" title="Etiam quis mi eu elit temp"><img src="fancybox/demo/2_s.jpg" alt="" /></a>
<a class="fancybox" href="fancybox/demo/3_b.jpg" data-fancybox-group="gallery" title="Cras neque mi, semper leon"><img src="fancybox/demo/3_s.jpg" alt="" /></a>
<a class="fancybox" href="fancybox/demo/4_b.jpg" data-fancybox-group="gallery" title="Sed vel sapien vel sem uno"><img src="fancybox/demo/4_s.jpg" alt="" /></a>
</div>Was muss ich anstellen, damit es funktioniert?
Danke schon mal
