I've been working on a Javascript photo gallery and I want it to be very user-friendly. This involves only having to use one image and one link per image. I have it so all the images appear in a scrolling div on the left and onClick it is suppose to change the image source on the right but I can't seem to get javascript to get the image source from the original image and change the second one with it. I've tried a few other ways but this is the way I like and if I could get it to work it would be perfect.
This is inside a table so it is align differently I'm just giving the code needed.
This code was given below but it seems as though he deleted his answer. I think you were much close than me!
Javascript:
<script type="Text/javscript">
function setImage(this) {
document.getElementById("ImageFrame").src = this.childNodes[0].src;
}
</script>
break
<div style="width:275;height:400;overflow-x:scroll;">
<img class="gallery" src="JCF/PICT0421.jpg" />
<img class="gallery" src="JCF/PICT0422.jpg" />
<img class="gallery" src="JCF/PICT0423.jpg" />
</div>
The image being changed.
<div>
<img id="ImageFrame" src="JCF/PICT0421.jpg" width="400" />
</div>
here is a working example. NOTE: a.getElementsByTagName('img')[0].src as different browsers would add nodes to tag before and after the child tag. It is safe to use getElementsByTagName('img')[0].src
<html>
<head>
<script type="text/javascript">
function setImg(a){
//alert(a.getElementsByTagName('img')[0].src);
document.getElementById('ImageFrame').src =
a.getElementsByTagName('img')[0].src
}
</script>
</head>
<body>
<img src="JCF/PICT0421.jpg">
<div>
<img id="ImageFrame" src="JCF/PICT0421.jpg" width="400" />
</div>
</body>
</html>
var pic1 = document.getElementById("image1");
var src = pic1.src; // here is the src for image1
var pic2 = document.getElementById("image2");
pic1.src = src; // here we set the src for image2
So this code will take the image src from image1 and put it in image2.
I believe something like this should work for you:
HTML:
<img class="gallery" id="image1" src="image1.jpg" />
Javascript:
function setImage(imgParent) {
document.getElementById("ImageFrame").src = imgParent.childNodes[0].src;
}
Live DEMO
The Demo will work better when you actually load in images. However, if you inspect the broken images, you can see that it is loading in the new image correctly.
Edit:
Since Kaf mentioned that he has had issues with childNodes, you may want to try this out instead:
Javascript:
function setImage(imgParent) {
document.getElementById("ImageFrame").src = imgParent.getElementsByTagName('img')[0].src;
}
assuming you can use Jquery
$('.imageClass').click(function(){
var srcToCopy = $(this).attr('src');
$(somewheretoputsrc).attr('src', srcToCopy);
})
this code should work
edit : fiddle edited with working image
http://jsfiddle.net/jbduzan/b7adx/1/
You should go with so called "Unobtrusive JavaScript", i.e. don't mix content with JavaScript and apply the desired behaviors after the window has been loaded.
Something like that:
function addDomListener(element, eventName, listener) {
if (element.addEventListener) // most browsers
element.addEventListener(eventName, listener, true);
else if (element.attachEvent) // IE
element.attachEvent('on' + eventName, listener);
}
window.onload = function() {
var elements = getElementsByClassName('thumb-link');
for (int i=0; i < elements.size(); i++) {
var el = elements[i];
addDomListener(el, "click", function () {
setImage(el);
});
}
}
getElementsByClassName still needs an implementation here and every a tag that had onlick previously needs the class 'thumb-link'. But I'm sure you'll figure that out.
Using a library like jQuery or Prototype.js would make it easier here...
Related
Firstly, I wanted to say that I am quite new to javascript, thus I would ask you not to criticise me that much.
I wonder, how can I implement the dynamical update of webpage image and it should load a photo from another webpage. I was working with javascript and implemented some functionality, but it is not giving the desired results.
I have searched the Web, but there wasn't anything fitting the above mentioned requirements.
Thus, could anyone please help me figure out the solution to my issue?
<script>
var imageRep = document.createElement('img'), src='http://www.free.fr/freebox/im/logo_free.png';
var parent=document.getElementById("div1");
var child=document.getElementById('change').src;
parent.replaceChild(imageRep,child);
</script>
Here is html part:
<a href="story-ck.html">
<div class="mix mix-story europe asia" id="div1">
<img src="img/hero/ck.jpg" style="width: 100%;" id="change">
var change = document.getElementById('change');
function changeImg(){
change.src = 'http://s5.tinypic.com/98yjb6_th.jpg'
}
<img src="http://s6.tinypic.com/id6u77_th.jpg" style="width: 100%;" id="change">"
<button onClick='changeImg()'>change image</button>
var imageRep = document.createElement('img');
imageRep.src = 'http://www.free.fr/freebox/im/logo_free.png';
var oldImage = document.getElementById('change');
parent.replaceChild(imageRep, oldImage);
Though if you want to do this more than once, and if there's nothing preventing you from doing so, it would be easier to just replace the .src of the target image element, rather than replacing the image entirely:
document.querySelector('#change').src = 'http://www.free.fr/freebox/im/logo_free.png';
Just change the src attribute and set its value to the new image url:
var image = document.getElementById('change');
image.src = 'http://www.free.fr/freebox/im/logo_free.png';
var current=0;
var images = ["1.jpg", "2.jpg", "3.jpg"];
setInterval(function(){
document.getElementById('main').src=images[current++%images.length];
},2000);
<img src="" id="main">
Here's the clear way to handle image rotation.
well you need jquery..
$(div).html("<img src='Image name'");
this will change your content dynamically by pushing html tags to your page
I am doing a web development course, and I currently need to implement a script into my webpage using JavaScript. I found a script I would like to use here:
http://www.java-scripts.net/javascripts/Automatically-Changing-Slide-Show-Script.phtml
Basically, it changes the images automatically.
<head>
<script>
/*
JavaScript Image slideshow:
By Website Abstraction (www.wsabstract.com)
and Java-scripts.net (www.java-scripts.net)
*/
var slideimages=new Array()
var slidelinks=new Array()
function slideShowImages(){
for (i=0;i<slideShowImages.arguments.length;i++){
slideImages[i]=new Image();
slideImages[i].src=slideShowImages.arguments[i];
}
}
function goToShow(whichLink){
if (!window.winslide||winslide.closed){
winslide=window.open(slideLinks[whichLink])
}else{
winslide.location=slideLinks[whichLink]
winslide.focus()
}
}
</script>
</head>
<body>
<!-- For reference, my actual code is
<a href="stagingandevents.html"/>
<img src="pics/main/stagingandevents.jpg" alt="Staging and Events"
name = "slide" width="300px" height="312"/>
</a>
-->
<!-- Basically, I want two of the following image rotatations, but each
link with different images. -->
<a href="javascript:gotoshow()"><img src="img1.gif" name="slide">
</a>
<script>
//configure the paths of the images, plus corresponding target links
slideshowimages("img1.gif", "img2.gif", "img3.gif")
//configure the speed of the slideshow, in miliseconds
var slideshowspeed=2000
var whichlink=0
var whichimage=0
function slideIt(){
if (!document.images){
return
}
document.images.slide.src=slideimages[whichimage].src
whichlink=whichimage
if (whichImage<slideImages.length-1) {
whichImage++;
} else {
whichImage=0;
} setTimeout("slideIt()",slideShowSpeed);
}
slideIt();
</script>
</body>
The code provided in the link is very old and deprecated, so I updated it a little. The slideShowImages() function is where the desired images are stored, but I don't know how to go about changing those values for each link!
I have tried several different things to get each link to have its own set of rotating images. As I am new to Javascript and HTML also, I really do not know how to go about this.
The code to change the images and links is here
slideshowimages("img1.gif", "img2.gif", "img3.gif")
slideshowlinks("http://wsabstract.com", "http://dynamicdrive.com", "http://java-scripts.net")
You just need to insert your own pictures and links for those pictures.
slideshowimages("images/myFirstImage.gif", "images/mySecondImage.gif", "images/myThirdImage.gif")
slideshowlinks("http://myfirstimagelink.com", "http://mysecondimagelink.com", "http://mythirdimagelink.net")
So I have the following JavaScript function.
var LogoUrl = function() {
document.write('views/img/common/site-logo.svg');
}
And I want to have this function used in a html img src attribute.
Here is a example though this syntax wouldn't work, it should give you an idea of what I am looking for.
<img class="site-logo" src="<script> LogoUrl() </script>" alt="Site Logo">
And hoping this would export the following in the browser
<img class="site-logo" src="views/img/common/site-logo.svg" alt="Site Logo">
What is the best approach to doing this?
You can do this with the following instead:
<script>
document.write('<img class="site-logo" src="' + 'views/img/common/site-logo.svg' + '" alt="Site Logo">');
</script>
Since the script tag is indeed a tag, you can't put it inside the attributes of another tag.
A much better approach however would be the following:
Prepare a span element for the element to appear in, and give it a specific id. This would be your HTML:
This is my image: <span id="myImg"></span>.
and this will be your jQuery code:
$(function() {
$('<img>').class('site-logo')
.attr('src', 'views/img/common/site-logo.svg')
.attr('alt', 'Site Logo')
.appendTo('#myImg');
});
Alternatively, instead of preparing a span, you could prepare the image without defining a src attribute, with the following HTML:
This is my image: <img id="myImg" class="site-logo" alt="Site Logo">.
and the following jQuery code:
$(function() {
$('#myImg').attr('src', 'views/img/common/site-logo.svg');
});
You can use jquery $(document).ready() to set the image src.
$(document).ready(function (){
$('img.site-logo').attr('src', 'views/img/common/site-logo.svg');
});
You could do this - but this makes it obstructive.
<script>document.write("<img class=\"site-logo\" src=\"views/img/common/site-logo.svg\" alt=\"Site Logo\">")</script>
It is also not very organised because it ties everything so much with the markup that you might as well just have it as markup.
You're better off doing it properly by changing the src property
var logo = document.getElementsByClassName('site-logo')[0];
logo.src = 'http://www.develop.com/Images/v3/tech-symbols/angularjs_logo.png';
demo here http://jsfiddle.net/andyw_/XxTuA/268/
If this is all you need to do - I don't think it justifies the use of a selector library or front-end framework.
I am experiencing some problems with my javaScript hover function on two images. When the user hovers over the arrow image it should change into a hover-version of that image, and if the user clicks on it it should start another javascript function to expand/collapse the below tabs. Here is the live site. The problem is with the arrows on the right side below the navigation.
At first I tried doing this with only HTML code (onMouseOver and onMouseOut, and just load different image), but got a nasty bug where if the user hovered over the first arrow, then the second, and back to the first, then the second would completely disappear.
Now I tried with JavaScript instead, but now you can only see the first arrow, and that disappears if you hover to the right of it.
The annoying part is that it works perfectly fine from the local server, but not on the web server. I've not used much HTML/Javascript before, and never used JQuery. If this can be solved easily with something like that, I would be really grateful for some help on how to do so. I've read some solutions with CSS background, but don't think that would work because the image must work as a button as well?
Here is the JS code for changing the images
var images= new Array();
images[0] = "img/ArrowDown.png";
images[1] = "img/ArrowDownHover.png";
images[2] = "img/ArrowUp.png";
images[3] = "img/ArrowUpHover.png";
function DownChange()
{
document.getElementById("expandAll").src = images[1];
}
function DownGoBack()
{
document.getElementById("expandAll").src = images[0];
}
function UpChange()
{
document.getElementById("collapseAll").src = images[3];
}
function UpGoBack()
{
document.getElementById("collapseAll").src = images[2];
}
Here is the HTML code
<div id="collapse">
<img src="img/arrowDown.png" id="expandAll" onMouseOver="DownChange()" onMouseOut="DownGoBack()" onClick="openAll()"></img>
<img src="img/arrowUp.png" id="collapseAll" onMouseOver="UpChange()" onMouseOut="UpGoBack()" onClick="closeAll()"></img>
</div>
If it is working on your local machine, the problem isn't coming from your JS.
The problem I would guess is that your images are not correctly referenced on your web server. Try using explicit paths from the server root on both your local and remote machine, and try to have both machines mirror each other's folder structure.
img tag doesn't have any closing pair like < / img>. try this code
<div id="collapse">
<img src="img/arrowDown.png" id="expandAll" onMouseOver="DownChange();" onMouseOut="DownGoBack();" onClick="openAll();" />
<img src="img/arrowUp.png" id="collapseAll" onMouseOver="UpChange();" onMouseOut="UpGoBack();" onClick="closeAll();" />
</div>
if that doesn't work then try to find if the images are in the correct folder or the names of the images are correct.
Edit:
I used this code and working fine on mozilla firefox and IE 6 -
<script type="text/javascript">
<!--
var images= new Array();
images[0] = "img/ArrowDown.png";
images[1] = "img/ArrowDownHover.png";
images[2] = "img/ArrowUp.png";
images[3] = "img/ArrowUpHover.png";
function DownChange()
{
document.getElementById("expandAll").src = images[1];
}
function DownGoBack()
{
document.getElementById("expandAll").src = images[0];
}
function UpChange()
{
document.getElementById("collapseAll").src = images[3];
}
function UpGoBack()
{
document.getElementById("collapseAll").src = images[2];
}
-->
</script>
<div id="collapse">
<img src="img/arrowDown.png" id="expandAll" onMouseOver="DownChange();" onMouseOut="DownGoBack();" onClick="openAll();" />
<img src="img/arrowUp.png" id="collapseAll" onMouseOver="UpChange();" onMouseOut="UpGoBack();" onClick="closeAll();" />
</div>
I want to load every image inside a div before actually displaying them. I have something similar to this:
<div>
<img src="1.jpg" />
<img src="1.jpg" />
<img src="1.jpg" />
<img src="1.jpg" />
<img src="1.jpg" />
<img src="1.jpg" />
</div>
At first I tried doing things like:
$('div img').load(function() {
$('div img').show();
});
Or this:
$('div').find('img').load(function() {
$('div img').show();
});
Unfortunately, this didn't work because once the browser loads even just a single image, it fires the event. Any ideas on how to load everything first ? Thanks!
You can keep track of how many images have loaded:
var $images = $('div img'),
preloaded = 0,
total = $images.length;
$images.load(function() {
if (++preloaded === total) {
// Done!
}
});
Unfortunately there is not easy way to do this in a cross browser compatible way. But luckily there are 2 plugins out there that can make it painless.
Check out waitforimages and imagesloaded
Then you can do:
$('div').waitForImages(function(){
$(this).find('img').show();
});
Try this
http://chipsandtv.com/articles/jquery-image-preload
First, The modern browser can execute concurrently 6 request => Don't load so many image at the load time. If you have many images, you can set the images at the back 'src=""' or non set "src" attributes, And set after the first images loaded
Second, You can check "image was loaded" by using
document.getElementById('#imageId').complete == !0
You can check with image with the largest size or the last image in DOM to make sure the others images were loaded.
Hope it 'll help you.
This worked for me:
$(document).ready(function () {
$('#div with images').hide();
});
$(window).load(function () {
$('#div with images').show();
});