I have a Tapestry 5 (5.3.4) app that shows a grid with some values. I want to add a field in grid that will show a image icon (i have done this) and when user clicks on the icon, lightbox will show the requested image (I need help with this part). The problem is the lightbox because the JavaScript is not called and the image is shown in single page (URL to image - resource on server). I have tried to open lightbox outside of a grid and it worked, but won't inside. Any thoughts?
Sorry for posting this question, but the answer was simple collision between jQuery and Prototype. Just needed to add $.noConflict(). to jQuery library. So lightbox was possible after all.
Related
I have a meteor query that returns a cursor with images data. I use bootstrap to arrange the images to display responsively. When each image is clicked I'd like a bootstrap modal to display/appear right above the clicked image. Is this possible? Any one care to demonstrate how to archive this?
It is possible. Easiest way is to use this package You can then proceed to create a modal, just like any other template and call Modal.show("myAwesomeModal"); from the click event of the image.
I could explain with some code, if you think you're stuck. But for the most part, the documentaion of the package will help.
I created a logo quiz in Asp.net. What I want is when the user fills the quiz he should not be able to right click and select on 'Search Google for image'.
Earlier I thought of using an alert using JavaScript but that can be disabled in the browser. Need a permanent solution for this.
Thanks in advance.
You could cancel the right-click event on the image. It would of course only work with JavaScript enabled, but there is no way of disabling that option altogether.
I know this is an old post, but, in case anyone else is trying to resolve the issue.
You can certainly disable the context menu in javascript, you can also render the image underneath a transparent object any attempts to click, or context menu the image would result in the click or context menu of the transparent image being triggered.
You could also add your image in css as a background image to a regular html element.
The context menu won't show up for it, but, inspect image will show a clickable link in the css attributes that anyone knowing a little web development will know about.
The best answer is a combination of the css and the transparent overlay.
I am making an ASP.NET website where i have sort of a static image gallery. Now when i click on an image in this gallery i want to show a pop up containing text (10-15 lines) describing the image.
How can I achieve this? I don't have much idea as to how I should proceed.
There are two steps to archive this.
First step is to make the pop up window using css.
Many examples on google about that.
Search on google
Open Css popup
Easy Css pop up
The Second step is to make your javascript to open it and show your actually text. If you use a library like jQuery you can make many thinks more easy, but if you wish pure javascript can you also make it work.
For example on the last link 'Easy Css pop up', the javascript to open it is:
<a href="javascript:void(0);" onMouseover="ShowPop('pop');"
onMouseout="HidePop('pop');"><img src="myimage.jpg" alt=""></a>
So what you do is to render your text of your images into the div that have this css popup and then you place a code like that on every image to open the correct popup.
Of cource you can find a ready to use gallery like the http://highslide.com/
You can use jQueryUI Dialog or simply open page with javascript
I will take the example of stackoverflow itself:
Stackoverflow displays icons using a single image (see image below):
What is this method of displaying icons called?
How is it done?
css sprites
http://css-tricks.com/css-sprites/
basically it uses css to pick which part of the image to display. it saves on round trips for fetching the images.
that link gets into the details on how it works.
I'm trying to display all node_edit form neatly within a lightbox without any of the excess content I don't want. No sidebars, footer, header, nothing. Just the content. So I created a page-node-edit.tpl.php file.
I have two problems daunting me, but for now I'll only mention the first since its more important.
1) From any drupal page, clicking on the "edit" link for the node doesn't activate the lightbox like it should. Instead it clicks-thru the link as normal.
With jQuery in the header I added a rel attribute for the lightbox to the links, but the box still doesn't activate. I tested the lightbox on a link I hardcoded into the page, and it activated just fine. For elements generated by Drupal, like the node edit link/button the problem seems to be timing.
I think the rel attribute needs to be built with the page, with the link, rather than appended onto it. The catch is, the link lacks an id and class, so I don't see how the hook_alter_link() function can help me.
I'm willing to try anything. Perhaps someone has done this before? Opened a node/edit form within a lightbox.
Any suggestions would be greatly appreciated.
I've seen the Modal Frame API used in a few modules (Node Relationships uses it to do something very similar to what you're doing); might be helpful...
http://drupal.org/project/modalframe