I've been searching around and trying to find an answer to Blueimp not working...
This is heavily frustrating, and this is a school team website, and I kind of want it done very soon.
Here is the snippet of my code:
<!-- Images -->
<div id="links">
<a href="1.jpg" title="Banana">
<img src="1.jpg" alt="Banana">
</a>
<a href="2.jpg" title="Apple">
<img src="2.jpg" alt="Apple">
</a>
</div>
<!-- Photo Gallery Courtesy of Blueimp -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
<script type="text/javascript">document.getElementById("links").onclick=function(e){e=e||window.event;var t=e.target||e.srcElement,n=t.src?t.parentNode:t,r={index:n,event:e},i=this.getElementsByTagName("a");blueimp.Gallery(i,r)}</script>
These are the references in my head section:
<!-- Styles -->
<link rel="stylesheet" href="/css/bootstrap.min.css" />
<link rel="stylesheet" href="/css/styles.css" />
<link rel="stylesheet" href="/css/animate.css" />
<link rel="stylesheet" href="/css/blueimp-gallery.min.css" />
<link rel="stylesheet" href="/css/bootstrap-image-gallery.min.css" />
These are the JS references at the bottom of the document:
<!-- JS at bottom for faster load -->
<script type="text/javascript" src="/scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="/scripts/menu_jquery.js"></script>
<script type="text/javascript" src="/scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="/scripts/jquery.nicescroll.min.js"></script>
<script type="text/javascript" src="/scripts/jquery.blueimp-gallery.min.js"></script>
<script type="text/javascript" src="/scripts/bootstrap-image-gallery.min.js"></script>
It would be very kind if someone could tell me what is wrong? Personally, the documentation seems very vague, and this seems like a great product. I will now describe what I'm getting.
I'm getting the images, all right, but they aren't resized and quite large... It looks nothing like a gallery. I can click on the images, however, it just darkens the page like it's supposed to but no image gallery sliding fancy stuff.
So, is there a better gallery system or better tutorials, maybe even better, someone who can teach me exactly how to do this?
Much appreciated!
include atribute data-gallery in a
Example:
<div id="links">
<a href="1.jpg" title="Banana" data-gallery>
<img src="1.jpg" alt="Banana">
</a>
<a href="2.jpg" title="Apple" data-gallery>
<img src="2.jpg" alt="Apple">
</a>
</div>
Related
I've recently been playing around with Materialize-css trying to get use to building websites. However, I noticed that when I try to add JavaScript features it does not seem to work. I've double checked to make sure I have all the right folders in place - js, css, & fonts, and the correct script loading as well. Here is a sample of my jQuery & index.html file:
$('.parallax').parallax();
$('.dropdown-trigger').dropdown();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<ul id="dropdown1" class="dropdown-content">
<li>macOS</li>
<li>iOS</li>
<li class="divider"></li>
<li>Android</li>
</ul>
<!--<div class="navbar-fixed">-->
<nav>
<div class="nav-wrapper" style="background-color: #323643;">
Logo
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>Home</li>
<li>About</li>
<li><a class="dropdown-trigger" href="#" data-target="dropdown1">Downloads<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
<!--</div>-->
<div class="parallax-container">
<div class="parallax"><img src="images/oneway.jpg"></div>
</div>
<div class="section white">
<div class="row container">
<h2 class="header">Parallax</h2>
<p class="grey-text text-darken-3 lighten-3">Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.</p>
</div>
</div>
<div class="parallax-container">
<div class="parallax"><img src="images/oneway.jpg"></div>
</div>
<!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>
As you can see I'm trying to add a Parallax, and a drop down menu button to my website. In order to do this I've been instructed to add the jQuery '$('.parallax').parallax();', and '$('.dropdown-trigger').dropdown();', in the $(document).ready(function()) in the materialize.js file. See the documentation here: https://materializecss.com/parallax.html, & https://materializecss.com/dropdown.html.
Here is a picture of what I'm getting when I run this code:
The Downloads drop down button should be displaying one, two, three, etc., when I click it, and there should be a background image using the Parallax. Does anyone notice something I'm missing?
I think your library placing is wrong. Please check it with below changes. Now I am not getting any error
$(document).ready(function(){
$('.parallax').parallax();
$('.dropdown-trigger').dropdown();
});
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<!--Import Google Icon Font-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/js/materialize.min.js'></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<ul id="dropdown1" class="dropdown-content">
<li>macOS</li>
<li>iOS</li>
<li class="divider"></li>
<li>Android</li>
</ul>
<!--<div class="navbar-fixed">-->
<nav>
<div class="nav-wrapper" style="background-color: #323643;">
Logo
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>Home</li>
<li>About</li>
<li><a class="dropdown-trigger" href="#" data-target="dropdown1">Downloads<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
<!--</div>-->
<div class="parallax-container">enter code here
<div class="parallax"><img src="images/oneway.jpg"></div>
</div>
<div class="section white">
<div class="row container">
<h2 class="header">Parallax</h2>
<p class="grey-text text-darken-3 lighten-3">Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.</p>
</div>
</div>
<div class="parallax-container">
<div class="parallax"><img src="images/oneway.jpg"></div>
</div>
</body>
</html>
I figured it out.
Apparently the JQuery is supposed to be added to this function:
(function($){
$(function(){
$('.sidenav').sidenav();
$('.parallax').parallax();
}); // end of document ready
})(jQuery);
I'm frustating 2 days just wanna make slider with parallax scrolling, the first I use bootstrap with parallax.js but seems more complicated, since parallax.js cannot integrate with <img src> it uses div <div class="parallax-window" data-parallax="scroll" data-image-src="/path/to/image.jpg"></div>, and bootstrap carousel use <img src>.
So I use lightslider with parallax.js but I got the same, the slider and parallax seems running but the slider wont change the picture, can someone help me please?
Here's my code
<div class="item">
<ul id="content-slider" class="content-slider">
<li>
<div class="parallax-window" data-parallax="scroll" data-image-src="../images/bg1.jpg"></div>
</li>
<li>
<div class="parallax-window" data-parallax="scroll" data-image-src="../images/bg2.jpg"></div>
</li>
<li>
<div class="parallax-window" data-parallax="scroll" data-image-src="../images/bg3.jpg"></div>
</li>
</ul>
</div>
Here my source
<!--slider -->
<link type="text/css" rel="stylesheet" href="css/lightslider.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/lightslider.js"></script>
<script src="js/parallax.min.js"></script>
<script>
$(document).ready(function() {
$("#content-slider").lightSlider({
loop:true,
item:1,
keyPress:true
});
</script>
I use http://pixelcog.github.io/parallax.js/
and http://sachinchoolur.github.io/lightslider/
I have added flexslider js and css files, also added the slider block code as the official sample had added them. In the result, i can't see the images in any browser, but in "View Source" mode, i can see the changes has made by js file and there isn't any problem in there.
When i removed the css or the js file from images were shown properly, but when i added them again, prev, next and navigation links are added but images disapear.
What should i do?
My codes:
<head>
<meta charset="utf-8">
<title>Untitled</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="jquery.flexslider-min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="flexslider.css">
</head>
And my code for the slider block:
<div class="flexslider">
<ul class="slides">
<li>
<img src="slide1.jpg" />
</li>
<li>
<img src="slide2.jpg" />
</li>
<li>
<img src="slide3.jpg" />
</li>
<li>
<img src="slide4.jpg" />
</li>
</ul>
</div>
And js code to enable flexslider:
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide"
});
});
I cannot get Bootstrap Carousel to start, um, carousel-ing. Below is all the code that is involved with what I'm trying to do. When it renders in the browser, all I see are two images, one above the other, and a less-than and greater-than beneath them. It's just rendering the DIVs as defined by the HTML as opposed to rendering in a Carousel. I verified that the jQuery.ready function is being called, and is calling the code to initialize the carousel. I also tried this on multiple browsers - IE9, Chrome, and Firefox. I'm running out of ideas. Any help would be appreciated. Thanks!
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link type="text/css" href="styles/carousel.css" />
<script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap-transition.js"></script>
<script type="text/javascript" src="Scripts/bootstrap-carousel.js"></script>
</head>
<body>
<script type="text/javascript">
$(function () {
$('#carousel').carousel();
});
</script>
<div id="carousel" class="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="images/APM_icon_big.png" alt="Some Alt Text" />
<div class="carousel-caption">
Some caption
</div>
</div>
<div class="item">
<img src="images/appdev_icon_big.png" alt="Some Alt Text" />
<div class="carousel-caption">
Some caption
</div>
</div>
…
</div>
<a class="carousel-control left" href="#carousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#carousel" data-slide="next">›</a>
</div>
</body>
</html>
It seems to be working just fine in this fiddle
Be sure to include the styles defined by bootstrap for the carousel : the css included in the fiddle comes from the twitter-bootstrap custom download page selecting only the JS components > Carousel.
It might not hurt to put your <script> inside the <head> or at the end of your page.
I figured it out. I was missing a rel="stylesheet" in my LINK tag!
I'm trying to get this vertical list to load the document titles I put inside the Load_content() during an Onclick event. The satisfactory outcome will be that everytime I click a new link... a new PDF loads into the iframe
<html>
<head>
<title> Literature of Andrew Willis
</title>
<link rel="stylesheet" href="mycss.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/cssverticalmenu.css" />
<script language="javascript" type="text/javascript">
function load_content (link) {
document.getElementById("iframe").setAttribute("src","link" );
}
</script>
</head>
<body>
<div id="logo">
<img src="mainlogo.jpg" height=100 width=400>
</div>
<div id="content">
<div id="leftcolumn">
<ul class="glossymenu">
<li>Short Essays</li>
<li><a href="#" onclick="load_content(hangmansdog.pdf)" >Poetry</a></li>
<li><a href="http://www.pourinpourout.com" >Blog</a></li>
</ul>
</div>
<div id="rightcolumn">
<div id="content">
<iframe id="iframe1" src="#"></iframe>
</div>
</div>
</div>
</body>
You have a few typos in your code. You gave your iframe an id of "iframe1" but referenced it in your JS using "iframe". You also shouldn't have quotes around link because you are using it as a variable, line 13 should look like this:
document.getElementById("iframe1").setAttribute("src",link );
You will however, probably want to put single quotes around the links themselves when you go to link them. i.e. onclick="load_content('Look at me now.pdf')"