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
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've been using the HTML5 UP Photon template https://html5up.net/photon
I'm trying to retrofit one of the buttons towards the bottom called "Learn More" to open up a modal window with a few paragraphs of text. I've tried to give the button a btnID and link a js function to open it but I can't get it to work. Any help would be appreciated. Here's the html. The preset class references Bootstrap I think.
<li>Learn More</li>
As far as I can tell, the template you are using does not provide any modal window component out of the box, so you'd have to find one and plug it in there or write one yourself. Assuming you go for something ready made, you need to do the following:
Search for jquery modal window and find one you like.
Download it's js and css files and them into your page (or use a CDN)
Write some simple jquery to call that modal. It could be as simple as writing $('a:contains("Learn More")').modal(). This depends on the modal componet you choose
Let me know in the comments if you want more 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 have to build a site like France24.com, There is a navigation on the left and two arrows on sides for scrolling to the sides. when you click on the arrows or one of navigation items , the related page (preloads) and appears without refreshing the page. How to do that? Is there any usable framework or sample for this?
Regards
After looking at the website, I see what you are trying to do. I see a way to do this, which is through a simple JQuery method load() ( http://api.jquery.com/load/ ). This behaves like get(), so on clicking the arrow, an event could be triggered where you can load another piece of HTML code in place of the one the user is currently looking at.
If you need dynamic content to load instead of a simple static HTML code, it's possible to achieve that by filling in the dynamic part into the HTML code that you want to load before actually loading it. A library that you can use to achieve something like this is React js, developed by FB. Good luck!
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.