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.
Related
I believe this question has been asked multiple times and I have researched many other articles but I'm afraid I'm at a complete impasse...
I am trying to make a very basic flexslider but it simply does not seem to want to work for me. The images appear as lists, so the HTML and the image links would seem to be Ok. This leads me to believe I have missed something in the JS.
Would anybody be able to advise me?
Many Thanks in advance.
Ryan
<!DOCTYPE html>
<html>
<head>
<!-- Place somewhere in the <head> of your document -->
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>
<!-- Place in the <head>, after the three links -->
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
</head>
<body>
<!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
<ul class="slides">
<li>
<img src="../lachantongeimg/group.jpg" alt=""/>
</li>
<li>
<img src="../lachantongeimg/howtojoin.jpg" alt=""/>
</li>
<li>
<img src="../lachantongeimg/playmusic.jpg" alt=""/>
</li>
</ul>
</div>
</body>
</html>
If your photos appear like a list, must be the CSS file. Make sure the file exist or fix your path.
The only difference that I found with the official documentation is the option to animate:
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide"
});
});
here there is a basic example working exactly as you have:
https://jsbin.com/jicodadace/2/edit?html,console,output
Link to jQuery plugin github and documentation
It is the exact same code, the only difference being that I link to several sources/external files instead of just throwing them all into one big file like on jsfiddle. But I get no error in the browser console, everything is linked properly.
It image lightbox works, the video light almost works, I just get a black blank empty light when clicking on the video link. When clicked this gets added to the HTML, but the HTML is empty inside the iframe. But on jsfiddle it is not.
<iframe class="lg-video-object lg-youtube " src="//www.youtube.com/embed/VXEkoXgb4bI?wmode=opaque&autoplay=1&enablejsapi=1" allowfullscreen="" height="315" frameborder="0" width="560">
#document
<html>
<head></head>
<body></body>
</html>
</iframe>
I've been over and over this, and I can't even come up with one reason why it happens, I've tested in Firefox, Chrome and even IE. And since it works on jsfiddle in Firefox, so it can't really be the browser.
Any help is really appreciated, I'm so in the woods. I'm hoping it is just something really simple that I can't see because I've stared at intensely for hours.
Thanks.
Link to jsfiddle: http://jsfiddle.net/vtkv4j2h/5/
Link to the local files: https://mega.nz/#F!4QhXhQaY!vaIMGXqYSzJf8s8qkVouqg
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Why doesn't this work, when it works on jsfiddle</title>
<link rel="stylesheet" href="lightgallery.min.css" media="screen" title="lightgallery">
</head>
<body>
<div id="lightgallery">
<a href="https://dummyimage.com/1200x700/000/fff.jpg">
<img src="https://dummyimage.com/300x200/000/fff.jpg" />
</a>
<a href="https://dummyimage.com/1200x700/d40fd4/0011ff.jpg">
<img src="https://dummyimage.com/300x200/d40fd4/0011ff.jpg.jpg" />
</a>
<a href="https://dummyimage.com/1200x700/44d613/0011ff.jpg">
<img src="https://dummyimage.com/300x200/44d613/0011ff.jpg" />
</a>
<a href="https://dummyimage.com/1200x700/1ff068/0011ff.jpg">
<img src="https://dummyimage.com/300x200/1ff068/0011ff.jpg" />
</a>
<a href="https://dummyimage.com/1200x700/5e6063/0011ff.jpg">
<img src="https://dummyimage.com/300x200/5e6063/0011ff.jpg" />
</a>
<a href="https://www.youtube.com/watch?v=VXEkoXgb4bI" data-poster="https://dummyimage.com/1200x700/fc1241/313de6.jpg&text=click-to-play">
<img src="https://dummyimage.com/300x200/fc1241/313de6.jpg&text=Video1"/>
</a>
<a href="https://www.youtube.com/watch?v=VkzVgiYUEIM" data-poster="https://dummyimage.com/1200x700/73f00c/313de6.jpg&text=click-to-play">
<img src="https://dummyimage.com/300x200/73f00c/313de6.jpg&text=Video2"/>
</a>
<a href="https://www.youtube.com/watch?v=7BWWWQzTpNU" data-poster="https://dummyimage.com/1200x700/f7ff00/313de6.jpg&text=click-to-play">
<img src="https://dummyimage.com/300x200/f7ff00/313de6.jpg&text=Video3"/>
</a>
</div>
<script src="jquery.js" charset="utf-8"></script> <!-- jQuery v3.1.0 -->
<script src="lightgallery.min.js" charset="utf-8"></script>
<script src="lg-video.min.js" charset="utf-8"></script>
<script src="js.js" charset="utf-8"></script>
</body>
</html>
js.js
$(document).ready(function() {
$("#lightgallery").lightGallery();
});
Thank you all for help and suggestions.
#Novice was right.
Are you sure using a web-server to access if your url shows something
like this file:/// rather than http:// then its a problem
Switching to a properly virtual box solved the issue.
How I can to use lightbox 2 options? How to include in document? It does not work as specified on the site http://lokeshdhakar.com/projects/lightbox2/#options
<script>
lightbox.option({
'resizeDuration': 200,
'wrapAround': true
})
</script>
<a class="example-image-link" data-lightbox="example-set" href="pic.png">
<img style="width: 100%" src="pic.png">
</a>
How do you set the lightbox options?
Make sure you are including both the lightbox.js AND lightbox.css stylesheet.
You will also need jQuery 1.7 or greater (as stated in step 4 of the Getting Started section of the Lightbox website). You should include the jQuery script before the lightbox script.
This setup worked for me:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css" />
<script src="jquery-1.11.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js"></script>
</head>
<body>
<a class="example-image-link" data-lightbox="example-set" href="pic.png">
<img style="width: 100%" src="pic.png">
</a>
<script>
lightbox.option({
'resizeDuration': 200,
'wrapAround': true
})
</script>
</body>
</html>
I want to create a slide show of images in which the image in background slides one by one but the text should float over it.
The final thing I want to achieve is this.
I have followed the post in msdn article, I downloaded the slideShow.js file and applied on the images and it's working perfectly. Now how do I float the text over the image?
My code is:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Slide Show</title>
<style type="text/css">
.size
{
height:300px;
width:500px;
}
.lab
{}
</style>
</head>
<body>
<div>
<label class="lab">This is Label</label>
<div id="slideShowImages">
<img src="1.jpg" alt="Slide 1" class="size" />
<img src="2.jpg" alt="Slide 2" class="size"/>
<img src="3.jpg" alt="Slide 3" class="size"/>
<img src="4.jpg" alt="Slide 4" class="size"/>
</div>
</div>
<script src="slideShow.js"></script>
</body>
</html>
The label would be the text displayed over image.
Please help.
Install WoW Slider and import all the images to be slided and also you can give text for each and every image so that while the image slides the corresponding text will also come along with it
http://wowslider.com/ - You can choose your favourite sliding template
I need help changing the height or width of this html 5 video. I am using html 5 and javascript to try to change the size of the video.
The following is my code:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="default.css">
<script type="text/javascript">
document.getElementById("mainvideo").setAttribute(height,'400px');
alert('Hello');
</script>
</head>
<body>
<div id="header">
</div>
<div style="text-align:center;">
<video id="mainvideo">
<source src="movie.mp4" type="video/mp4" />
This is Fall Back Content
</video>
</div>
</body>
</html>
I have a css file that does not do anything but align the video to the middle of the screen. Is this a java script problem that is not changing the height of this video to 400px? or an html 5 problem. I also dont have a local video on me to display on screen if that is the problem also. Thanks to anyone that can help out
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="default.css">
<script type="text/javascript">
window.onload=function(){
document.getElementById("mainvideo").style.height='400px';
alert('Hello');
};
</script>
</head>
<body>
<div id="header">
</div>
<div style="text-align:center;">
<video id="mainvideo">
<source src="movie.mp4" type="video/mp4" />
This is Fall Back Content
</video>
</div>
</body>
</html>
I don't think height is an attribute anymore, it's a CSS property.
edit: Actually, It may never have been an HTML attribute. According to http://www.codehelp.co.uk/html/deprecated.html, width used to be an attribute, but not height.