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
Related
I have an Html page where I have a image tag,I want to display an image which I have deployed in an external webApplication.When I browse that link in a browser it is working but when i add that link into an img src its not working
<img id="empPic" alt="" src="http://xyz/emp/displayImage.jsp?empId=7" width="90px" height="100px" style="border-radius: 12px;">
src="http://xyz/emp/displayImage.jsp?empId=7"
The Serversscript have to give you the data of image and not a reference to the image.
If the jsp gives you only a reference, you have to received the reference first and set it in the src-attribute
Hi, my FancybBox code works but then I start adding wowslider code then only the wowslider works properly. How do I solve this?
Here is the link to the page:
http://makaticitycondo.com/execstud_greenbelthamilton.html
If you click on Inquire Now button, a lightbox iframe is supposed to appear. But instead redirects it to a new page.
How can we solve this?
In link specify the attribute data-fancybox-type="iframe"
Refer the link
HTML:
<a class="fancybox" data-fancybox-type="iframe" href="inqsend_ghes.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','images/inquire.png',1)"><img src="http://makaticitycondo.com/images/inquired.png" name="Image2" width="204" height="120" border="0" id="Image2"></a>
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>
I'm trying to make a gallery with highslide.
I have two thumbnails, a larger but cropped one listed on the page opening the large image if clicked on, and a smaller one with varying aspect ratio for the thumbstrip.
How do I configure highslide to actually use different images for the thumbstrip?
For example this is a part of the markup:
<a href="highslide/sample-images/picture12.jpg" class="highslide"
title="Caption from the anchor's title attribute"
onclick="return hs.expand(this, config1 )">
<img src="highslide/sample-images/picture12.thumb.jpg" alt=""/>
</a>
The link is pointing to the large picture, the img is showing the cropped thumbnail.
Can I override a function for example to use two thumbnails like:
<a href="highslide/sample-images/picture12.jpg" class="highslide"
title="Caption from the anchor's title attribute"
onclick="return hs.expand(this, config1 )">
<img class="thumb" src="highslide/sample-images/picture12.thumb.jpg" alt=""/>
<img class="strip" src="highslide/sample-images/picture12.strip.jpg" style="display: none" alt="" />
</a>
Actually I found a solution to this some time ago:
On the highslide api reference http://highslide.com/ref/ there is a function stripItemFormatter. The parameter of the function is the element you expand (the element).
the string returned by this function will be parsed as html, and used as an item of the thumbstrip.
If you check this example: http://highslide.com/ref/hs.stripItemFormatter you can see how it's done.
I tried to get the image height and width from a href link image, but no luck. is there anyone know how to solve this problem?
here is the code:
<a href="/images/int_kit_a_set.jpg" class="upload">
<img src="/Assets/images/int_kit_a_set_thumb.jpg"
ondragstart="return false" height="108" width="144" alt="" />
</a>
Your HTML:
<img src="/Assets/images/int_kit_a_set_thumb.jpg" ondragstart="return false" height="108" width="144" alt="" />
Javascript w/jQuery:
var image = $("<img />").attr("src", $(".upload").attr("href"));
$(document).append(image);
alert(image.height());
alert(image.width());
image.remove();
I didn't test the javascript... but I'm not really sure your question is clear... so maybe this is what you wanted, maybe not.
Essentially, I'm grabbing the HREF attribute of the link, creating a new image on the page with that url, measuring the image, and then removing it from the DOM.
You could add a style to the image which placed it off screen or something... but you'd have to mess with it to find something that worked cross-browser. Some browsers don't consistently load images which aren't visible. I'm also not sure if you'd run into any timing issues with my script.
Putting it all together:
alert( new Image().src = $('.upload').attr('href')).width );