I am new here and this is my first question for an assignment for class. I am trying to get an image rotation to work in javascript and it is not working for me. Can someone help? I tried console logging and everything is calling fine.
I have this code within another function for when the end user clicks on a button it triggers the rotation
t = setInterval(scrollImages, 50);
function scrollImages() {
var coverBarDiv = document.getElementById("coverBar");
var images = coverBarDiv.getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
var left = images[i].style.left.substr(0, images[i].style.left.length - 2);
if (left <= -86) {
left = 532;
}
images[i].style.left = (left - 1) + "px";
}
}
#coverBar {
height: 115px;
left: 182px;
overflow: hidden;
position: absolute;
top: 560px;
width: 440px;
}
#cover img {
position: absolute;
top: 0;
}
<div id="coverBar">
<img src="images/coverMatrix.jpg" width="82" height="115" style="left: 0px;">
<img src="images/coverDeadRingers.jpg" width="82" height="115" style="left: 88px;">
<img src="images/coverDrStrangelove.jpg" width="82" height="115" style="left: 176px;">
<img src="images/coverFuturama.jpg" width="82" height="115" style="left: 264px;">
<img src="images/coverHolyGrail.jpg" width="82" height="115" style="left: 356px;">
<img src="images/coverRaisingArizona.jpg" width="82" height="115" style="left: 444px;">
<img src="images/coverRobotChicken.jpg" width="82" height="115" style="left: 532px;">
</div>
It is all fine! There was just a typo in CSS selector : #cover img should be #coverBar img
t = setInterval(scrollImages, 20);
function scrollImages() {
var coverBarDiv = document.getElementById("coverBar");
var images = coverBarDiv.getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
var left = images[i].style.left.substr(0, images[i].style.left.length - 2);
if (left <= -86) {
left = 532;
}
images[i].style.left = (left - 1) + "px";
}
}
#coverBar {
height: 115px;
left: 20px;
overflow: hidden;
position: absolute;
top: 60px;
width: 440px;
}
#coverBar img {
position: absolute;
top: 0;
}
<div id="coverBar">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRlq8No0dCjQXEsDTge4boAr22X6m8gVWIYSAkMwj6JYqCC9U" width="82" height="115" style="left: 0px;">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRlq8No0dCjQXEsDTge4boAr22X6m8gVWIYSAkMwj6JYqCC9U" width="82" height="115" style="left: 88px;">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRlq8No0dCjQXEsDTge4boAr22X6m8gVWIYSAkMwj6JYqCC9U" width="82" height="115" style="left: 176px;">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRlq8No0dCjQXEsDTge4boAr22X6m8gVWIYSAkMwj6JYqCC9U" width="82" height="115" style="left: 264px;">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRlq8No0dCjQXEsDTge4boAr22X6m8gVWIYSAkMwj6JYqCC9U" width="82" height="115" style="left: 356px;">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRlq8No0dCjQXEsDTge4boAr22X6m8gVWIYSAkMwj6JYqCC9U" width="82" height="115" style="left: 444px;">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRlq8No0dCjQXEsDTge4boAr22X6m8gVWIYSAkMwj6JYqCC9U" width="82" height="115" style="left: 532px;">
</div>
Related
I want to create a carousel that Looks like the photo below.
carousel photo
this shows the carousel and carousel created with some photos with different widths.
I want the carousel to be moved by the margin of each photo width.
my codes work seem correct but the carousel does not work :(
Which part of the codes are wrong??
this is my Html codes :
<div class="container">
<img src="./previous.png" alt="" class="previous">
<div class="frame">
<div class="carousel">
<div class="images">
<div> <img class="img" src="./images/avatar_1.png" alt="" width="50px"></div>
<div><img class="img" src="./images/avatar_2.png" alt="" width="100px"></div>
<div><img class="img" src="./images/avatar_3.png" alt="" width="150px"></div>
<div><img class="img" src="./images/avatar_4.png" alt="" width="100px"></div>
<div><img class="img" src="./images/avatar_5.png" alt="" width="200px"></div>
<div><img class="img" src="./images/avatar_6.png" alt="" width="100px"></div>
<div><img class="img" src="./images/avatar_7.png" alt="" width="140px"></div>
<div><img class="img" src="./images/avatar_8.png" alt="" width="180px"></div>
<div><img class="img" src="./images/avatar_9.png" alt="" width="190px"></div>
<div><img class="img" src="./images/avatar_10.png" alt="" width="100px"></div>
</div>
</div>
</div>
<img src="./next.png" alt="" class="next">
</div>
and this is my CSS codes :
.frame {
width: 350px;
height: 150px;
overflow: hidden;
margin: 0px 20px;
border-radius: 10px;}
.carousel{
overflow: hidden;
background-color: rgb(100, 98, 98);
border-radius: 10px;
margin-left: auto;
margin-right: auto;
position: relative;
width: 100%;}
.images{
display: flex;
height: auto;
position: relative;
width: 100%;
height: 100%;}
.imgs{
height: 130px;
margin: 10px 0px 10px 10px;
border-radius: 5px;}
and this is my Javascript codes:
let images = document.querySelector(".images")
let next = document.querySelector(".next")
let previous = document.querySelector(".previous")
let carousel = document.querySelector(".carousel")
let img = document.querySelectorAll(".img")
next.addEventListener("click", RightClick)
let count = 0
function RightClick() {
if (count < 40) {
let widthImage = img[count].width
moveRight(widthImage)
count++
}
}
function moveRight(widthImage) {
images.style.marginRight = widthImage + "px"
}
previous.addEventListener(LefttClick)
function LefttClick() {
if (count < 40) {
let widthImage = img[count].width
moveRight(widthImage)
count++
}
}
function moveLeft(widthImage) {
images.style.marginLeft = widthImage + "px"
}
important: this is necessary to carousel moved by a margin every click on next or prev button
important 2 = The margin should be the size of the photos
How to convert div#WareHouse with SVG inside to image, then downloaded and center the div#WareHouse.I want to generate div#WareHouse as image code after clicking submit:
<div id="WareHouse">
<img width="80" src="http://rgrzymala.pl/2.svg" style="top: 48px; left: 8px;">
<img width="80" src="http://rgrzymala.pl/2.svg" style="top: 76px; left: 56px;">
<img width="80" src="http://rgrzymala.pl/2.svg" style="top: 104px; left: 104px;">
<img width="80"
src="http://rgrzymala.pl/2.svg" style="top: 132px; left: 152px;">
<img width="80" src="http://rgrzymala.pl/2.svg" style="top: 160px; left: 200px;">
<img width="80" src="http://rgrzymala.pl/2.svg" style="top: 188px; left: 248px;">
<img width="80" src="http://rgrzymala.pl/2.svg"
style="top: 216px; left: 296px;">
<img width="80" src="http://rgrzymala.pl/2.svg" style="top: 244px; left: 344px;"><img width="80" src="http://rgrzymala.pl/2.svg" style="top: 272px; left: 392px;">
<img width="80" src="http://rgrzymala.pl/2.svg" style="top: 300px; left: 440px;">
<img width="80" src="http://rgrzymala.pl/2.svg" style="top: 328px; left: 488px;">
<img width="80" src="http://rgrzymala.pl/2.svg" style="top: 356px; left: 536px;">
<img width="80" src="http://rgrzymala.pl/2.svg" style="top: 384px; left: 584px;">
<img width="80" src="http://rgrzymala.pl/2.svg" style="top: 412px; left: 632px;">
<img width="80"
src="http://rgrzymala.pl/2.svg" style="top: 440px; left: 680px;">
<img width="80" src="http://rgrzymala.pl/2.svg" style="top: 468px; left: 728px;">
<img width="80" src="http://rgrzymala.pl/2.svg" style="top: 496px; left: 776px;">
<img width="80" src="http://rgrzymala.pl/2.svg"
style="top: 524px; left: 824px;">
<img width="80" src="http://rgrzymala.pl/2.svg" style="top: 552px; left: 872px;">
<img width="80" src="http://rgrzymala.pl/2.svg" style="top: 580px; left: 920px;">
</div>
I tried in the html2canvas library but to no avail. Apparently, Maybe it does not support SVG. Here is a link!
I think the best approach would be making use of a canvas from the get-go.
You can then use JS as you have to draw images on the canvas (using your SVGs), like so:
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
}
img.src = "http://upload.wikimedia.org/wikipedia/commons/d/d2/Svg_example_square.svg";
Note that drawImage accepts the image as well as X and Y coordinates. See existing question for more: Drawing an SVG file on a HTML5 canvas
Once you have drawn your SVGs as you'd like to canvas, you can make use of .toDataURL() on your canvas. Something like this:
var canvas = document.getElementById('canvas');
var dataURL = canvas.toDataURL();
The above will return a base64 encoded string, which in turn could be output to the browser to prompt saving. The following outlines this really well: How To Save Canvas As An Image With canvas.toDataURL()?
There is also a library to help with the conversion and saving: canvas2image
The below code is a slider that manipulates between two dividers, previous and next. Each divider represents a set of ten images, as you can see in two parallel vertical lines. I'm trying to make each divider 2 parallel horizontal lines (5 images on each line), However it's getting messed up and the 2 dividers are getting connected. Any help please?
HTML:
<div id="wrapper">
<div id="nav">
<button id="prev" disabled><<<</button>
<button id="next">>>></button>
</div>
<div id="mask">
<div id="item1" class="item">
<a name="item1"></a>
<div class="content">
<img id="image1" src="http://placehold.it/350x150" />
<img id="image2" src="http://placehold.it/350x150" />
<img id="image3" src="http://placehold.it/350x150" />
<img id="image4" src="http://placehold.it/350x150" />
<img id="image5" src="http://placehold.it/350x150" />
<img id="image6" src="http://placehold.it/350x150" />
<img id="image7" src="http://placehold.it/350x150" />
<img id="image8" src="http://placehold.it/350x150" />
<img id="image9" src="http://placehold.it/350x150" />
<img id="image10" src="http://placehold.it/350x150" />
</div>
</div>
<div id="item2" class="item">
<div class="content">
<img id="image1" src="http://placehold.it/350x150" />
<img id="image2" src="http://placehold.it/350x150" />
<img id="image3" src="http://placehold.it/350x150" />
<img id="image4" src="http://placehold.it/350x150" />
<img id="image5" src="http://placehold.it/350x150" />
<img id="image6" src="http://placehold.it/350x150" />
<img id="image7" src="http://placehold.it/350x150" />
<img id="image8" src="http://placehold.it/350x150" />
<img id="image9" src="http://placehold.it/350x150" />
<img id="image10" src="http://placehold.it/350x150" />
</div>
</div>
</div>
</div>
CSS:
#wrapper {
width: 500px;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #ccc;
overflow: hidden;
}
#nav button {
position: absolute;
top: 100px;
}
#prev {
left: 40px;
}
#next {
right: 40px;
}
#mask {
width: 5000px;
height: 100%;
background-color: #eee;
}
.item {
width: 500px;
height: 100%;
float: left;
background-color: #ddd;
}
.content img {
height: 100px;
width: 100px;
float:left;
margin-right: 4%;
margin-bottom: 6%;
}
.content {
width: 45%;
height: 220px;
top: 20%;
margin: auto;
background-color: white;
position: relative;
}
.content a {
position: relative;
top: -17px;
left: 170px;
}
.selected {
background: #fff;
font-weight: 700;
}
.clear {
clear:both;
}
JQUERY:
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"
src="js/jquery.scrollTo.js"
$(document).ready(function () {
function shift(direction) {
var
$mask = $('#mask'),
items = $('.item').size(),
currentItem = $mask.data('currentItem'),
newItem;
if (currentItem == undefined) {
currentItem = 0;
}
newItem = currentItem + direction;
$mask.data('currentItem', newItem).animate({marginLeft: -500 * newItem});
if (newItem == 0) {
$("#prev").prop('disabled', true);
} else {
$("#prev").prop('disabled', false);
}
if (newItem == items - 1) {
$("#next").prop('disabled', true);
} else {
$("#next").prop('disabled', false);
}
}
$('#prev').click(function() {
return shift(-1);
});
$('#next').click(function() {
return shift(1);
});
});
JSFIDDLE: http://jsfiddle.net/2ghovmww/
As I see it you can achieve what you want with display:inline for each horizontal block, but as you have implemented it, the width of your container is smaller than the width of five elements in a row, so they can't be displayed. If you use overflow:hidden you will have two rows but the elements that exceed the width of the container will be hidden. So first you must adjust the width of the container and its parent elements.
I have a slider that is switching between dividers using previous/next buttons. But when the dividers end, the slider stops. How to change it so when reaching an end from one side(next/previous) it continues. Let's say i have 4 div, 1 2 3 4
i click next.. i reach 4, when i click 4 it should continue to 1. Any help?
HTML:
<div id="wrapper">
<div id="nav">
<button id="prev" disabled><<<</button>
<button id="next">>>></button>
</div>
<div id="mask">
<div id="item1" class="item"> <a name="item1"></a>
<div class="content">
<img id="image1" src="http://placehold.it/350x150" />
<img id="image2" src="http://placehold.it/350x150" />
<img id="image3" src="http://placehold.it/350x150" />
<img id="image4" src="http://placehold.it/350x150" />
<img id="image5" src="http://placehold.it/350x150" />
<img id="image6" src="http://placehold.it/350x150" />
<img id="image7" src="http://placehold.it/350x150" />
<img id="image8" src="http://placehold.it/350x150" />
<img id="image9" src="http://placehold.it/350x150" />
<img id="image10" src="http://placehold.it/350x150" />
</div>
</div>
<div id="item2" class="item">
<div class="content">
<img id="image1" src="http://placehold.it/350x150" />
<img id="image2" src="http://placehold.it/350x150" />
<img id="image3" src="http://placehold.it/350x150" />
<img id="image4" src="http://placehold.it/350x150" />
<img id="image5" src="http://placehold.it/350x150" />
<img id="image6" src="http://placehold.it/350x150" />
<img id="image7" src="http://placehold.it/350x150" />
<img id="image8" src="http://placehold.it/350x150" />
<img id="image9" src="http://placehold.it/350x150" />
<img id="image10" src="http://placehold.it/350x150" />
</div>
</div>
</div>
</div>
CSS:
body {
margin: 0;
}
#wrapper {
width: 100%;
height: 350px;
/*position: absolute;*/
top: 0;
left: 0;
background-color: white;
overflow: hidden;
}
#nav button {
position: absolute;
top: 100px;
}
#prev {
left: 40px;
}
#next {
right: 40px;
}
#mask {
width: 50000px;
height: 100%;
background-color: white;
}
.item {
width: 1200px;
height: 100%;
float: left;
background-color: white;
}
.content img {
height: 100px;
width: 17%;
float:left;
margin-right: 10px;
margin-bottom: 10px;
}
.content {
width: 50%;
height: 220px;
top: 20%;
margin: auto;
background-color: white;
position: relative;
}
.content a {
position: relative;
top: -17px;
left: 170px;
}
.selected {
background: #fff;
font-weight: 700;
}
.clear {
clear:both;
}
JQUERY:
$(document).ready(function () {
function shift(direction) {
var
$mask = $('#mask'),
$items = $('.item'),
items = $items.size(),
currentItem = $mask.data('currentItem'),
newItem;
if (currentItem == undefined) {
currentItem = 0;
}
newItem = currentItem + direction;
$mask.data('currentItem', newItem).animate({
marginLeft: -newItem * $items.eq(0).width()
});
if (newItem == 0) {
$("#prev").prop('disabled', true);
} else {
$("#prev").prop('disabled', false);
}
if (newItem == items - 1) {
$("#next").prop('disabled', true);
} else {
$("#next").prop('disabled', false);
}
}
$('#prev').click(function () {
return shift(-1);
});
$('#next').click(function () {
return shift(1);
});
function resizePanel() {
width = $(window).width();
height = $(window).height();
$('#wrapper, .item').css({
width: width,
height: height
});
}
$(window).resize(function () {
resizePanel();
});
resizePanel();
});
JSFIDDLE: http://jsfiddle.net/909zce06/7/
I have changed the code a bit to accomodate the cyclic transition of images.
What I have done:
The code to disable previous/next button is removed, as it would restrict from cyclic sliding of images.
extra code added to handle the transition when the slider hits extreme ends(either direction).
JS code (relevant code) :
$('#prev').click(function () {
if (newItem === 0) {
newItem = itemCount - 1;
} else {
newItem--;
}
return shift();
});
$('#next').click(function () {
if (newItem === itemCount - 1) {
newItem = 0;
} else {
newItem++;
}
return shift();
});
Live Demo # JSFiddle:
http://jsfiddle.net/dreamweiver/909zce06/12/
Suggestion: if you're planning to extend your current slider with more features, then I would suggest you to go with some existing slider plugins, "why re-invent the wheel when you have one already".
I just got back to html, javascript and jquery and i'm a bit rusty. I've mostly been doing objective-c for a while and getting back to jquery is a little difficult. I'm trying to use the jQuery fadeIn and fadeOut bit but its not working for some reason... Here's the html and js I've been working on :
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js">
function showImg(2img) {
$(2img).fadeIn('slow', function() {
// Animation complete
});
}
function hideImg(2img) {
$(2img).fadeOut('slow', function() {
// Animation complete
});
}
</script>
<body>
<table width="1659" height="701" border="0" align="center">
<tr>
<th width="325" scope="col"><div style="position: relative; left: 0; top: 0;"><img id="img1" src="" width="232" height="232" alt="" onmouseover="showimg(2img1)" onmouseout="hideimg(2img1)" style="position: relative; top: 0; left: 0;"/>
<img id="2img1" src="" width="32" height="32" alt="" style="position: absolute; top: 100px; left: 150px; visibility:hidden;"/></div></th>
<th width="325" scope="col"><div style="position: relative; left: 0; top: 0;"><img id="img2" src="" width="232" height="232" alt="" onmouseover="showimg(2img2)" onmouseout="hideimg(2img2)" style="position: relative; top: 0; left: 0;"/>
<img id="2img2" src="" width="32" height="32" alt="" style="position: absolute; top: 100px; left: 150px; visibility:hidden;"/></div></th>
<th width="325" scope="col"><div style="position: relative; left: 0; top: 0;"><img id="img3" src="" width="232" height="232" alt="" onmouseover="showimg(2img3)" onmouseout="hideimg(2img3)" style="position: relative; top: 0; left: 0;"/>
<img id="2img3" src="" width="32" height="32" alt="" style="position: absolute; top: 100px; left: 150px; visibility:hidden;"/></div></th>
<th width="325" scope="col"><div style="position: relative; left: 0; top: 0;"><img id="img4" src="" width="232" height="232" alt="" onmouseover="showimg(2img4)" onmouseout="hideimg(2img4)" style="position: relative; top: 0; left: 0;"/>
<img id="2img4" src="" width="32" height="32" alt="" style="position: absolute; top: 100px; left: 150px; visibility:hidden;"/></div></th>
<th width="325" scope="col"><div style="position: relative; left: 0; top: 0;"><img id="img5" src="" width="232" height="232" alt="" onmouseover="showimg(2img5)" onmouseout="hideimg(2img5)" style="position: relative; top: 0; left: 0;"/>
<img id="2img5" src="" width="32" height="32" alt="" style="position: absolute; top: 100px; left: 150px; visibility:hidden;"/></div></th>
</tr>
</table>
</body>
I think you'd find it better to do this:
$(function() {
$('table > div > img:first').hover(function() {
showImg($(this).next());
}, function() {
hideImg($(this).next());
});
});
This way you wont be replicating the onmouseover and onmouseoout code in your html.
The errors in your code are - No # for the id of the images to fade, although it seems to work in chrome I don't know if it will work as expected in every browser, also the function names don't have the same case.
$(2img) should be $('#2img') and that's it
$(2img) should be $('#'+2img) and invoke the function like showImg("2img2")
DEMO
$('.tb td').each(function(){
$(this).find('img').wrapAll('<div />');
$('.tb td div').css({position:'relative'});
$(this).find('img:eq(1)').css({position:'absolute', left:'0px', top:'0px'}).hide();
});
$('.tb td div').hover(function(){
$(this).find('img:eq(1)').stop().fadeTo(400,1);
},function(){
$(this).find('img:eq(1)').stop().fadeTo(400,0);
});