Completely new to coding over here. Learning the basics.
How can I get to "the picture only", when clicking on a current picture of a slideshow?
Normally in html I would just put this around it:
Current picture
But in this version I just don't seem to get it.
Clicking on the small pictures makes them appear as the big centred one.
Clicking on the big picture currently only pauses/continues the slideshow.
$(".crop-img").click(function(){
$("#bigImage").attr("src",
$(this).attr("src"));
});
var counter=1;
$("#image"+counter).click();
$("#forward").click(function(){
counter = counter + 1;
if (counter>4){
counter=1;
}
$("#image"+counter).click();
})
$("#backward").click(function(){
counter=counter-1;
if (counter<1){
counter=4;
}
$("#image"+counter).click();
})
$("#bigImage").click(function(){
paused=!paused;
})
Picture of how it looks is on my post about it.
Thank you!
Full code
<html>
<head>
<title> FWP - Gallery </title>
<script src="jquery-3.1.1.min.js"></script>
<link rel="stylesheet"
type="text/css"
href="bootstrap.css">
<link rel="stylesheet"
type="text/css"
href="mystyles.css">
<link rel="stylesheet"
type="text/css"
href="https://fonts.googleapis.com/css?family=Gruppo">
<link rel="stylesheet"
type="text/css"
href="https://fonts.googleapis.com/css?family=Syncopate">
</head>
<body>
<div class="container">
<h1>Image Gallery</h1>
<div class="row">
<div class="col-md-3 thin_border">
<img id="image1"
class="crop-img"
src="before.jpg"
alt="before prisma">
</div>
<div class="col-md-3 thin_border">
<img id="image2"
class="crop-img"
src="after.jpg"
alt="after prisma">
</div>
<div class="col-md-3 thin_border">
<img id="image3"
class="crop-img"
src="sleepy.jpg"
alt="Sleepy cat">
</div>
<div class="col-md-3 thin_border">
<img id="image4"
class="crop-img"
src="Cute.jpg"
alt="Cute cat">
</div>
</div>
<div class="row">
<div class="col-md-1 thin_border">
<button id="backward"><</button>
</div>
<div class="col-md-10 thin_border">
<img id="bigImage"
class="big-img"
src="before.jpg"
alt="before prisma">
</div>
<div class="col-md-1 thin_border">
<button id="forward">></button>
</div>
</div>
</div>
<script>
var paused=false;
setInterval(function(){
if(!paused){
$("#forward").click();
}
}, 3000);
$("#bigImage").click(function(){
paused=!paused;
});
$(".crop-img").click(function(){
$("#bigImage").attr("src",
$(this).attr("src"));
});
var counter=1;
$("#image"+counter).click();
$("#forward").click(function(){
counter = counter + 1;
if (counter>4) {
counter=1;
}
$("#image"+counter).click();
})
$("#backward").click(function(){
counter=counter-1;
if (counter<1) {
counter=4;
}
$("#image"+counter).click();
})
</script>
</body>
</html>
The section of javascript isn't vanilla javascript, it is a sample of this 'jquery' that you may have heard of in your quest to learn a bit of coding.
Jquery is syntactic sugar for javascript. $ is your cue to key in that this might be jquery (there are other js libraries that use $ syntax but I think jquery is the most prevalent).
$(".crop-img")
$("#bigImage")
$("#image"+counter)
This is jquery code to select an element from the page, the '.' is for selecting class, the '#' is for selecting id, there are tons of others you can look up as well. This gets you a jquery object that you can then save to a variable, call a method on, etc.
$(".crop-img").click(someFunctionNameHere);
$("#image"+counter).click();
These are examples of functions being called on the jquery objects, which happen to be event functions. The first is assigning a function to the click event of the selected element(s) (all elements with class 'crop-img'), the second is firing the click event of the selected element (the element with id='imageX' with 'X' being the current value of counter).
Also instead of a function name, you can just inline the function instead:
$("#bigImage").click(function(){
paused=!paused;
})
This assigns the unnamed inline function for the click event of the element with id='bigImage', which is where you want to pull up the image. Put your code in there that will bring up the image, it will run when the big image is clicked.
Such as if you want to actually go to the image, as in your html example, put this line in there:
window.location.href = "someHrefHere";
If you want to know the the src of the current bigImage, you can grab it with jquery:
var myhref = $("#bigImage").attr("src");
You can put it together from there.
Happy Coding!
You can retrieve the src of the current image when you click on the big image like this:
$( ".row div:nth-child("+counter+") img" ).attr('src')
counter was setted as index of your current image and this should be inside of your $("#bigImage") click function.
Related
I'm using onerror feature to detect broken links and replace those with an image, the problem is that in my code images that are okay are clickable.
So I want to make it in that way that when the function imageOnError is called to make that image impossible to click.
I tried to do it like this (img).unbind("click");
Lik this also: img.class = "blocked";
but it doesn't work?
<img class="img img-click not-selected " src="" onerror="return imageOnError(this);" />
countImgReplaced = 0;
function imageOnError(img) {
img.onerror = '';
img.src = 'https://dummyimage.com/256x256?text=Broken%20images%20.';
(img).unbind("click");
countImgReplaced ++;
return true;
}
And also I want to get the number of times that the image is replaced I did that with countImgReplaced , but it gives me the total number of images :/
I'm really confused. Can somebody help me?
You can apply pointer-events: none; to them via a class. You can apply that using the classList API
i.e.
img.classList.add('blocked');
You can just do this in HTML tag.
<img src="../resources/images/Image1.jpg" onerror="this.src='https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';this.style='pointer-events: none'" />
$(document).ready(function(){
$("img").click(function(){
alert("Valid");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="clear:both;"><lable>Click in image(Invalid img):</lable>
<img width=200px height=200px src="../resources/images/Image1.jpg" onerror="this.src='https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';this.style='pointer-events: none'" />
</div>
<div style="clear:both;"><lable>Click in image (Valid img):<lable>
<img width=200px height=200px src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQzltPjpuUfCzEsYbhTYTm4xab4wfmCTFoNllbU5ljLLEAb3VvJXkgpWvU" onerror="this.src='https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';this.style='pointer-events: none'" /></div>
I wrote an HTML page that supposed to switch fast between two pictures.
In the result I can see that the first picture is freezed for about a minute and JUST then they start to flip over fast and nicely. It is as if the first picture is loaded quickly and the second takes more time (they have quite the same size)
What can explain this behavior?
What should I do to make them flip from the very beginning?
Code:
<head>
<title>Visualize</title>
<script src="jquery-3.1.0.min.js"></script>
<script>
$(document).ready(function()
{
var file = "a";
setInterval(function()
{
$('.canvas').attr("src","images/"+ file +".png");
file = flipFile(file);
}, 290);
});
function flipFile(file)
{
if(file=="a")
{
file="b";
}
else if(file=="b")
{
file = "a";
}
return file;
}
</script>
</head>
<body>
<div class="container">
<img class="canvas" src="/images/file.png">
</div>
</body>
Two things I did
Placed <img> tag for each picture I want to deal with (with Display:None, for having them not visible)
Added "onload" attribute to the body that triggers the funciton that changes visibility between pictures.
This way the page waits for them to get loaded and just then starts the functionality.
`function visualize()
{
$('.loading').fadeOut(1000);
$('.blanket').fadeIn(1000);
setInterval(function()
{
$('.i'+fileIdx).show();
$('.i'+filePrevIdx).hide();
filePrevIdx = fileIdx;
fileIdx = addCyclic(fileIdx);
}, 290);
}`
`<body style="background-color: black;" onload="visualize()">
<div class="container">
<div class = "blanket" style="display: none;"></div>
<div class="loading">
Loading...
</div>
<img class="i1" src="./images/1.png" style="display: none;">
<img class="i2" src="./images/2.png" style="display: none;">
<img class="i3" src="./images/3.png" style="display: none;">
<img class="i4" src="./images/4.png" style="display: none;">
</div>
</body>`
I have a page that is a series of N img elements. I need each image to, when clicked, change to the next image in their own series of three. I have listed my html below to explain.
<body>
<div class="images">
<div class="image_group">
<img id="first" src="group1_image1"></img>
<img id="second" src="group1_image2"></img> //this isn't displayed until clicked
<img id="third" src="group1_image3"></img> //when this is displayed, it cycles back to group1image1
</div>
...
<div class="image_group">
<img id="first" src="groupN_image1"></img>
<img id="second" src="groupN_image2"></img>
<img id="third" src="groupN_image3"></img>
</div>
</div>
</body>
Each image_group div displays only one image until clicked, when it displays the second, then the third when clicked, then cycles back to the first when clicked a third time.
My problem is writing a JQuery method that can do this cycling by making "second" images replace "first" images when clicked and so on. The below method rewrites the image source which seems silly but I can't think of a better way to do it. I'm also not sure if the "first" class image will be isolated in the "image_group" div (as it should) or if it will change all images on the page to their "second" class image.
$("#first").attr("src","group1_image2.jpg");
Can anyone think of a way to do this?
I would do something like this
$("image_group img").on("click", function() {
var index = $(this).index();
$(this).attr("src", index === $("img").length - 1 ? $(this).next().src : $("img")[0].src);
});
refine your html:
<body>
<div class="images">
<div class="image_group">
<img id="1,1" data_num="1,1" src="group1_image1"></img>
</div>
...
<div class="image_group">
<img id="n,1" data_num="n,1" src="groupN_image1"></img>
</div>
</div>
</body>
and then you might do something like:
$("image_group img").on("click", function() {
var max = 3;
var indexes = $(this).data('num').split(',');
if ( indexes[1] == max
indexes[1] = 1;
else
indexes[1]++;
$(this).attr("src", "group" + indexes[0] + "_image" + indexes[1]);
$(this).data('num', indexes.join(','))
});
I am learning jquery/ajax and I got this problem... I want to make content slowly slide up for 1 second while erasing that content... I know that I can erase container content with a command like $(".page1" ).empty(); but I want to erase it slowly... In the mean time, I want server to work on something...
Here is what I have:
index.html:
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="jquery.js"></script>
<script src="mainScript.js"></script>
<title>ZZZZ</title>
</head>
<body class="main">
<div class="pageMain1" id="page">
<div class="page1">
<p>Text...text.......Text...text.......vText...text.......Text...text.......Text...text.......
Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......</p>
<p>random image</p>
<img src="1.jpg"/>
<p>Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......
Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......</p>
<img src="2.jpg"/>
<p>Text...text.......Text...text.......Text...text.......Text...text.......</p>
</div>
<div class="page2">
<button onclick="ButtonClick(0)">Button1</button>
<button onclick="ButtonClick(1)">Button2</button>
</div>
</div>
</body>
</html>
mainScript.js:
var SiteName="/test";
function ButtonClick(id){
$(".page1" ).empty();
if(id==0){
$.ajax({
type:"GET",
url:SiteName+"/A1.php",
dataType:"json",
success:success,
error:error
});
}
else{
$.ajax({
type:"GET",
url:SiteName+"/A2.php",
dataType:"json",
success:success,
error:error
});
}
}
function error(){
alert("Something went wrong.");
}
function success(arr){
var text=arr['text'];
$(".page1").append(text);
}
A1.php:
<?php
echo json_encode(array("text"=>"
<div class=\"page1\">
<p>Text...text.......Text...text.......vText...text.......Text...text.......Text...text.......
Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......</p>
<p>random image</p>
<img src=\"1.jpg\"/>
<p>Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......
Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......</p>
<img src=\"2.jpg\"/>
<p>Text...text.......Text...text.......Text...text.......Text...text.......</p>
</div>
"));
?>
A2.php:
<?php
echo json_encode(array("text"=>"
<div class=\"page1\">
<p>123124124123123....123124124123123....123124124123123....123124124123123....123124124123123....123124124123123....
123124124123123....123124124123123....123124124123123....123124124123123....123124124123123....123124124123123....</p>
<p>random image</p>
<img src=\"3.jpg\"/>
<p>Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......
Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......</p>
<img src=\"4.jpg\"/>
<p>123124124123123....123124124123123....123124124123123....123124124123123....123124124123123....</p>
<p>123124124123123....123124124123123....123124124123123....123124124123123....123124124123123....</p>
<p>123124124123123....123124124123123....123124124123123....123124124123123....123124124123123....</p>
<p>123124124123123....123124124123123....123124124123123....123124124123123....123124124123123....</p>
<p>123124124123123....123124124123123....123124124123123....123124124123123....123124124123123....</p>
<img src=\"5.jpg\"/>
<p>123124124123123....123124124123123....123124124123123....123124124123123....123124124123123....</p>
<p>123124124123123....123124124123123....123124124123123....123124124123123....123124124123123....</p>
</div>
"));
?>
styles.css:
.pageMain1{
width:50%;
margin-left:auto;
margin-right:auto;
text-align:center;
}
So here is how I imagine what I want... You press Button1 or Button2 and it will call ButtonClick() function... Which will send ajax request to the server and then will slowly start moving 2 buttons up, erasing the content of the div page1.
When the content of the div has been fully erased and client got data from the server it should start slowly writing new content, while moving buttons down.
I hope its easy to follow...
How do I make it slide like that?
i can not understand your code but for doing this things you can use fadeOut() and fadeIn() jquery functions or directly change the css opacity of your element with javascript or jquery animate() function.
Use callbacks on the slideX functions to append to and empty the div.
Example:
$(".page1").slideUp(400, function()
{
$(".page1").empty();
$(".page1").append(text);
$(".page1").slideDown();
});
Thanks to everyone I came up with a solution...
I made 2 more global variables and made callbacks like this:
var lock1=0;
var text="";
function ButtonClick(id){
...
$(".page1").slideUp(function(){
if(lock1==1){
lock1=0;
$(".page1").empty();
$(".page1").append(text);
$(".page1").slideDown();
}
else{
lock1=2;
}
});
...
}
function success(arr){
text=arr['text'];
if(lock1==2){
lock1=0;
$(".page1").empty();
$(".page1").append(text);
$(".page1").slideDown();
}
else{
lock1=1;
}
}
If you want sliding effects. Use jQuery:
$('selector').slideUp();
$('selector').slideDown();
If you want fading in/ out effects:
$('selector').fadeIn();
$('selector').fadeOut();
What I am trying to achieve is, to have a series of tables built up with PHP (the number of tables is dynamic) this is reloaded every 5 seconds by using setInterval. Then be able to click on one of the tables to show or hide it. Ive got most of this working, but I have gotten stuck on maintaining the state of the tables, be they visible or hidden. Every time the table reloads the table state resets as its returning to its original state (I think a new reference is being passed, actually im almost certain thats whats happening). I tried copying the reference to the divs to a variable and comparing it to an old one (I took that bit of code out as it wasnt working) but I couldnt get the old settings into the new tags.
<!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">
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
var divStateArray;
function random_number() {
var random = Math.floor(Math.random()*110000);
return random;
}
//console.log(divStateArray);
function reload(state){
$(".responsecontainer").load('counter.php?randval=' + random_number(), function() {
var $rowelements = $(".divRow");
var $divRow = $('.divTable').find($rowelements);
//console.log($divRow);
//by copying $divRow it copies a reference/pointer into divStateArray.
//so any changes made to the properties of the div divRow are reflected in
//the afore mentioned variable.
divStateArray = $divRow;
//merge the old settings in divoldstate with the new references in divStateArray
if (state == 'all') {
divStateArray.hide();
}
});
}
//refresh the page every x miliseconds
var refreshId = setInterval(function() {
reload();
}, 5000);
$(document).ready(function() {
//show the spinning logo until the tables are loaded.
$(".responsecontainer").html('<img src="/lbadmin/images/ajax-loader.gif" width=32 height=32 />');
//display the page as soon as possible, then begin reloading every x seconds
reload('all');
$(document).on('click',".headRow",function(){
var $divRow = $(this).nextAll(".divRow")
//console.log($divRow);
if ($divRow.is(":hidden")) {
$divRow.show('fast');
}
else {
$divRow.hide('fast');
}
});
});
</script>
</head>
<body>
<p>hello</p>
<div class="responsecontainer" id="time1">
</div>
</br>
</body>
</html>
The table that gets loaded is (for the time being and for testing its just a static table but eventually this will change to multiple dynamic tables -
<?php
echo date("l, F d, Y h:i:s" ,time());
?>
<link rel="stylesheet" type="text/css" href="test.css" />
<p>hello</p>
</br>
<div class="divTable">
<div class="headRow">
<div class="divCell">LABEL: vippoo</div>
<div class="divCell">IP: 192.168.67.505</div>
<div class="divCell">Ports: 80-81</div>
<div class="divCell">Method: Layer 4</div>
<div class="divCell">Mode: DR</div>
<div class="divCell">Protocol: TCP</div>
<div class="divCell">Graph: link</div>
</div>
<div class="divRow">
<div class="divCell">label1</div>
<div class="divCell">192.168.66.666</div>
<div class="divCell">1</div>
<div class="divCell">Drain</div>
<div class="divCell">Halt</div>
<div class="divCell">uparrow</div>
<div class="divCell">graphlink</div>
</div>
<div class="divRow">
<div class="divCell">label1</div>
<div class="divCell">192.168.66.666</div>
<div class="divCell">1</div>
<div class="divCell">Drain</div>
<div class="divCell">Halt</div>
<div class="divCell">uparrow</div>
<div class="divCell">graphlink</div>
</div>
<div class="divRow">
<div class="divCell">label1</div>
<div class="divCell">192.168.66.666</div>
<div class="divCell">1</div>
<div class="divCell">Drain</div>
<div class="divCell">Halt</div>
<div class="divCell">uparrow</div>
<div class="divCell">graphlink</div>
</div>
</div>
</br>
Why don't you put a <div> around the table and show / hide that <div>? That way, if you reload the table, the visibility of the table remains the same as that is defined in the div around the table.
Why not simply check the state of the table before trying the refresh/reload?
If the table is hidden don't perform the refresh then the state of the table will not change.
Your set-interval method can continue to loop and that's where (within) you would add your check.
So your reload becomes something like this
function isTableHidden() {
var $divRow = $('.divTable').nextAll(".divRow")
return ($divRow.is(":hidden"))
}
function reload(state) {
if (isTableHidden())
return; // exit early and don't reload anything
$(".responsecontainer").load(
... rest of your oringal reload code ...
);
}