We Keep Coding

Image not being rendered on the screen in new window

I have the following code for viewing an image in a new window. Both code snippets are able to produce the same HTML in the new window but the first one is not rendering the image and the second one is working fine.
<a onclick="window.open(this.href);return false;" href="javascript: var i = new Image(250, 250);i.src='image_url'; document.body.appendChild(i);" >VIEW1</a>
<a onclick="window.open(this.href);return false;" href="javascript: document.body.innerHTML='<img width="250" height="250" src="image_url"/>';">VIEW2</a>
I want to know why innerHTML is working and appendChild not working

The "URL" is for the link to the picture, and the "text" is there as a description if the Image should for some reason not load (broken requests)
<a onclick="window.open(this.href);return false;" href="javascript: document.body.innerHTML='<div><Img width="250" height="250" src="file:///home/lt-176/tudip-image.jpg" alt="text"></div>';">VIEW2</a>
image src path to give full path...is working

How to get Featherlight Image Gallery to work?

I'm trying to get the image gallery functionality from Featherlight to work. It is a jQuery add-on and I've followed their directives from their web-site (http://noelboss.github.io/featherlight/) but unfortunately I can't get it to work as intended. What I'm trying to achieve is an image gallery presentation by clicking on an image thumb. From the gallery I should be able to navigate among the images included in the gallery with previous, next icons. I've added links to the css-style file as well as the js-file. Enterd the HTML-code for the gallery and added javascript code for settings to the gallery.
I'm a newbie to javascript so it may be some very basic thing and I would really appreciate any hint on what is wrong.
Code can be found at:
http://jsfiddle.net/ovedexlin/69qZx/
HTML-code:
<div class="adImages">
<div class="row">
<a class="thumbnail gallery" href="http://www.tranarportalen.se/UpLoad/Breeders/b11000/digger.jpg">
<img src="http://www.tranarportalen.se/UpLoad/Breeders/b11000/digger.jpg" alt="thumb1" width="250" height="200">
</a>
<a class="thumbnail gallery" href="http://www.tranarportalen.se/UpLoad/Breeders/b11000/digger.jpg">
<img src="http://www.tranarportalen.se/UpLoad/Breeders/b11000/digger.jpg" alt="thumb2" width="250" height="200">
</a>
</div>
</div>
JS-code:
$(document).ready(function(){
$('a.gallery').featherlightGallery({
gallery: {
previous: '«',
next: '»',
fadeIn: 300
},
openSpeed: 300
});
});

Your code looks fine (though you may want to set width and hight with css), but you didn't include the featherlight.gallery.min.js, just the css.
Updated fiddle: http://jsfiddle.net/z28D7/

How to get an iframe to show when hidden?

I have an image that I want the user to see. When the user clicks on this image I want the image to go away and have the video show in it's place. Can someone show me how to do this?
Here is the code I have so far.
<div id="homeflash" style="height:413px; background-image:url(../../../upload/1/img/homeFlashBG.jpg);">
<a href="#">
<img src="../../../upload/1/img/video.jpg" style="display:none" />
</a>
<div id="video" style="display:inline">
<iframe allowfullscreen="" frameborder="0" height="395" src="//www.youtube.com/embed/X8mLel_werQ?rel=0" width="691"></iframe>
</div>
</div>
If someone could edit my post to clean the code up that would be great. I can't figure it out.
To describe the code a little bit:
This is what the code should look like after I click on the image. When you first see the page, the two display styles will be reversed.
Any help will be awesome.
Thanks

A general Idea can be like this:
$(function() {
$("img").click(function() {
$(this).css("display","none"); // will hide your image
$("body").append("<div id='video'></div>"); // will append div with id video, this div should have video code inside this.
});
});

You want to hide the video initially, so give it the style display:none. You also want to give your thumbnail image an id so you can reference it in jQuery. You can also remove the <a> tag from around the image (its not needed)
HTML
<div id="homeflash" style="height:413px; background-image:url(../../../upload/1/img/homeFlashBG.jpg);">
<img id="thumbnail" src="../../../upload/1/img/video.jpg" />
<div id="video" style="display:none">
<iframe allowfullscreen="" frameborder="0" height="395" src="//www.youtube.com/embed/X8mLel_werQ?rel=0" width="691"></iframe>
</div>
</div>
JavaScript
$(document).ready(function(){
$("#thumbnail").click(function(){
$(this).hide()
$("#video").show()
})
})
I would also try to avoid adding CSS styles inline if you can

onmouseover change image

I was trying to put a link on an image. When the mouse is over the image, the image changes from login_button_22.jpg to login_button_11.jpg. I am using the following piece of code, which is working for IE but not for chrome and others. Any ideas how to modify it, to work for all explorers? Thanks
<a href="#top"
onmouseover="document.getElementById('myimage1').src='img/login_button_22.jpg';"
onmouseout="document.getElementById('myimage1').src='img/login_button_11.jpg';" >
<img src="img/login_button_11.jpg" id="myimage1" />
</a>

Fancybox not working with images from Twitter API

With Fancybox 2 the example below works flawlessly (left out other code)
<a class="fancybox" href="https://si0.twimg.com/profile_images/2169856486/avatar.jpg" title="some title">
<img src="http://a0.twimg.com/profile_images/2169856486/avatar_normal.jpg" alt="" />
</a>
but the code below load the image on a separate page
<a class="fancybox" href="https://api.twitter.com/1/users/profile_image?screen_name=boris&size=original" title="some title">
<img src="http://a0.twimg.com/profile_images/2169856486/avatar_normal.jpg" alt="" />
</a>
The problem seem to be with the image URL the Twitter API supplies which returns a (301) redirect to the actual location of the full image. Is there any way i can get Fancybox to work with images that are supplied using a redirect and that the popup window still has the size of the served image.
Help would be appreciated.
Frank

Since the second code/link doesn't contain an image extension (jpg, gif, png), fancybox cannot determine what type of content is trying to open so you need to tell it.
Either do :
One: Add the type option to your custom script
$(".fancybox").fancybox({
type: "image"
});
Two : add the data-fancybox-type attribute to your link
<a class="fancybox" data-fancybox-type="image" href="https://api.twitter.com/1/users/profile_image?screen_name=boris&size=original" title="some title"><img src="http://a0.twimg.com/profile_images/2169856486/avatar_normal.jpg" alt="" /></a>