opening an image in rails on click - javascript

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

Related

jquery colorbox 'inline' modal opening for first time only

I am using jquery colorbox 'inline'. It is opening first time from a specific link.
<a class="addFile inline" href="#inline_content">
<img src="img/nav-icons/icon_plis.png" alt="">
Add File
</a>
with the jquery written over
$(".inline").colorbox({inline:true, width:"40%",href:"#inline_content"});
but when I am trying to open another inline content (#inline_content2) from different link(s) on the same page, the previous inline content (#inline_content) is opening. Please help me to resolve the issue.
-thanks
in click event for
$('.inline').on('click',function(e){
e.preventDefault();
$(this).colorbox({inline:true, width:"40%",href:$(this).attr("href")});
});
or you can use .each();
$('.inline').each(function(){
$(this).colorbox({inline:true, width:"40%",href:$(this).attr("href")});
});
if both of them not work make a specific class for each anchor
$(".inline").colorbox({inline:true, width:"40%",href:"#inline_content"});
$(".inline1").colorbox({inline:true, width:"40%",href:"#inline_content1"});
$(".inline2").colorbox({inline:true, width:"40%",href:"#inline_content2"});
... etc

Change fancybox close button within html for one page scroll site

I have one page scroll site(like f.ex. fullPage.js, fullContent.js), where fancybox is used to open up new content.
<a class="fancybox" rel="group" href="#content">
<img src="img/thumb.jpg" alt="" />
</a>
<div id="content" style="display:none;">
// content
</div>
Close button by default in fancybox is positioned absolute, which is not acceptable in my case - close button needs to be within specific div.
One way to trigger close is the following:
close
It does close content, but it drops to start position of website, not to section from where fancybox is triggered.
Any ideas how to get close button working so that after closing content, viewpoint doesn't change?
Interesting that default close button, which is enabled through js keeps viewpoint where it was before opening fancybox.
$(".fancybox").fancybox({
closeBtn : true,
});
Thanks in advance.
Use this:
close
This will stop the the browser to slide up.
Or you may also try:
<a href="#nogo"> or <a href="javascript:;">

Anchor tag overridden by div's onclick upon adding target="_blank"

This used to be my (working) code:
<div onclick="location.href='http://somewebsite.com/';">
Link
</div>
If I'd click the link, I would be taken to http://someotherwebsite.com/. If I'd click somewhere else in the div, I would be taken to http://somewebsite.com/. Perfect.
Then, I decided that I wanted to open http://someotherwebsite.com/ in a new tab upon clicking the link, so I changed my code to this:
<div onclick="location.href='http://somewebsite.com/';">
Link
</div>
However, if I'd click the link now, I would be taken to http://somewebsite.com/ instead of http://someotherwebsite.com/! Apparently, adding target="_blank" to my anchor tag caused my onclick method to override my anchor tag's href. What's going on?
Edit: It turns out, my code does function properly in Chrome, but not in Safari 7.0.5. What can I do to add Safari support?
Try
<div onclick="location.href='http://somewebsite.com/';" target="_self">
Link
</div>
jsfiddle http://jsfiddle.net/guest271314/8deea/

Trying to remove pesky alt text from lightbox gallery

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.

In an HTML page I need to anchor to a tag on mouseover

<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.

Categories