I'm practicing customizing bxSlider direction buttons.
As you can see, I changed .bx-controls-direction a's width & height to put different background images.
prev button works well, but next button seems weird. When I hover on it, it appears two different size same icons. How can I fix this?
the image is here: https://i.postimg.cc/5NdXKznk/2.png
HTML/JS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bxSlider</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<h1>my beautiful moments</h1>
<div class="slider">
<div class="slide"><img src="./img/a.jpg" alt=""></div>
<div class="slide"><img src="./img/b.jpg" alt=""></div>
<div class="slide"><img src="./img/c.jpg" alt=""></div>
<div class="slide"><img src="./img/d.jpg" alt=""></div>
<div class="slide"><img src="./img/e.jpg" alt=""></div>
<div class="slide"><img src="./img/f.jpg" alt=""></div>
</div>
<script>
$(document).ready(function() {
$('.slider').bxSlider({
mode: 'fade',
slideWidth: 500,
auto: true,
pause: 1800
});
});
</script>
</body>
</html>
CSS:
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300;400;600&display=swap');
body {
font-family: 'Open Sans', sans-serif;
}
h1 {
text-align: center;
text-transform: uppercase;
}
.bx-wrapper {
box-shadow: none;
border: none;
margin: 1rem auto;
}
.bx-wrapper .bx-controls-direction a {
width: 90px;
height: 90px;
}
.bx-wrapper .bx-prev {
left: -10rem;
background: url('../img/arrow_t3_prev.png');
}
.bx-wrapper .bx-next {
background: url('../img/arrow_t3_next.png');
right: -10rem;
}
I figured it out myself.
I had to specify classes more in css.
CSS:
.bx-wrapper .bx-controls-direction .bx-prev {
background: url('../img/arrow_t3_prev.png') no-repeat;
left: -10rem;
}
.bx-wrapper .bx-controls-direction .bx-next {
background: url('../img/arrow_t3_next.png') no-repeat;
right: -10rem;
}
Now it works perfectly.
Related
I'm trying to create a fullscreen crossfade slideshow with bxslider, but one thing that I cannot complete.
There is space around images while the slideshow is going well.
I want to expand images entire window...
The slideshow is going well.
HTML
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<title>Fading image slideshow</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
</head>
<body>
<ul id="slider">
<li style="background-image: url(img01.jpg);"></li>
<li style="background-image: url(img02.jpg);"></li>
<li style="background-image: url(img03.jpg);"></li>
<li style="background-image: url(img04.jpg);"></li>
<li style="background-image: url(img05.jpg);"></li>
<li style="background-image: url(img06.jpg);"></li>
</ul>
<script>
$(function() {
$('#slider').bxSlider({
mode: 'fade',
speed: 2000,
pause: 8000,
auto: true,
pager: false,
controls: false,
touchEnabled: false
});
});
</script>
</body>
CSS
body {
margin: 0;
padding: 0;
}
.bx-viewport {
left: 0;
box-shadow: none;
border: none;
}
#slider li {
height: 100vh;
width: 100%;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
I don't need any space, and I just want images to expand full screen size.
Hello Please check below css code add it to your css and then check please confirm me also.
ul#slider{margin: 0px;}
ul#slider li{left: 0px;}
.bx-wrapper{margin: 0px; border: 0px;}
Try to reset the default margin and padding by adding this styles:
ul#slider{
margin: 0;
padding: 0
}
I need your help with creating jquery photo gallery. I need to make this page responsive. I need to add next and previous buttons. I also need to add stop and resume buttons. But most important, I need to make it responsive.
Thanks for any feedback.
Thank you very much.
My code by far is below.
$(".thumb").click(function () {
$("#large img").attr("src", $(this).children("img").attr("src"));
$(".active").removeClass("active");
$(this).addClass("active");
});
setInterval(function () {
var $dalsi = $(".active").next();
if($dalsi.length == 1) {
$dalsi.click();
}
else {
$("#thumbnails .thumb:first-child").click();
}
}, 1000);
main {
max-width: 1024px;
margin: 0 auto;
}
#large {
width: 100%;
height: 400px;
overflow: hidden;
}
#thumbnails {
width: 100%;
}
#large img {
height: 100%;
display: block;
margin: 0 auto;
}
.thumb {
height: 200px;
width: 24%;
box-sizing: border-box;
display: inline-block;
overflow: hidden;
}
.thumb img {
height: 100%;
width: auto;
margin: 0 auto;
}
.thumb.active {
border: solid 1px red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<div id="large">
<img src="http://w03000.mycloudware.net/wp-content/uploads/2014/08/Brambora.jpg">
</div>
<div id="thumbnails">
<div class="thumb active">
<img src="http://w03000.mycloudware.net/wp-content/uploads/2014/08/Brambora.jpg">
</div>
<div class="thumb">
<img src="http://wiki.rvp.cz/#api/deki/files/12941/=brambora_hliza.jpg">
</div>
<div class="thumb">
<img src="http://instory.cz/content/images/59/9d/599d2fbda3daf-985.jpg">
</div>
<div class="thumb">
<img src="http://www.bonella.cz/public/userfiles/obrazky-clanky/hubnuti/diety/brambora.jpg">
</div>
</div>
</main>
<script src="jquery-3.3.1.js"></script>
<script src="script.js"></script>
</body>
</html>
Thanks for help.
I've made a photo gallery by HTML and CSS. I want, when I'll click on in, my image will display in full size slowly in a box. But I don't know how can I make it. Can you help me to solve this? If possible, please give me full code. My code is:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> My gallery</title>
<style type="text/css">
.gallery {
border: 1px solid #000;
width: 160px;
}
.img_head {
border-bottom: 1px solid #000;
text-align: center;
}
img {
height: 150px;
width: 150px;
margin: 5px;
}
img:hover {
height: 158px;
width: 158px;
margin: 1px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="gallery">
<div class="img_head">
<h3>My Image</h3>
</div>
<img src="http://i.imgur.com/jnMGOR9.jpg?1" alt="image" />
</div>
</body>
</html>
Here is an example that might work for you:
jsFiddle Demo
HTML:
<div id="overlay" class="abs"></div>
<div id="lb" class="abs">
<div id="lbHead">
<div id="lbTitle">Your image</div><div id="lbX">X</div>
</div>
<div id="lbBody">
</div>
</div>
<div class="gallery">
<div class="img_head">
<h3>My Image</h3>
</div>
<img src="http://i.imgur.com/jnMGOR9.jpg?1" width="50" height="50" alt="image" />
</div>
js/jQuery:
$('img').click(function(){
var tmp = $(this).attr('src');
$('#lbBody').html('<img src="'+tmp+'" />');
$('#overlay, #lb').fadeIn(1800);
});
$('#lbX').click(function(){
$('#overlay, #lb').fadeOut(800);
});
CSS:
.abs {position:absolute}
#overlay{top:0;left:0;right:0;bottom:0;background:black;opacity:0.5;}
#lb{top:5%;left:3%;width:94%;height:50%;overflow:hidden;}
#lbHead{height:40px;width:100%;background:darkcyan;}
#lbTitle{float:left;width:70%;height:30px;color:white;}
#lbX{float:right;width:30px;height:30px;padding:10px;text-align:center;}
#lbX:hover{background:white;color:darkcyan;cursor:pointer;}
img:hover{cursor:pointer;}
#overlay, #lb{display:none;}
You can use these type of gallery
http://www.jqueryscript.net/demo/Responsive-Photo-Gallery-with-jQuery-and-Bootstrap-3/
https://blueimp.github.io/Bootstrap-Image-Gallery/
http://ironsummitmedia.github.io/startbootstrap-thumbnail-gallery/#
I want to create a simple slideshow with JavaScript. I found this link Page
and I want the last slideshow. The slideshow with the header 'scrollRight (click)'. But it doesn't work on my page. The problem is when I press sometimes on the picture, then its away. Here is my page
MyPage and here the code:
*{
padding: 0px;
margin: 0px;
font-family: Raleway;
line-height: 20px;
}
body{
background-image: url(images/hintergrund.png);
}
section{
margin-top: 20px;
width: 1100px;
background: white;
border: 2px solid black;
box-shadow: 8px 8px 10px 0px rgba(0,0,0,0.75);
margin-left: auto;
margin-right: auto;
padding: 20px;
}
article{
width: 100%;
background-color: red;
overflow: hidden;
}
.one{
height: 200px;
width: 200px;
float: left;
}
.two{
float: right;
width: 860px;
word-wrap: break-word;
background-color: blue;
height: 200px;
}
<html>
<head>
<title>Homepage</title>
<link rel="stylesheet" href="index.css">
<link href='http://fonts.googleapis.com/css?family=Raleway:600' rel='stylesheet' type='text/css'>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.one').cycle({
fx: 'scrollRight',
next: '.one',
timeout: 0,
easing: 'easeInOutBack'
});
});
</script>
</head>
<body>
<section>
<article>
<div class="one">
<img src="http://placehold.it/200x200" width="200" height="200" />
<img src="http://placehold.it/200x200" width="200" height="200" />
<img src="http://placehold.it/200x200" width="200" height="200" />
<img src="http://placehold.it/200x200" width="200" height="200" />
</div>
<div class="two">
<h1>Ansteckbutton</h1>
<br>
<p>
Groesse: 30cm Durchmesser
<br>
Farbe: Rot
<br>
Material: Metall
<br>
Form: Rund
</p>
</div>
</article>
<br>
<hr>
<br>
<article>
<div class="one">
</div>
<div class="two">
exampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexamleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampampleexampleexampleexampleexampleexamleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexamleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexamleexample
</div>
</article>
</section>
</body>
</html>
<!-- article mehrfach verwenden
Working Fiddle
There is something wrong with the parameters you are providing.
Just try this;
$(document).ready(function() {
$('.one').cycle();
});
Without parameters working fine.
Updated Working Fiddle
$(document).ready(function() {
$('.one').cycle({
fx: 'scrollRight',
next: '.one',
timeout: 0
});
});
Issue:
It was issue with applying easing: 'easeInOutBack' and it was throwing below error on the console. Removing attribute fixed the issue.
TypeError: d.easing[(intermediate value)] is not a function
For further investigation of this issue check this stackoverflow answer.
I have used multiple jQuery in my page. Two of them are working fine.When I tried to integrate the galleria script, it says,
Error: $("ul.gallery_demo").galleria is not a function
The code is working for me separately. Here's the code.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="css/galleria.css" rel="stylesheet" type="text/css" media="screen">
<!--script type="text/javascript" src="js/jquery.min.js"></script-->
<script type="text/javascript" src="js/jquery.galleria.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.gallery_demo_unstyled').addClass('gallery_demo');
$('ul.gallery_demo').galleria({
history : true,
clickNext : true,
insert : '#main_image',
onImage : function(image,caption,thumb) {
image.css('display','none').fadeIn(1000);
caption.css('display','none').fadeIn(1000);
var _li = thumb.parents('li');
_li.siblings().children('img.selected').fadeTo(500,0.3);
thumb.fadeTo('fast',1).addClass('selected');
},
onThumb : function(thumb) {
var _li = thumb.parents('li');
var _fadeTo = _li.is('.active') ? '1' : '0.3';
thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);
thumb.hover(
function() { thumb.fadeTo('fast',1); },
function() { _li.not('.active').children('img').fadeTo('fast',0.3); }
)
}
});
});
</script>
<style type="text/css">
/* BEGIN DEMO STYLE */
*{margin:0;padding:0; }
h1,h2{font:bold 80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}
/*a{color:#348;text-decoration:none;outline:none;}
a:hover{color:#67a;}*/
a{color:#FFFFFF;text-decoration:none;outline:none;}
a:hover{color:#CCCCCC;}
.caption{color:#FFFFFF; font-weight:bold; width:700px; height:30px; float:left; padding-top:8px; clear:both; }
.demo{margin-top:2em; }
.gallery_demo{width:720px; float:left; padding-left:5px; }
/*.gallery_demo li{width:100px;height:100px;border:3px double #111; float:left;}*/
.gallery_demo li{width:100px;height:100px;border:3px double #eaeaea; float:left;}
.gallery_demo li div{left:0px;}
.gallery_demo li div .caption{font:italic 0.7em/1.4 georgia,serif; }
#main_image{height:480px;width:700px; float:left; }
#main_image img{ border:5px solid #666666; width:700px; height:438px; }
/*#nav{padding-top:15px;clear:both;font:80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}*/
#nav{padding-top:15px;clear:both;font:80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;color:#FFFFFF;}
.info{text-align:left;width:500px;margin:0px auto;border-top:1px dotted #221;}
.info p{margin-top:1.6em;}
</style>
</head>
<body>
<br>
<div style="float: left; padding-left: 40px; width: 720px;">
<div>
<p id="nav" align="center">« previous | next »</p>
</div>
<div class="demo">
<div id="main_image" align="center"></div>
<div style="width: 700px; float: left;">
<ul class="gallery_demo_unstyled gallery_demo galleria">
<li class="active"><img rel="images/image1.jpg" class="thumb selected" style="width: auto; height: 100px; margin-left: -17px; opacity: 1; display: inline;" src="images/image1.jpg" alt="SEAT COMFORTS" title="SEAT COMFORTS"></li>
<li class=""><img rel="images/image2.jpg" class="thumb" style="width: auto; height: 100px; margin-left: -17px; opacity: 0.3; display: inline;" src="images/image2.jpg" alt="BUS INNER VIEW" title="BUS INNER VIEW"></li>
<li class=""><img rel="gallery/image3.jpg" class="thumb" style="width: auto; height: 100px; margin-left: -17px; opacity: 0.3; display: inline;" src="images/image3.jpg" alt="Bus full View" title="Bus full View"></li>
<li class=""><img rel="images/image4.jpg" class="thumb" style="width: auto; height: 100px; margin-left: -17px; opacity: 0.3; display: inline;" src="images/image4.jpg" alt="BEGINNING" title="BEGINNING OF TIME"></li>
<li class=""><img rel="gallery/image5.jpg" class="thumb" style="width: auto; height: 100px; margin-left: -17px; opacity: 0.3; display: inline;" src="images/image5.jpg" alt="ECO" title="ECO AWARENESS"></li>
</ul>
</div>
</div>
<br><br>
</div>
<!--content_inner div ends here-->
<!--- body -->
</body>
</html>
When I tried to integrate it in a page it is not working which also consists of the following code.
Code:
<script type="text/javascript" src="gallery/jquery.js"></script>
<script type="text/javascript" src="gallery/jquery-easing-1.3.pack.js"></script>
<script type="text/javascript" src="gallery/jquery-easing-compatibility.1.2.pack.js"></script>
<script type="text/javascript" src="gallery/jquery.kwicks-1.5.1.pack.js"></script>
<script type="text/javascript" src="show.js"></script>
<!--[if IE]>
<script type="text/javascript">
$().ready(function() {
$(".jimgMenu ul").kwicks({max: 400, duration: 700, easing: "easeOutQuad"});
});
</script>
<![endif]-->
<script type="text/javascript">
$().ready(function() {
$('.jimgMenu ul').kwicks({max: 475, duration: 600, easing: 'easeOutQuad'});
});
</script>
I have tried using noconflict() function and used jQuery instead of $ but no use.
Could anyone be able to solve this pls.
Regards,
Rekha
Looks like you've commented out the <script> element that should be bring in jQuery, this:
<!--script type="text/javascript" src="js/jquery.min.js"></script-->
should be this:
<script type="text/javascript" src="js/jquery.min.js"></script>
You need jQuery loaded before jquery.galleria.js or it won't work.
Your second example includes jquery.js but not jquery.galleria.js so try adding this to the second one:
<script type="text/javascript" src="js/jquery.galleria.js"></script>
You'll have to adjust the src path to point to your jquery.galleria.js of course.
Have you included the plugin? I think you're missing that... It's not jQuery's core functionality.
this is it I think:
http://galleria.aino.se/
instead of $('ul.gallery_demo').galleria, try using jQuery('ul.gallery_demo').galleria.
If this works, it means that $ variable has been overridden by someone else. Try finding that out or put your document.ready function a closure:
(function($){
(document).ready(function(){
// your code here
});
})(jQuery)