I have a gallery of my paintings at www.unlicensedeyesurgery.com which uses the famous Lightbox code. There is one problem with it: the Lightbox code uses the rel attribute of the anchor tag to display the description of the image in the pop-up "window." However, this somehow overrides the images' alt property and shows the ugly, HTML-code description in the mouse tooltip. Is there a way to disable to tooltip altogether—perhaps using JS?
Code Example:
<a href="#" rel="<em>lightbox html<span>styled</span> text in here<em>">
<img src="photo.jpg" alt="this is overwritten" />
</a>
Your title overrided by <a title="...."> as you have here image set it's title to alt content
you can do it with javascript:
window.onload=function() {
var images=document.getElementsByTagName('img');
for (var i in images) {
images[i].title=images[i].alt ;delete(images[i].alt);
}
};
The problem is the anchors rel is getting precedence over the images alt tag in the tooltip.
The solution is to add a title: title="photo title" to all your img tags and browsers will show that instead of the anchor's rel.
Related
I need to open an image on click listener
like this
and this should have close button also so that user can close it
i tried
<a class="need-help"><p>Need Help</p> <img src="<%=image_path('img/check-sample.png') %>" alt=""> </a>
I am thinking to append the img src tag to the anchor but i don't think it will work like the screenshot which i attached
any idea how to pop up image on the click of an anchor tag
If you're using bootstrap you can use the modal plugin
i have a simple html site where at the top is a main image with a download button.
The download works with the html5 download attribute.
Now i have some thumbnails underneath the main image - which when clicked replace the main image with the thumbnail image.
Following issue: I use the same javascript code to also replace the url of the download button with the thumbnails url, but when clicking the download button it still opens the hardcoded download link from the html instead of using the replaced url.
HTML
<div class="dwnldcntnr">
<img src="imgage1.jpg" alt="Image Title 1" />
</div>
<div id="btncntnr">
<a href="imgage/image1.jpg" download="image1.jpg">
<button id="btn">Download</button></a>
</div>
<div class="itemcntnr">
<a href="image2.jpg" title="2.jpg">
<img src="image2.jpg" />
</a></div>
JS code for replacing download url with thumbnail url
<script type="text/javascript">
$(document).ready(function() {
$('.itemcntnr a').click(function() {
var path = $(this).attr('href');
$('#btncntnr a').attr('href', path)
.attr('download', $('a', this).attr('title'));
return false;
});
});
</script>
Don't put hard coded href for the link in html instead try to add it on $(document).ready
Also I agree with ahren that you should never put button inside an a tag. Instead apply styles to a tag so that it will look like a button
Try replacing the whole DOM element.
I don't think you should be nesting a button inside an a tag, as they're both elements that have native interactivity. You'll most likely come across HTML parsing errors in earlier versions of IE.
$('.itemcntnr a').click(function() {
var $this = $this.clone().empty().html('Download');
$('#btncntnr a').replaceWith($this);
return false;
});
Fist time using fancybox and it's not going so well.. starting to wish I didn't bother with it.
I have some thumbnails in a row, fine, then when I click one it opens the THUMBNAIL instead of the link whats worse it DELETES the thumbnail from the DOM. I've dug around in the fancybox src for the issue but there's a lot of it and I'll probably end up killing functionality so I thought I'd post here.
heres the code:
The raw HTML comes from CMS looking like:
<img src="http://blah..blah..from..flickr..001_s.jpg" alt="my image one" class="flickr-square" title="test image" longdesc="" data-url="http://blah..blah..flickr..detail..page" data-orig="http://blah..blah..flickr..big..001_b.jpg">
<img src="http://blah..blah..from..flickr..002_s.jpg" alt="my image one" class="flickr-square" title="test image" longdesc="" data-url="http://blah..blah..flickr..detail..page" data-orig="http://blah..blah..flickr..big..002_b.jpg">
I then run some stuff in backbone view render, the important bit is this:
var imgs = this.$el.find("img"); //:a jquery group of the img elements above
this.content = this.$el.find("span.postcontent");
//empty current
this.content.empty();
//make replacement
for(i= 0;i<imgs.length;i++)
{
var curImg = $(imgs[i]);
var curLink = $("<a/>");
curLink.attr("href",curImg.attr('data-orig'))
curLink.append(curImg);
curLink.on("click",function(e){
e.preventDefault();
$.fancybox.open(imgs)
});
this.content.append(curLink)
}
I now have rendered html like this:
<a href="http://blah..blah..flickr..big..001_b.jpg">
<img src="http://blah..blah..from..flickr..001_s.jpg" alt="my image one" class="flickr-square" title="test image" longdesc="" data-url="http://blah..blah..flickr..detail..page" data-orig="http://blah..blah..flickr..big..001_b.jpg">
</a>
<a href="http://blah..blah..flickr..big..002_b.jpg">
<img src="http://blah..blah..from..flickr..002_s.jpg" alt="my image one" class="flickr-square" title="test image" longdesc="" data-url="http://blah..blah..flickr..detail..page" data-orig="http://blah..blah..flickr..big..002_b.jpg">
</a>
So far so good... now, when I click the link/thumb it does the fancybox thinggy but shows the THUMBNAIL not the linked image, tiny in the middle in it's lightboxy thing and whats really annoying is that the clicked thumbnail in the page itself has now been completely removed from the dom ie.:
<a href="http://blah..blah..flickr..big..001_b.jpg">
///THIS IS MISSING COMPLETELY..... ggggggrrrrr
</a>
<a href="http://blah..blah..flickr..big..002_b.jpg">
<img src="http://blah..blah..from..flickr..002_s.jpg" alt="my image one" class="flickr-square" title="test image" longdesc="" data-url="http://blah..blah..flickr..detail..page" data-orig="http://blah..blah..flickr..big..002_b.jpg">
</a>
I've never seen Fancybox used like that. Normally, you don't need to trigger $.fancybox.open like that. You can just bind fancybox() to the <a> tags.
HTML:
<a href="big-image.jpg" class="fancybox">
<img src="thumbnail.jpg">
</a>
JavaScript:
$('.fancybox').fancybox();
Try just using that function after you've got the DOM to look like that.
[edit]
I couldn't get your DOM manipulation to quite work, but I tested with this fiddle, and it seems to be working: http://jsfiddle.net/haRnQ/4/
NOTE: I didn't import the styles or images for the demo, so it will be unstyled, but it still works.
I'm answering and voting up the previous two because they both helped but were not the definitive answer. The documentation was not clear that if you use only the "group" as a jquery array you must also specify options therefore the correnct answer is to do this (passing two arguments):
$.fancybox.open(imgs,
{
href:this.href,
title:curImg.attr("title")
}
);
Try changing this
$.fancybox.open(imgs)
by this
$.fancybox({
href: this.href
});
because imgs is the collection of your thumbnails (all <img> elements), which are moved to fancybox on click but not moved back after close.
In any case I would recommend you to add a class to <a> otherwise any other anchor you may have in your page would try to open fancybox.
I believe Fancybox prefers wrapping your images in an anchor. This is important to note as Fancybox removes the anchor when activating a slide show to prevent clicking on the anchor when the modal is active.
Calling FB from the thumb behaves like you have experienced by deleting the thumb and not recovering it after the modal is closed.
This is my typical FB setup (not a thumb gallery):
<img src="image1.jpg" alt="" />
<div style="display: none">
...
</div>
<img src="pic1.jpg" class="mythumbs">
<img src="pic2.jpg" class="mythumbs">
<img src="pic3.jpg" class="mythumbs">
<img src="pic4.jpg" class="mythumbs">
<script>
/*
here is the code which makes me when i click on any image, it shows me its src attribute
(without using idTag 'preferred').
*/
alert(theAttribute);
</script>
i need to type a code which shows me the clicked item's src attribute without using idTags
$(function(){
$("img.mythumbs").click(function(){
alert($(this).attr("src"));
});
});
This code will alert the src attribute of all img elements which has a css class mythumbs
Working sample : http://jsfiddle.net/tZcpw/1/
Here is a solution without ID and Class. This will alert src when you click images.
$("img").click(function(){
alert($(this).attr("src"));
});
You may replace $("img") with $(".your_class-here") if you want to do this with a class.
Here is a working Live Demo.
<a href="#anchor1">
<img src="http://www.test.com/images/test/test.png" width="80" height="150" />
</a>
<div id="anchor1">...</div>
When I mouse over test.png I need it to scroll the page to #anchor1 ..help_me
Use Javascript inside the onmouseover event:
<img onmouseover="window.location.hash = 'anchor1'" />
Note that you don't use the '#' character.
Also, you are not naming the anchor correctly. It should be:
<a name="anchor1" .... instead of href.
I'm not sure you're using "anchor" in the generally accepted sense.
the tag is a "anchor" tag that is used to wrap around an image or text link, or now virtually any DOM object it consists of either a href tag, which is it's target, or a name tag in which case it IS a target. so a page with
<a id="part1"/><h3>part 1</h3></a>
and
<img src="..." onMouseover="$.scrollTo('#part1');">
clicking on the image would make the page scroll so that the h3 containing "part1" would be at the top of the page.
to do it with jQuery and mouseOver you'll need to use jQuery scrollTo() then you can define your speed and easing.