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>
Related
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
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>
I am new for script and jQuery
I’m using a multilanguage script to change from language. Now I'm having troubles to change from a language by using the image,
<img src="/flags/us.png" alt="en_EN" />
<img src="/flags/it.png" alt="it_IT" />
<img src="/flags/fr.png" alt="fr_FR" />
here after i dnot know how to use this image tag
what i want from this image tag , when i am click this image i want the alt value of corresponding image click.
Hoe to get it...
its possible or else give any other idea
thanks
Kumar
Put a class in your anchor and try this
<img src="/flags/us.png" alt="en_EN" />
<img src="/flags/it.png" alt="it_IT" />
<img src="/flags/fr.png" alt="fr_FR" />
$('a.lang img').click(function(){
var alt=$(this).attr('alt');
});
<a class='lang_link' href="#"><img src="/flags/us.png" alt="en_EN" /></a>
Assuming your links have a class of lang_link, you can look inside the link to see what language should be chosen.
$('.lang_link').click(function(){
var lang = $(this).find('img:first').attr('alt');
});
I have my image link inside a div with a url to my next page. And what i want to do is that; when the images are clicked, it fades to the new page specified by there link. if someone could help, that would be awesome.
<div>
<a href="page three.htm">
<img src="images/Tbutton.gif" width="71" height="65" border="0" alt="" id="Tbutton" />
</a>
</div>
Think this should work:
$(img).click(function() {
window.location = $(this).closest('a').attr('href');
});
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.