i would like to use ResponsiveSlides.js with jimdo;
how should i modify the header of my jimdo-page that it will work?
First link files:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="responsiveslides.min.js"></script>
Then add markup
<ul class="rslides">
<li><img src="1.jpg" alt=""></li>
<li><img src="2.jpg" alt=""></li>
<li><img src="3.jpg" alt=""></li>
</ul>
And then you can modify css accordingly.
Related
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>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
I've made a slideshow again but this, just like the previous one, doesn't seem to work. Could someone please explain why? I didn't make a fiddle because it seems to work on fiddle but not on my computer.
HTML
<html>
<title>Simple slideshow</title>
<head>Hot Air Balloons All Over The World
<link rel="stylesheet" type="text/css" href="fadein.css">
<script src="slide.js" type="text/javascript"></script>
</head>
<body>
<div id="slideshow">
<img src="HA balloon.jpg" width="600px" height="400px" title="Image credit:">
<img src="HA balloons.jpg" width="600px" height="400px">
<img src="HA balloon1.jpg" width="600px" height="400px">
<img src="HA balloon2.jpg" width="600px" height="400px">
<img src="HA.jpg" width="600px" height="400px">
</div>
</body>
</html>
CSS
#slideshow
{
position: relative;
width: 600px;
height: 400px;
}
#slideshow img
{
position: absolute;
left: 0;
right: 0;
}
JS
<script>
$(function(){
$('#slideshow img:gt(0)').hide();
setInterval(function(){
$('#slideshow :first-child').fadeOut()
.next('img').fadeIn()
.end().appendTo('#slideshow');},
3000);
});
</script>
You need to add jQuery inside your header.
JSfiddle has jQuery included so it works there.
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
I think you forgot to refer jquery in your code. Include this to your head tag,
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
Your html should look like
<html>
<title>Simple slideshow</title>
<head>Hot Air Balloons All Over The World
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="fadein.css">
<script src="slide.js" type="text/javascript"></script>
</head>
<body>
<div id="slideshow">
<img src="HA balloon.jpg" width="600px" height="400px" title="Image credit:">
<img src="HA balloons.jpg" width="600px" height="400px">
<img src="HA balloon1.jpg" width="600px" height="400px">
<img src="HA balloon2.jpg" width="600px" height="400px">
<img src="HA.jpg" width="600px" height="400px">
</div>
</body>
</html>
To make the code work I had to remove the script tags in the .js file. So anyone using this code you have to refer to jquery in your header in the HMTL file and you have to remove the tags like I just said.
<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="ASHLEYSIMONE/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="ASHLEYSIMONE/lib/jquery.bxslider.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider();
});
</script>
<ul class="bxslider">
<li><img src="/images/pic1.jpg" /></li>
<li><img src="/images/pic2.jpg" /></li>
<li><img src="/images/pic3.jpg" /></li>
<li><img src="/images/pic4.jpg" /></li>
</ul>
I've checked others users answers regarding this issue but I still can't figure it out. I have no idea what I'm doing wrong. Please help. This part is preventing me from finishing my site.
Try specifying to http:// for your first library.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
I'm making a site with a carousal with this tutorial:
www.tutorialzine.com/2010/09/html5-canvas-slideshow-jquery/
I just copied and pasted the code, saved it as a JavaScript file, and copied the script source line from the tutorial to my HTML file. This is it:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="script.js"></script>
However, the carousal isn't working for me (I tried to test the site using one image). Dreamweaver says that "script.js is not defined on a local disk." What does that mean and how do I fix it? I've searched Google but I can't find the answer.
Here is my html5 code:
<html lang="en-us">
<head>
<meta charset="UTF-8" />
<meta name="keyword" content=""/>
<meta name="description" content=""/>
<meta name="author" content"" />
<meta name="copyright" content="2013" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<header>
<h1><img src="img\logo.gif" alt="print-and-copy-logo"></h1>
</header>
<nav>
<ul>
<li class="header-about">about</li>
<li class="header-prints">the prints</li>
</ul>
</nav>
<div id="slideshow">
<ul class="slides">
<li><img src="img\photos\wedding-invitation.jpg" alt="wedding-invitation"></li>
<li><img src="" alt=""></li>
<li><img src="" alt=""></li>
<li><img src="" alt=""></li>
</ul>
<span class="arrow previous"></span>
<span class="arrow next"></span>
</div>
<footer>
<ul id="footer-text">
<li class="footer-president"> THE PRES</li>
<li class="footer-about"> ABOUT</li>
<li class="footer-press"> PRESS</li>
</ul>
<ul id="footer-social">
<li id="footer-twitter"><img src="img\icons\twitter-icon.png" alt=""></li>
<li id="footer-facebook"><img src="img\icons\facebook-icon.png" alt=""></li>
<li id="footer-tumblr"><img src="img\icons\tumblr-icon.png" alt=""></li>
</ul>
<ul id="footer-contact">
<li class="footer-phone">ph: 773.488.2626</li>
<br>
<li class="footer-hours">hrs: mon-fri 11am-5pm</li>
</ul>
</footer>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Thank you!
I was using the Dreamweaver tutorial and the same message happened. I found out that my CSS folder needed to have a styles.css and a print.css file to be attached and the page showed up. All of the coding had been done I was just getting the error message that the local disk did not have my folder.
I'm new to js, so this probably is a beginners problem.
For my mobile website, I want the menu to appear with slideToggle when clicking on a menu icon on the top.
Here is my HTML:
<html>
<head>
<meta charset='utf-8'>
<link rel="stylesheet" href="styles2.css">
<script src="script.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<title>CSI - Home</title>
</head>
<body>
<img src="img/logo.png" alt="logo"/>
<div class="menu_icon"><img src="img/menu_icon.png" alt="menu_icon"/></div>
<div class="nav">
<nav>
<ul>
<li><img src="img/home.png" alt="home"/>Home_</li>
<li><img src="img/paper.png" alt="paper"/>Story_</li>
<li><img src="img/glass.png" alt="glass"/>Course_</li>
<li><img src="img/archive.png" alt="archive"/>Archive_</li>
<li><img src="img/facebook.png" alt="facebook"/>Discuss with Facebook_</li>
<li><img src="img/twitter.png" alt="twitter"/>Discuss with Twitter_</li>
</ul>
</nav>
</div>
</body>
</html>
Here is my javascript:
$(document).ready(function(){
$(".menu_icon").on("click", function(){
$('.nav').slideToggle();
});
I would like the .nav to show up with slideToggle when clicking the .menu_icon class / image.
Can anyone please help me out?
Thanks in advance!
});
assuming that <script src="script.js"></script> is the jquery library,
it looks like
you forgot to close the $(document).ready
$(document).ready(function(){
$(".menu_icon").on("click", function(){
$('.nav').slideToggle();
});
});
Your forgot to add jQuery (as Jeff Shaver noticed) : add
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
in your head to load the jQuery library.
Moreover, you forgot to close the $(document).ready(function(){ with }); at the end of your code (see trajce answer).
See this fiddle for a working example.