i am working on a project in which i have to make a webpage of photographs. In this page i have to show multiple image. User need is that when he click on any image it will zoom but that time it alsoback webpage as background.
You could change the image width and height by javascript, change its z-index so that it comes top of everything when user clicks the image. When user clicks the image second time, change its width and height to normal.
Have a look at this post.
Hope I answer youe question.
try to put invisible Div on your web page (with z-index: 1; display: none;). After Click just put zoomed image on div and make div visible.
You can use a jQuery plugin like #Abdul said. Considering the fact that is a webpage of photographs, and design is important, you should use NivoZoom or my personal favorite fancybox .
Related
We're all familiar with the "button" on a webpage. You click a button and it triggers something.
I'm wondering if it's possible to do something similar with slices of a pie, where each pie slice represents a button, and pressing the button would be the same thing as pressing an #Html.ActionLink().
I could imagine doing an image map over a flat image, and I can go that route if I have no other options, but it would be more visually appealing if the pie slices can actually be pressed in the same way that a button can.
Is such a thing possible on an MVC webpage?
you can use ImageMapster a perfect plugin for similar approaches.
here is its repository
ImageMapster is a jQuery plugin that lets you activate HTML image maps without using Flash. It works just about everywhere that Javascript does, including modern browsers, Internet Explorer 6, and mobile devices like iPads, iPhones and Androids
To do what you want you could combine an image map with a separate image for each state of the "pie". You are showing a default state. You would need to create an image for each depressed state (one for each slice of the pie). The each image would show the whole pie with one or no item depressed.
Then, the best look would probably be to put them into a single image and use CSS sprites to switch the image position (which will control which image is in the viewport) based on which image map section is clicked.
I have a page that in this page i have one image and at run time i add 3 buttons but these button come to front of image. how can i send these button to back. i use Panel.SetZindex but not works. thank you.
Have you also used Panel.SetZindex for image control? I think you would have used it just for buttons not for image thats why buttons are still coming in front of image control.
You should set z-index of buttons to least possible value and the z-index of image to highest possible value so that image would comes in front.
Use following code:
Panel.SetZindex(button1,0);
Panel.SetZindex(button2,1);
Panel.SetZindex(button3,2);
Panel.SetZindex(image,3);
Set buttons z-index property to lowest possible number and then add it at run time.
I have used Modal Pop-up extender in an image gallery project which shows the actually size of images when somebody click's on thumbnail inside a datalist.
Everything works fine, beside the location on ModalPop-up is appears at the random location on the screen and sometimes push the image off the screen to right side, If I hard code x and y coordinates then the small image appears and extreme right not in sync.
If I click, re-size or change the scroll position then it re positions to the center of the page but not otherwise.
Kindly suggest a work around to either change the scroll bar position as soon as ModalPop-up is shown (using client script), or an CSS property which I can use to set it.
Thanks a lot in advance.
I have a Control: Image
And I'm adding the image in a foreach, in my divContainer.
The Problem is, that there are about 100 Images. Now the website loads and at the end
when all Images were been loaded, it shows me the result!
But I want an asynchron view/result, so that I don't have to wait, till every image has been loaded, it should add the Images in front of my eyes - one after the other.
Thats the Code, which adds the Image to the Div: myDiv.Controls.Add(image);
How can I achieve this?
ASP.NET works by building up the HTML then outputting it to the browser, it won't send them one by one.
Does building the html to output really take up that much time anyway?
If its getting to the browser then the browser doesn't show all the images until each one is loaded then its the browser doing this. The browser can finish the layout of the page and start showing images if you make sure you have the height and width set on each image tag when it goes out.
I had image for Products and i want user when click on image appear image as popup with big size and save it
as
http://www.istockphoto.com/file_browse.php?exu=1&action=abstracttype&value=15&page=4
Is this what you need? (very hard to guess from your question)
ASP.NET JavaScript Image Popup Done Right