Hopefully someone can help me. I'm using a JS image compare script which shows two images to be shown side by side and the user can compare them. It works like this:
<div id="container1">
<!-- The before image is first -->
<img id="img" src=" http://placehold.it/400x200&text=1" />
<!-- The after image is last -->
<img id="img-alt" src="http://placehold.it/400x200&text=2" />
</div>
The script pulls the first img as the left image, and the second img as the right image. I've added two IDs because I've set up buttons and I'd like them to changeImage on either side so the two images aren't static, and multiple images can be selected and compared from a thumbnail gallery (per the user's selection).
I found some code on here, which will affect the left side just fine. I've also added a button that will allow the left side to be changed.
<script type="text/javascript">
function changeImage(a) {
document.getElementById("img").src=a;
}
</script>
And the HTML:
Left side:
<button onclick='changeImage( "http://placehold.it/400x200&text=Left" );'>Left</button>
<button onclick='changeImage( "http://placehold.it/400x200&text=Left2");'>Left2</button>
Now, I'd like to create another set of buttons that affects the "img-alt" class as shown in the slider HTML - this would affect the right side. I have somewhat limited knowledge with Javascript, and if I add another script with "document.getElementById("img-alt").src=a;" nothing changes on the right side. Basically, I'd like buttons that affect the right side like so:
Right side:
<button onclick='changeImage( "http://placehold.it/400x200&text=Right");'>Right</button>
<button onclick='changeImage("http://placehold.it/400x200&text=Right2");'>Right2</button>
How can I associate these buttons to affect the 'img-alt' ID (second image)?
I hope this makes sense. Please let me know if I need to clarify anything.
Thanks!
I'm not quite sure that it is what do you expect but please take a look at example I've made -> jsfiddle
changeImage = function(elemId, source) {
document.getElementById(elemId).src=source;
}
<button onclick='changeImage("img-alt", "http://placehold.it/400x200&text=Right");'>Right</button>
<button onclick='changeImage("img", "http://placehold.it/400x200&text=Left" );'>Left</button>
Related
I'm aware that this simply achieved by inserting
<input type="file" id="photo" accept="image/*;capture=camera">
what I'm having trouble with (due to my lack of proper coding skills) is actually grabbing and putting to use the image the user selects/takes.
Specifically, I want an iPad user to be able to grab an image which will be rendered on the page according to CSS. Once an image is there, I then want them to be able to replace that image with another if they need to.
Sounds simple enough but, once captured, I can't write the code I need to reference the image and manipulate it.
By the way, this is for an in-house project and so permissions etc. are irrelevant.
Thanks in advance.
Messing with this today with some help off the web, I came up with the following which works and also changes the text of the button once an initial image has loaded.
<div id="zeroDiv">
<input type="file" id="getPic" accept="image/*">
</div>
<div id="picWrapper">
<img id="image">
<div id="buttDiv">
<button id="picButt"><span class="buttText">Insert image</span>
</button>
</div>
</div>
and the JQuery/JavaScript:
$('#picButt').click(function () {
$('#getPic').trigger('click');
});
$(document).ready(function () {
$("#getPic").on("change", gotPic);
$("#image").load();
});
function gotPic(event) {
$("#image").attr("src", URL.createObjectURL(event.target.files[0]));
$("#picButt span").text("Change image");
}
working fiddle with CSS at http://jsfiddle.net/1rg5Lyyk/4/
I'm now looking for a way to store the image in local storage once it's captured so that when the user moves away from the page and returns, the image returns too. But that's a different question!
I have this code for the header
<div id="header">
<IMG SRC="http://danithemes.fanscity.eu/shugar/wp-content/uploads/2014/11/header-principal.png">
</div>
And this code for the main menu
<div id="menu">
Link One,
Link Two,
Link Three
</div>
I want the header image to fade into another image through the main menu links. Is this possible? Thanks.
First of all most W3C folks will get mad at you for this line <div id="header">
Anything syntactically named with an id the same as a generic HTML object tag needs to just be that tag. Anything good enough to give an id of id='header' should probably just be a <header> tag.
Secondly, I am unsure what the question is asking fully so let's go with something not yet said. #Parody showed a fiddled way of having the images change on click. The part of your question that said I want the header image to fade into another image through the main menu links. Is this possible? is difficult to understand so I am going to assume that you want some kind of event to trigger the changing of the images? There are many ways to do this but the best of which (especially for beginning programmers) is to use Bootstrap version 3.0+ since it comes with HTML driven stuff that usually requires JavaScript/JQuery to accomplish.
If you don't want to use Bootstrap then that's fine here is an example of how to use a hover event to trigger the change using JQuery...
HTML
<div id="header">
<img src="http://danithemes.fanscity.eu/shugar/wp-content/uploads/2014/11/header-principal.png" />
</div>
<div id="menu">
Link One
Link Two
Link Three
</div>
JAVASCRIPT/JQUERY
$(".navLink").each(function() {
$(this).hover(function() {
$("#header img").css({"background-image":"url($(this).attr('data-image'))"});
});
});
Through ArrowChat Javascript API, I'm trying to make avatars show in chat user tabs, that is "on the bar itself", besides in the buddy list and chat window.
I'm editing chat_tab.php (below) for this, starting with a sample static No-Avatar image, and next, I'll try to implement ArrowChat Javascript API functions.
<div class="arrowchat_inner_button" id="chattab_inner">
<div style="float:left" class="arrowchat_username_message">'+shortname+'</div>
</div>
All I want to know for now is that if there's something wrong with this script, as it doesn't seem to work.
Here's the code:
<script type="text/javascript">
window.onload=function(){var elem=document.createElement("elem");
elem.src= "/press/chat/admin/images/img-no-avatar.gif";
elem.height="32"; elem.width="32"; document.getElementById("chattab_inner").appendChild(elem);}
</script>
Next, I should replace img-no-avatar.gif with the user avatar path, which is getUser(data.a) according to the link above. That's the second in the row I don't know how. (You can preview ArrowChat chat bar at the bottom of the screen in the same page.)
The element you are created should be "img" not "elem"
you want the parameter for .createElement() to be the tag name of the element.
<script type="text/javascript">
window.onload=function(){
var elem=document.createElement("img");
elem.src= "/press/chat/admin/images/img-no-avatar.gif";
elem.height="32";
elem.width="32";
document.getElementById("chattab_inner").appendChild(elem);
}
</script>
First I'll start with this: I am in no way shape or form a developer, coder etc etc. I'm just a graphic designer helping a friend with her website.
As of right now, I'm having issues linking up thumbnails to the full images on my lightbox call out - you can view the site at www.chrissybulakites.com
I noticed
With VOID:(0) being in every single one ... my thought process was that if I correspond 0 thumb with 0 full then 1 thumb with 1 full then 2 thumb wwith 2 full etc etc it would work .. it didn't.
Can somebody explain to me if I'm on the right path or what I can do to make this work.
Thanks
Rob
Have have two basic elements per image; the thumb and the full image. The thumb is using JavaScript to show and hide a div (kind of like a frame) to hold the full image.
The HTML on the page repeats itself a lot, you can probably solve your problem whilst removing some of the repetition. I'd keep all of your thumbs but on each one, add in a reference to the full image the thumb represents. As well as reducing repetition, it'll make it easier to update the page in the future as changing a thumb and main image is done in one place rather than two.
In the below I've added another part to the "onclick" to say update the src of 'frame' to be the full version of the thumb.
<img src="http://chrissybulakites.com/thumbnails/longshot_thumbnail.png" />
Then delete all of the large images except one, updating it so that the img tag has an ID of 'frame'
<div id="light" class="white_content"><img id='frame' src="http://chrissybulakites.com/images/longshot_full.png" /> <br />Actor Observor - Boston, MA Close</div>
<div id="fade" class="black_overlay"></div>
This will mean that as each thumb is clicked, it will do the light and fad bits it did before but it will also update the image being displayed.
Doing this for two images as a proof of concept I get this which works as expected:
<img src="http://chrissybulakites.com/thumbnails/longshot_thumbnail.png" />
<img src="http://chrissybulakites.com/thumbnails/actor_thumbnail.png" />
<div id="light" class="white_content"><img id='frame' src="http://chrissybulakites.com/images/longshot_full.png" /> <br />Actor Observor - Boston, MA Close</div>
<div id="fade" class="black_overlay"></div>
you need to give each full image div its own unique id like: id="image23". Then modify the onclick to refrence the corresponding id: onclick="document.getElementById('image23')...
The meaning of the function void() in JavaScript is "do nothing". This prevents it to load a new new page (or to open the thumbnail image).
onclick = "document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block' "
Says that when user clicks that item it will capture the element light and change the display to block it will also capture the element fade and change the display to block. The thing is all your images are wrapped in an element called "light" so the browser is opting to show the first one (instead of throwing an error).
There is plenty of fuzzy logic here.
Starting with the fact that you are loading all images (the high definition ones).
If you want my two cents (and you only want to get the results, as opposed to learn how JavaScript works) I would go with something like prettyPhoto that does it out of the box, in an easy and straightforward way and is well documented.
How to add prettyPhoto to your page?
Download the code and include both the Javascript and the CSS file's on your header.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
Then put this code on your page
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
The docs say to put it on the bottom of the page but you (should) also put it on the header.
And then put the thumbnails with links to the actual images. PrettyPhoto will take care of everything else. Do note the rel="prettyPhoto[my_gal]"
<a href="img/full/1.jpg" rel="prettyPhoto[my_gal]" title="Caption 1">
<img src="images/thumbnails/t_1.jpg" width="60" height="60" alt="Red round shape" />
</a>
You can customize it further and should really read the manual here.
I have a specific goal in mind.
Please reference this page: http://cubancomplex.kodingen.com/test/MM/dashboard1.html
On the very bottom right, there is a <div> with two buttons on each side. The <div> currently has one google chart contained inside.
The goal is for a user to be able to use those two buttons to switch between charts for approximately eight cities.
I am not familiar with javascript or jQuery so I would appreciate any assistance! How should I go about achieving this?
Here is the code for that section:
<div id="footer">
<div class="markerNavLeft" title="Prev" id="prevMarker">‹</div>
<div id="markers">
<div id="chart">
<div id="auckland_chart_div"></div>
</div>
</div>
<div class="markerNavRight" title="Next" id="nextMarker">›</div>
</div>
Based on my experience, there's 2 option that you can use..
you can place your charts in your div id="chart". The first one add a class to mark it as a selected one (e.g. selected), of course the other is hidden… Please add a same class for all of the chart(e.g. chart-detail). Then, you can use
var temp = $(".selected").next(".chart-detail"); $(".selected").removeClass("selected"); temp.addClass("selected");
for the previous button, you can use .previous function.
You can use ajax ( .ajax function or .load function). Mark each chart with an ID so, you know what's the next or previous chart (within php).