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
Related
Hi I am trying to create an effect somewhat like that https://cuberto.com/contacts/ (Hover on the silver-bordered buttons Ex: site from scratch, UX/UI Design or click on the menu on the top right side and hover on menu items) I am trying to create a same effect but with the images Like whenever I hover the Images (Logos) the logo have to go up and come from beneath I tried to do that but didn't get right way how to implement this thing. I searched all over the internet but didn't get the answer not even from Youtube and here at StackOverflow so I wanna know how to do this thing correctly and any idea what this effect is called?
Any kind of help is highly appreciated :)
let test = document.querySelectorAll('.client-logo')
test.forEach(function(i){
i.addEventListener('onmouseover ',function(){
i.classList.add('moveup')
})
})
.logos-container{
background: #ddd;
}
.logos-container .client-logo{
width: 8rem;
}
.logos-container .client-logo img{
width: 100%;
}
.round-logo{
width: 5rem !important;
}
.rect-logo{
width: 14rem !important;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class=" container logos-container d-flex justify-content-between align-items-center flex-wrap px-4 py-3">
<div class="client-logo">
<img src="https://cdn.worldvectorlogo.com/logos/nasa-6.svg" alt="">
</div>
<div class="client-logo">
<img src="https://cdn.worldvectorlogo.com/logos/microsoft.svg" alt="">
</div>
<div class="client-logo">
<img src="https://cdn.worldvectorlogo.com/logos/ibm.svg" alt="">
</div>
<div class="client-logo">
<img src="https://cdn.worldvectorlogo.com/logos/dell-computer.svg" alt="">
</div>
<div class="client-logo">
<img src="https://cdn.worldvectorlogo.com/logos/hp-2.svg" alt="">
</div>
<div class="client-logo">
<img src="https://cdn.worldvectorlogo.com/logos/coca-cola-6.svg" alt="">
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
BH
In your JavaScript you're setting the class name of the element hovered over (which can also be done in CSS with :hover) to "moveup", but then don't define it in your CSS
To make transitions in CSS use the property transition:1s, for example, makes CSS transitions take 1 second (in first class), then in the class that you want animated to simply apply background: repeat etc., Look up in other places how to do the proper background repeat you're looking for, and together with transition it should do at least something and lead you in the right direction.
I have following html page
<html>
<body>
<img src="..."/>
<img src="..."/>
<img src="..."/>
</body>
</html>
I want to make the pdf of this page but every image should be on new page.
You could loop over the images using Javascript.
Then for each image store is as an data url with dom-to-image here
and print each dataUrl with pdfmake here
Use css property
page-break-before: always;
See example HTML below:
<html>
<head>
<style>
.page-heading { page-break-before: always; }
</style>
</head>
<body>
<img src="..."/>
<div class="page-heading">
<img src="..."/>
</div>
<div class="page-heading">
<img src="..."/>
</div>
</body>
</html>
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.
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!