I am looking to create two side by side image galleries that can be controlled independently of eachother and allow for interesting image combinations.
I have the cropped image code and the 'click to change image' code, i just cant figure out how to combine the two.
Code: http://jsfiddle.net/7ae0chbs/
<!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=utf-8" />
<title>Untitled Document</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
.cover {
width: 334px;
height: 500px;
}
.thumbnail {
height: 100%;
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
background-position: left;
}
.thumbnail2 {
height: 100%;
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
background-position: right;
}
.clearBoth { clear:both; }
img{
width : 668spx;
height : 500px;
}
</style>
</head>
<body>
<div class="cover" style="float:left;">
<div style="background-image: url(sam_5331.jpg); " class="thumbnail" ></div>
</div>
<div class="cover" style="float:left;">
<div style="background-image: url(sam_5370.jpg); " class="thumbnail2"></div>
</div>
<br class="clearBotnh" />
<img src="sam_5331.jpg" id="imgClickAndChange" onclick="changeImage()" usemap="#SUB15" />
<script>
var counter = 1;
imgClickAndChange.onclick = function(){
if(counter == 0){
document.getElementById("imgClickAndChange").src = "sam_5331.jpg";
counter++;
}
else if(counter == 1){
document.getElementById("imgClickAndChange").src = "sam_0092.jpg";
counter++;
}
else if(counter == 2){
document.getElementById("imgClickAndChange").src = "sam_0150.jpg";
counter = 0;
}
};
</script>
stu
Not sure I'm 100% understanding your end result, but are you wanting the side by side div's backgrounds to change when clicked?
If so, is this what you want? http://jsfiddle.net/u1uostrc/
I just added id's to both of the divs that show the actual images, and set onclicks for them, along with counters for each.
var img1Counter = 0;
var img2Counter = 1;
img1.onclick = function() {
if (img1Counter == 0) {
document.getElementById("img1").style.backgroundImage = "url('http://upload.wikimedia.org/wikipedia/commons/thumb/8/88/Number_1_in_green_rounded_square.svg/2000px-Number_1_in_green_rounded_square.svg.png')";
img1Counter++;
} else if(img1Counter == 1) {
document.getElementById("img1").style.backgroundImage = "url(http://tomreynolds.com/wp/wp-content/uploads/2014/01/2-graphic.png)";
img1Counter++;
} else if(img1Counter == 2) {
document.getElementById("img1").style.backgroundImage = "url(http://upload.wikimedia.org/wikipedia/commons/6/69/VET_3_circle.png)";
img1Counter = 0;
}
}
img2.onclick = function() {
if (img2Counter == 0) {
document.getElementById("img2").style.backgroundImage = "url('http://upload.wikimedia.org/wikipedia/commons/thumb/8/88/Number_1_in_green_rounded_square.svg/2000px-Number_1_in_green_rounded_square.svg.png')";
img2Counter++;
} else if(img2Counter == 1) {
document.getElementById("img2").style.backgroundImage = "url(http://tomreynolds.com/wp/wp-content/uploads/2014/01/2-graphic.png)";
img2Counter++;
} else if(img2Counter == 2) {
document.getElementById("img2").style.backgroundImage = "url(http://upload.wikimedia.org/wikipedia/commons/6/69/VET_3_circle.png)";
img2Counter = 0;
}
}
Hope this helps...
Related
I am trying to change my 4 background images on mouseclick.
At the moment the same image appears 4 times on the screen (1 in each corner).
I would like to have only one image appearing on the whole screen and others replacing it when I click on the current image; and so on and so forth as you click again.
I am unsure what is wrong with my code at the moment.
HTML:
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title> CODE </title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script src="js/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/sketch.js"></script>
</head>
<body>
<div id="body" class="imageOne"></div>
</body>
</html>
JS:
var bodyObj,
className,
index;
bodyObj = document.getElementById('body');
index = 1;
className = [
'imageOne',
'imageTwo'
];
function updateIndex() {
if (index === 0) {
index = 1;
} else {
index = 0;
}
}
bodyObj.onclick = function(e) {
e.currentTarget.className = className[index];
updateIndex();
}
CSS:
html, body, #body {
height: 100%;
width: 100%;
}
#body.imageOne {
background-image: url("img1.png");
}
#body.imageTwo {
background-image: url("img2.png");
}
#body.imageTwo {
background-image: url("img3.png");
}
#body.imageTwo {
background-image: url("img4.png");
}
Rather than using classes for each image, it would be good to store them in an array and then change it programmatically. Please find the snippet below.
let imgList = [
'https://dummyimage.com/200x200/000/fff&text=image+1',
'https://dummyimage.com/200x200/000/fff&text=image+2', 'https://dummyimage.com/200x200/000/fff&text=image+3', 'https://dummyimage.com/200x200/000/fff&text=image+4'
];
let currentIndex = 0;
function changeImg() {
$('#body').css('backgroundImage', `url(${imgList[currentIndex]})`);
currentIndex++;
if (currentIndex == imgList.length) currentIndex = 0;
}
changeImg();
$('#body').on('click', changeImg);
#body {
width: 200px;
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="body" class="imageOne"></div>
Here is another way (using classes as you did):
var bodyObj = document.getElementById('body'),
index = 0,
className = [
'imageOne',
'imageTwo',
'imageThree',
'imageFour'
];
bodyObj.onclick = function(e) {
index = (index + 1) % className.length;
e.currentTarget.className = className[index];
}
html,body,#body { margin: 0; height: 100%; width: 100%; }
#body { background-position: center; background-size: cover; }
#body.imageOne { background-image: url("https://picsum.photos/id/9/536/354"); }
#body.imageTwo { background-image: url("https://picsum.photos/id/3/536/354"); }
#body.imageThree { background-image: url("https://picsum.photos/id/1/536/354"); }
#body.imageFour { background-image: url("https://picsum.photos/id/2/536/354"); }
<div id="body" class="imageOne"></div>
I tried this one which works pretty well!
var index = 0;
var className = ['imageOne',
'imageTwo',
'imageThree',
'imageFour',
'imageFive'];
$(document).ready(function() {
$("#main").on("click", function() {
index = (index + 1) % className.length;
$(this).attr('class', className[index]);
});
});
I have this code and the problem is the "main" and "left/right" image are not being displayed. I have gone through the entire logic and can't figure out what is wrong.
The code works if I replace else with else if(flag===1 && child[I].id=="left" || child[I].id=="right")
Expected output:
movement of mouse should change the image, this change is determined by the height of the <body> element.
Output getting:
only one image is displayed and does not changes no mater where I move my mouse.
[ also changing event from "mouseover" to "mousemove" does not help ]
so why isn't it working when I remove it, shouldn't at least "main" work??
PS: I'm unable to provide an image, please find another one.
'use strict';
(function() {
var wlen = screen.availWidth;
var whet = screen.availHeight;
var last = {};
var chk = 3;
var eye = document.getElementsByClassName("eyes");
var build = function(ele) {
if (ele.previousElementSibling !== null) ele.previousElementSibling.style = "none";
last = ele.style;
last.display = "block";
}
var anite = function() {
var x = event.screenX;
var y = event.screenY;
last.display = "none";
var child;
var flag;
y < whet / 3 ? flag = 2 : (y > 2 * whet / 3) ? flag = 0 : flag = 1;
x < wlen / 2 ? child = eye[1].childNodes : child = eye[0].childNodes;
for (let i = 0; i < child.length; i++) {
if (child[i].id) {
if (child[i].id == "main" && flag === 0) {
build(child[i]);
} else if (child[i].id.search(/a/i) === 0 && flag === 2) {
build(child[i]);
} else {
build(child[i]);
}
}
}
}
document.addEventListener("mouseover", anite, false);
})()
html,body {
height: 100%;
}
body {
display: flex;
align-items: center;
}
main {
width: 100%;
overflow: hidden;
}
.eyes {
width:50%;
float: left;
height: 300px;
}
#main {
background: url('eyes.png') no-repeat 0 0;
width: 1000px;
height: 254px;
display:none;
}
#left {
background: url('eyes.png') no-repeat 0 -254px;
width: 1000px;
height: 254px;
display:none;
}
#aLeft {
background: url('eyes.png') no-repeat 0 -508px;
width: 1000px;
height: 254px;
display:none;
}
#right {
background: url('eyes.png') no-repeat 0 -762px;
width: 1000px;
height: 254px;
display:none;
}
#aRight {
background: url('eyes.png') no-repeat 0 -1016px;
width: 1000px;
height: 280px;
display:none;
}
<html>
<head>
<title>Student Details</title>
</head>
<body>
<main>
<div class="eyes">
<!-- <img src="eyes.png" alt="eyes"> -->
<p id="main"></p>
<p id="right"></p>
<p id="aRight"></p>
</div>
<div class="eyes">
<p id="main"></p>
<p id="left"></p>
<p id="aLeft"></p>
</div>
</main>
</body>
</html>
I am trying to create a page that has a background image that uses the css cover property so that it is responsive in the browser but doesn't get distorted but is chosen by random from an array in jQuery.
I don't have much code because this is the only thing that I am doing at the moment, I've been playing around but I don't have much of a handle on jQuery so I don't really know what I am doing! Any help appreciated!
HTML:
<head>
<title>Test</title>
<link href="css/css.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="javascript/jquery.js"></script>
</head>
<body>
<div id="background">
</div>
</body>
CSS:
body {
margin: 0;
}
#background {
width: 100%;
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-size: cover;
background-image: url(backgroundImage)
}
html, body {
overflow: none !important;
overflow-x: none !important;
overflow-y: none !important;
}
jQuery:
var picArr = ['Images/IMG_3764.jpg', 'Images/IMG_3793.jpg', 'Images/IMG_4050.jpg', 'Images/IMG_4323.jpg', 'Images/IMG_4351.jpg', ];
var myNumber = Math.floor(Math.random() * 5);
$(document).ready(function () {
$("background-image").attr('url', picArr[myNumber]);
});
If you want to randomise it, use a setTimeout()
Also, to change the background image on the "background" div, just .css jquery selector like below.
eg
var picArr = ['Images/IMG_3764.jpg', 'Images/IMG_3793.jpg', 'Images/IMG_4050.jpg', 'Images/IMG_4323.jpg', 'Images/IMG_4351.jpg', ];
$(document).ready(function () {
setTimeout(function(){
var myNumber = Math.floor(Math.random() * 5) + 1;
$("#background").css('background-image', 'url('+picArr[myNumber]+')'); //here
}, 3000); // ms of how often you want it to change.
});
Didn't you misstype the selector $("background-image"), isn't this supposed to be $("#background")
var picArr = ['Images/IMG_3764.jpg', 'Images/IMG_3793.jpg', 'Images/IMG_4050.jpg', 'Images/IMG_4323.jpg', 'Images/IMG_4351.jpg', ];
var myNumber = Math.floor(Math.random() * 5);
$(document).ready(function () {
$("#background").attr('url', picArr[myNumber]); //here
});
#background {
width: 100%;
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-size: cover;
background-image: url(backgroundImage)
}
<link href="css/css.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="javascript/jquery.js"></script>
<div id="background">
</div>
I guess this has already been answered now but this was my solution:
var picArr = ['http://lorempixel.com/output/fashion-q-c-640-480-1.jpg', 'http://lorempixel.com/output/animals-q-c-640-480-4.jpg', 'http://lorempixel.com/output/nightlife-q-c-640-480-2.jpg'];
var l = picArr.length;
var myNumber = Math.floor(Math.random() * l);
console.log(myNumber);
$(document).ready(function () {
$("#background").attr('style', 'background: url(' + picArr[myNumber]) + ')';
});
CSS:
html, body {
margin: 0;
height: 100%;
min-height: 100%;
}
I want to download a video available here. Like the top right corner indicates, it might be hosted on Crunchyroll so let's inspect the page source.
This is the html code snippet of interest:
<div id="zype_5387dd4269702d063f000000" style="position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0; overflow: hidden;">
<div style="position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0; overflow: hidden;">
<iframe frameborder="0" width="100%" height="100%" id="_video_5387dd4269702d063f000000" src="https://www.crunchyroll.com/affiliate_iframeplayer?aff=af-88206-hkyj&media_id=663121&video_format=0&video_quality=0&auto_play=0" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" nuan_newframe="true"></iframe>
</div>
</div>
Inspection reveals that the video is embedded in an iframe and indeed is hosted on Crunchyroll. It is also important to note that the src attribute is the link going directly to the video player page.
On the player page the HTML looks as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"lang="de" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<link rel="icon" href="/favicon.png" />
<title></title>
<script type="text/javascript" src="https://www.crunchyroll.com/common/static/js/swfobject.js"></script>
<link rel="stylesheet" type="text/css" href="https://www.crunchyroll.com/css//20150727144515.1ae5987b9d8aa2552cc16fb8eadc8e78/crcommon/reset.css"/>
<style>
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: #000;
color: #FFF;
}
#content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
<!--[if IE]>
<style type="text/css">
.clearfix { zoom: 1; /* triggers hasLayout */ display: block; /* resets display for IE/Win */}
.clearfix {display: inline-block;} /* for IE/Mac */
</style>
<![endif]-->
</head>
<body>
<div id="content"><div id="the_embedded_player" style="display:block;" ><div style="color:red; text-align:center; margin:16px 0px;">You either have Javascript turned off or an old version of Flash Player.<br/><br/> Get the latest Flash Player</div></div><script type="text/javascript"><!--
swfobject.embedSWF("https:\/\/www.crunchyroll.com\/flash\/20150615120132.eb0aab8f716ea6981edb6397bd93ffc3\/StandardVideoPlayer.swf",'the_embedded_player','100%', '100%', '9.0.115','https://www.crunchyroll.com/common/static/flash/express_install.swf',{"config_url":"http%3A%2F%2Fwww.crunchyroll.com%2Fxml%2F%3Freq%3DRpcApiVideoPlayer_GetStandardConfig%26media_id%3D663121%26video_format%3D0%26video_quality%3D0%26auto_play%3D0%26aff%3Daf-88206-hkyj%26show_pop_out_controls%3D0%26enable_next%3D0%26lang%3DdeDE"},{"wmode":"transparent","allowFullScreen":"true","allowscriptaccess":"always","allownetworking":"all"},{"id":"the_embedded_player","style":"display:block;"},null);
//--></script></div>
<!-- pylon16 : c64387480c -->
</body>
</html>
It becomes clear that the video must be a swf flash video file. embedSWF is called which is defined here and looks like this (after beautifying):
embedSWF: function(ab, ah, ae, ag, Y, aa, Z, ad, af, ac) {
var X = {
success: false,
id: ah
};
if (M.w3 && !(M.wk && M.wk < 312) && ab && ah && ae && ag && Y) {
w(ah, false);
K(function() {
ae += "";
ag += "";
var aj = {};
if (af && typeof af === r) {
for (var al in af) {
aj[al] = af[al]
}
}
aj.data = ab;
aj.width = ae;
aj.height = ag;
var am = {};
if (ad && typeof ad === r) {
for (var ak in ad) {
am[ak] = ad[ak]
}
}
if (Z && typeof Z === r) {
for (var ai in Z) {
if (typeof am.flashvars != D) {
am.flashvars += "&" + ai + "=" + Z[ai]
} else {
am.flashvars = ai + "=" + Z[ai]
}
}
}
if (F(Y)) {
var an = u(aj, am, ah);
if (aj.id == ah) {
w(ah, true)
}
X.success = true;
X.ref = an
} else {
if (aa && A()) {
aj.data = aa;
P(aj, am, ah, ac);
return
} else {
w(ah, true)
}
}
if (ac) {
ac(X)
}
})
} else {
if (ac) {
ac(X)
}
}
}
This obfuscated code doesn't look like it's going to lead anywhere.
Copying and pasting each of the links found in the html into the browser doesn't seem to allow downloading the video (idea taken from here). How do I get the correct url?
Note:
The programming code for downloading the video file is not the main focus here, but I would use this for html parsing and this for download the file.
I'm attempting to create a full screen changeable background image. I've spent a long time perfecting it to work on other PC's. It works perfectly on my screen, but on other monitors it changes.
The problem now is that the image is all over the place if the browser is not maximized.
It works fine once maximized.
The background image changes every 5 seconds, so it's not as simple as just setting the background image. Here is my code:
<head>
<script type='text/javascript'>
var imageID=0;
function changeimage(every_seconds)
{
//change the image
if(!imageID)
{
document.getElementById("myimage").src="Minecraft.jpg";
imageID++;
}
else if(imageID==1)
{
document.getElementById("myimage").src="Minecraft1.jpg";
imageID++;
}
else if(imageID==2)
{
document.getElementById("myimage").src="Minecraft2.jpg";
imageID++;
}
else if(imageID==3)
{
document.getElementById("myimage").src="Minecraft4.jpg";
imageID++;
}
else if(imageID==4)
{
document.getElementById("myimage").src="Minecraft5.jpg";
imageID++;
}
else if(imageID==5)
{
document.getElementById("myimage").src="Minecraft6.jpg";
imageID++;
}
else if(imageID==6)
{
document.getElementById("myimage").src="Minecraft7.jpg";
imageID=0;
}
//call same function again for x of seconds
setTimeout("changeimage("+every_seconds+")",((every_seconds)*3000));
}
</script>
<style>
#myimage {
width: 100%;
height:100%;
position: absolute;
top: 0;
left: 0;
}
</style>
<body>
<body style='background:black; '
onload='changeimage(2)'>
<div style='position:absolute;width:100%;height:100%;left:0px;top:0px;' align='center'><img id='myimage' src='Minecraft.jpg'/>
</div>
</body>
----------Edit--------------
I used your code (Hopefully correctly) but now the image isn't loading at all.
<head>
<script type='text/javascript'>
var imageID=0;
function changeimage(every_seconds)
{
//change the image
if(!imageID)
{
document.getElementByTagName("body").className="pic1";
imageID++;
}
else if(imageID==1)
{
document.getElementByTagName("body").className="pic2";
imageID++;
}
else if(imageID==2)
{
document.getElementByTagName("body").className="pic3";
imageID++;
}
else if(imageID==3)
{
document.getElementByTagName("body").className="pic4";
imageID++;
}
else if(imageID==4)
{
document.getElementByTagName("body").className="pic5";
imageID++;
}
else if(imageID==5)
{
document.getElementByTagName("body").className="pic6";
imageID++;
}
else if(imageID==6)
{
document.getElementByTagName("body").className="pic7";
imageID=0;
}
//call same function again for x of seconds
setTimeout("changeimage("+every_seconds+")",((every_seconds)*3000));
}
</script>
</head>
<body>
<body>
<style>
.pic1 { background-image: 'Minecraft.jpg'; }
.pic2 { background-image: 'Minecraft1.jpg'; }
.pic3 { background-image: 'Minecraft2.jpg'; }
.pic4 { background-image: 'Minecraft5.jpg'; }
.pic5 { background-image: 'Minecraft6.jpg'; }
.pic6 { background-image: 'Minecraft7.jpg'; }
</style>
<body style='background:black; '
onload='changeimage(2)'>
<div style='position:absolute;width:100%;height:100%;left:0px;top:0px;' align='center'><img id='myimage' src='Minecrft.jpg'/>
</div>
</body>
What am I doing wrong?
Using a 100% x 100% absolutely positioned div for your background image is probably what's causing the issue.
Switch to CSS classes on < body >
.pic1 { background-image: '../path/to/image1'; }
.pic2 { background-image: '../path/to/image1'; }
etc
And then instead of changing the src of the image tag you would change the class of < body >. This will allow you to remove the absolute positioning of that div and layout the site "normally".
You can do something like this:
var imageClass = 'pic';
if(imageID) {
imageClass += imageID;
}
document.body.className = imageClass;
imageID++;
And CSS:
.pic {background-image: url(Minecraft.jpg);}
.pic1 {background-image: url(Minecraft1.jpg);}
etc.
To resize the background, you can choose the CSS alternative, which best fits to your site, for example:
body {
background-position: 50% 0%;
background-repeat: no-repeat;
background-size: cover cover;
}
A live demo at jsFiddle.