Owl carousel doesn't work - javascript

After I updated my sources codes, my carousel doesn't work anymore. The images that I click, supposedly open with images slider (Carousel), but now open a new link to new image.
<div id="owl-carousel-works" class="owl-carousel owl-theme">
<div class="item">
<div class="latest-item col-md-12" >
<a href="images/screenshots/MainPage.png" title="screen #1" data-lightbox-gallery="screenshots-gallery">
<img src="images/screenshots/MainPage.png" class="img-responsive" alt=""/>
</a>
</div>
</div>
<div class="item">
<div class="latest-item col-md-12 " >
<a href="images/screenshots/7.png" title="screen #2" data-lightbox-gallery="screenshots-gallery">
<img src="images/screenshots/7.png" class="img-responsive" alt=""/>
</a>
</div>
</div>
Included all stylesheets
<link href="css/owl-carousel/owl.carousel.css" rel="stylesheet">
<link href="css/owl-carousel/owl.theme.css" rel="stylesheet">
<link href="css/owl-carousel/owl.transitions.css" rel="stylesheet">
Included all javascripts
<script src="js/modernizr.custom.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/responsive-nav.js"></script>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/nivo-lightbox.min.js"></script>
<script src="js/jquery.appear.js"></script>
<script src="js/jquery.inview.js"></script>
<script src="js/jquery.animateNumber.min.js"></script>
<script src="js/jquery.fitvids.js"></script>
<script src='js/jquery.scrollTo.js'></script>
<script src="js/wow.min.js"></script>
<script src="js/script.js"></script>
<script src="js/fastclick.js"></script>
<script src="js/scroll.js"></script>
<script src="js/fixed-responsive-nav.js"></script>
There is not errors in my javascript file. Below is my configuration toward owl-carousel...
/* screenshot slider */
var owl = $("#owl-carousel-works");
owl.owlCarousel({
itemsCustom: [
[0,1],
[900,2],
[1800,3],
[2700,4],
[3600,5],
[4500,6]
],
navigation: false
});
// Nivo Lightbox
$('#screenshots a').nivoLightbox({
effect: 'fadeScale'
});
// team carousel
var owl = $("#owl-carousel-team");
owl.owlCarousel({
itemsCustom: [
[0,1],
[900,2],
[1800,3],
[2700,4],
[3600,5],
[4500,6]
],
navigation: false
});

Related

I need to use Slick Carousel as a Hero Slider in my Website- JS

I'm still learning javascript and now I'm trying to get Slick Carousel working. I need it as a hero slider in my webpage
Slick carousel on github:
https://github.com/kenwheeler/slick/
Here's what I have so far:
<html>
<head>
<title>Hero Slider</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css"/>
</head>
<body>
<div class="single-item">
<div><img src="https://images.unsplash.com/photo-1604467758117-72d987cb513b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="test"></div>
<div><img src="https://images.unsplash.com/photo-1604475935971-c390654d2332?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=321&q=80" alt="test"></div>
<div><img src="https://images.unsplash.com/photo-1604470690311-c4136298584d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=714&q=80" alt="test"></div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<script type="text/javascript">
$('.single-item').slick();
});
</script>
</body>
</html>
Can you guide me what is missing to make this running? As said I need it to be a hero slider and also I will add a header to this webpage after this. So this should work with that too.

There was just a small typo.
<html>
<head>
<title>Hero Slider</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css"/>
</head>
<body>
<div class="single-item">
<div><img src="https://images.unsplash.com/photo-1604467758117-72d987cb513b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="test"></div>
<div><img src="https://images.unsplash.com/photo-1604475935971-c390654d2332?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=321&q=80" alt="test"></div>
<div><img src="https://images.unsplash.com/photo-1604470690311-c4136298584d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=714&q=80" alt="test"></div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<script type="text/javascript">
$('.single-item').slick();
//Removed a }); here
</script>
</body>
</html>

Photo Alignment when page loads should be grid

I am working on a page with picture that need to be displayed in a grid starting with 3 columns. But every time the page loads, the pictures all load as one column going straight down the left side of the page.
It is only once you stretch the browser that the photo realign.
I want it already in a grid of 3 columns as soon as page loads.
any ideas?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="{{site.baseurl}}/js/scrollspy.js"></script>
<script src="swipebox/lib/jquery-1.9.0.js"></script>
<script type="text/javascript" src="js/modernizr.custom.js"></script>
<script src="swipebox/lib/ios-orientationchange-fix.js"></script>
<script src="swipebox/lib/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="js/jquery-1.9.0.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
//When the DOM document is loaded in the browser
$(document).ready(function () {
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Custom Theme JavaScript -->
<script type="text/javascript">
$("#menu-close").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
$("#menu-toggle").show("active");
$("#menu-close").hide("active");
});
// Opens the sidebar menu
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
$("#menu-close").show("active");
$("#menu-toggle").hide("active");
});
// Closes the sidebar menu
$("#menu-close2").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper2").toggleClass("active")//slideUp(50);
});
// Opens the sidebar menu
$("#menu-toggle2").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper2").toggleClass("active")//slideDown(50);
});
/* Basic Gallery */
</script>
<script type="text/javascript">
// Scrolls to the selected menu item on the page
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>
<script src="bower_components/metisMenu/dist/metisMenu.min.js"></script>
<!-- Plugin JavaScript -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="js/classie.js"></script>
<script src="js/cbpAnimatedHeader.js"></script>
<!-- Contact Form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
<!-- Custom Theme JavaScript -->
<script src="js/agency.js"></script>
<script src="lib/ios-orientationchange-fix.js"></script>
<script src="lib/jquery-2.1.0.min.js"></script>
<script src="js/jquery.swipebox.js"></script>
<!-- <script type="text/javascript" src="js/SmoothScroll.js"></script>
--> <script type="text/javascript" src="js/jquery.isotope.js"></script>
<script type="text/javascript">
jQuery(function($) {
$(".swipebox").swipebox();
});
</script>
<!--
<script type="text/javascript">
$( document ).ready(function() {
/* Basic Gallery */
$( '.swipebox' ).swipebox();
/* Video */
$( '.swipebox-video' ).swipebox();
/* Dynamic Gallery */
$( '#gallery' ).click( function( e ) {
e.preventDefault();
$.swipebox( [
{ href : 'http://swipebox.csag.co/mages/image-1.jpg', title : 'My Caption' },
{ href : 'http://swipebox.csag.co/images/image-2.jpg', title : 'My Second Caption' }
] );
} );
});
</script>
-->
<!-- <script type="text/javascript" src="js/main.js"></script> -->
<script src="js/owl.carousel.js"></script>
<!-- <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
--><script src='http://npmcdn.com/isotope-layout#3/dist/isotope.pkgd.js'></script>
<script src="js/index.js"></script>
<link href="font-awesome/fonts/plugin.css" rel="stylesheet" type="text/css">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="css/plugin.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<!-- Custom CSS -->
<link rel="stylesheet" href="demo/normalize.css">
<link rel="stylesheet" href="demo/bagpakk.min.css">
<link rel="stylesheet" href="src/css/swipebox.css">
<link rel="stylesheet" href="css/stylish-portfolio.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="swipebox/src/css/swipebox.css">
<link rel="stylesheet" href="swipebox/src/css/swipebox.min.css">
<link rel="stylesheet" href="swipebox/demo/normalize.css">
<link rel="stylesheet" href="swipebox/demo/bagpakk.min.css">
<link rel="stylesheet" href="swipebox/demo/style.css">
<link rel="stylesheet" href="css/owl.carousel.css" media="screen">
<link rel="stylesheet" href="css/owl.theme.css"media="screen">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<section id="portfolio" class="portfolio" style="display: none;" >
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 text-center">
<h2><font style="text-transform: uppercase;"face="Helvetica" >Portfolio</font></h2>
<hr class="large">
</div>
</div>
<div class="button-group filters-button-group">
<button class="button is-checked" data-filter="*">show all</button>
<button class="button" data-filter=".ling">Lingeria</button>
<button class="button" data-filter=".men">Men</button>
<button class="button" data-filter=".women">Women</button>
</div>
<div class="grid">
<div class="element-item men " data-category="men">
<img class="img-portfolio img-responsive" src="img/1.jpg" style="width: 300px; height: 300px;">
</div>
<div class="element-item ling" data-category="ling">
<img class="img-portfolio img-responsive" src="img/2.jpg" style="width: 300px; height: 300px;">
</div>
<div class="element-item men" data-category="men">
<img class="img-portfolio img-responsive" src="img/3.jpg" style="width: 300px; height: 300px;">
</div>
<div class="element-item women" data-category="women">
<img class="img-portfolio img-responsive" src="img/4.jpg" style="width: 300px; height: 300px;">
</div>
<div class="element-item ling " data-category="ling">
<img class="img-portfolio img-responsive" src="img/5.jpg" style="width: 300px; height: 300px;">
</div>
</div>
</div>
</section>

Add this to end of Document.ready() :
$( window ).resize()
I think that should work, it calls the resize event on the browser which should trigger the change.
Ps: I'd suggest getting rid of all the different versions of Jquery you have loaded on your page.

Things in controller doesn't appear using AngularJS

I am trying to show silder using ng-repeat. But picture and other things in controller don't appear.
Here is my js code
angular.module('starter', [])
.controller('slider', function($scope) {
$(document).ready(function(){
$('.slider').slider({full_width: true});
});
$scope.pictures=[
{
img:"http://www.brics-info.org/wp-content/uploads/2015/08/Transmission-Lines.jpg,
info:"Эрчим хүчний барилга угсралт",
desc:"Засвар, тестчилэл"
},
{
img:"http://www.burns-group.com/images/uploads/projects/Amtrak-Zoo-Transmission-Line-3.jpg",
info:"Эрчим хүчний барилга угсралт",
desc:"Засвар, тестчилэл"
},
{
img:"http://www.sgceng.com/snp_lib/showpic.php?recordID=630&timestamp=1204139644&table=sgcengco",
info:"Эрчим хүчний барилга угсралт",
desc:"Засвар, тестчилэл"
}
] ;
})
This is index.html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<div class="slider" ng-app="starter" ng-controller="slider">
<ul class="slides">
<li ng-repeat="picture in pictures">
<img ng-src="{{picture.img}}"> <!-- image -->
<div class="caption center-align">
<h3 class="black-text">{{picture.info}}</h3>
<h5 class="blue blue-text text-lighten-4">{{picture.desc}}</h5>
</div>
</li>
</ul>
</div><!--slider-->
why it doesn't appear?

You should include controller in your index.html page. and use ng-app="moduleName" and use ng-controller="yourController". say script.js your controller file.
<!DOCTYPE html>
<html data-ng-app='starter'> /* used your module name as ng-app name */
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="angular.js#1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script> /* load your controller file */
</head>
<body ng-controller="slider"> /* use your controller */
<h1>Hello Plunker!</h1>
<div class="slider">
<ul class="slides">{{pictures}}
<li ng-repeat="picture in pictures">
<img ng-src="{{picture.img}}"> <!-- image -->
<div class="caption center-align">
<h3 class="black-text">{{picture.info}}</h3>
<h5 class="blue blue-text text-lighten-4">{{picture.desc}}</h5>
</div>
</li>
</ul>
</div>
</body>
</html>
PLUNKER Demo Link

FancyBox won't "pop"

I've been trying for 2 hours to get FancyBox to work and have no clue how it isn't working. Obviously I am missing something because it's just linking to the image.
Example: I link the image to my images folder (both the thumb and the large image), and when I click the image it just takes me to a new page and shows me the image rather than popping up.
Here is my code:
<head>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/stylish-portfolio.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="/stylish-portfolio/fancybox/source/jquery.fancybox.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="/stylish-portfolio/fancybox/source/helpers/jquery.fancybox-thumbs.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="/stylish-portfolio/fancybox/source/helpers/jquery.fancybox-buttons.css" media="screen"/>
<script type="text/javascript" src="/stylish-portfolio/fancybox/source/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="/stylish-portfolio/fancybox/source/jquery.fancybox.js"></script>
<script type="text/javascript" src="/stylish-portfolio/fancybox/source/helpers/jquery.fancybox-buttons.js"></script>
<script type="text/javascript" src="/stylish-portfolio/fancybox/source/helpers/jquery.fancybox-thumbs.js"></script>
<script type="text/javascript" src="/stylish-portfolio/fancybox/source/helpers/jquery.fancybox-media.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancyImg").fancybox();
});
</script></head>
<div class="row">
<div class="col-md-6">
<div class="portfolio-item">
<a class="fancyImg" href="img/portfolio-2.jpg" title="Lorem ipsum dolor sit amet"><img src="img/portfolio-2.jpg" alt="" /></a>
</div>
</div>

First thing I see is your are loading fancybox twice. Pick one.
<script type="text/javascript" src="/stylish-portfolio/fancybox/source/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="/stylish-portfolio/fancybox/source/jquery.fancybox.js"></script>

Inside the html body section I added this code
<a class="fancyImg" href="img1.jpg" title="Lorem ipsum dolor sit amet"><img src="img1.jpg" alt="" /></a>
<script type="text/javascript">
$(document).ready(function() {
$(".fancyImg").fancybox();
type:"iframe"
});
</script>
And it seems to be working fine :)

twitter bootstrap carousel not working properly ( symfony2 project )

when loading the page , my console says:
$('.carousel').carousel is not a function
the generated html source code (i use symfony & twig files) look like this :
<body>
<div class="container">
<div class="row">
<div class="span6 well">
<div id="myCarousel" class="carousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item"><img alt="" src="/projet_etienne_auth/web/bundles/etiennepsav/images/carousel1.jpg"></div>
<div class="item"><img alt="" src="/projet_etienne_auth/web/bundles/etiennepsav/images/carousel2.jpg"></div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
</div>
</div>
<!-- Le javascript
================================================== -->
<script rel="javascript" href="/projet_etienne_auth/web/bundles/etiennepsav/js/bootstrap.js" type="text/javascript" media="all" ></script>
<script rel="javascript" href="/projet_etienne_auth/web/bundles/etiennepsav/js/jquery-1.8.3.js" type="text/javascript" media="all" ></script>
<script rel="javascript" href="/projet_etienne_auth/web/bundles/etiennepsav/js/bootstrap-carousel.js" type="text/javascript" media="all" ></script>
<script rel="javascript" href="/projet_etienne_auth/web/bundles/etiennepsav/js/bootstrap-transition.js" type="text/javascript" media="all" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.carousel').carousel() ;
});
</script>
Would anyone spot what's wrong?
cheers

change your javascript at the end to the following..
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script rel="javascript" href="/projet_etienne_auth/web/bundles/etiennepsav/js/bootstrap.js" type="text/javascript" media="all" ></script>
<script type="text/javascript">
$(document).ready(function() {
$('.carousel').carousel();
});
</script>
the jquery library needs to be the first script file included, then the bootstrap.js file.
Only include the following script files if you didnt include them all within the bootstrap download package..
<script rel="javascript" href="/projet_etienne_auth/web/bundles/etiennepsav/js/bootstrap-transition.js" type="text/javascript" media="all" ></script>
<script rel="javascript" href="/projet_etienne_auth/web/bundles/etiennepsav/js/bootstrap-carousel.js" type="text/javascript" media="all" ></script>

There seems to be a double entry to your jquery libraries.
Also, move the jquery.min or jquery-1.8.3 to the first line (and remove one of them too, because they are essentially the same).

at the end i have downloaded again boostrap.js including the carousel at
http://twitter.github.com/bootstrap/customize.html
put in my html head like this
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script rel="javascript" href="{{ asset('bundles/etiennepsav/js/bootstrap.js') }}" type="text/javascript" media="all" ></script>
<script type="text/javascript">
$(document).ready(function() {
$('.carousel').carousel();
});
</script>
i have deleted the whole web folder from my symfony projet
then reloaded it using the console command
php app/console assets:install web

Categories

Resources