I am trying to set up functionality similar to Netflix. Where if you mouseover a movie - you are presented with a window of movie details (all client-side).
At high level, can someone in this forum help by telling me how this should be implemented? I.E., one or more .aspx pages, what would go in code-behind, and .js file, css, etc. Just trying to get an idea on how this would be set up to work.
Basically, when I hover over an item, I need to query for details that belongs for that record being moused-over and display it in the window or div. I also need to have some functionality in that window (i.e. a textbox and button which will end up needing to get saved in a database).
Thanks for any tips and suggestions -
You would want to add an AJAX call to the hover event of the image, that pulls from a webservice/web method.
Here is a good example, you would change some things. However, it should get you started.
http://www.mikesdotnetting.com/Article/96/Handling-JSON-Arrays-returned-from-ASP.NET-Web-Services-with-jQuery
If I understood your question correctly, you should try this excelent jQuery plugin:
http://www.sohtanaka.com/web-design/css-on-hover-image-captions/
Look at the demo here:
http://www.sohtanaka.com/web-design/examples/image-hover/
easy to install and configure and very slick!
Good luck
EDIT: sorry wrong lik the first time
There are certainly many jQuery plugins that will do this for you. jQuery UI may also be of benefit.
Here is one that appears to do something like you are describing:
http://plugins.jquery.com/project/VisualLightbox
Related
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'm trying to build a page in which contains images and while clicking images i want it to navigate to next page.
I've had a look at Seadragon but as far as I can see it is not possible.
Can anyone propose a solution?
Thanks
It's hard to tell from your description exactly what you're trying to do, but I imagine it's possible with the latest version of OpenSeadragon:
http://openseadragon.github.io/
Take a look at these possibilities:
http://openseadragon.github.io/examples/tilesource-sequence/
http://openseadragon.github.io/examples/ui-reference-strip/
... Or you could add a custom click handler to do what you want.
I use collective.plonetruegallery for image galleries within Plone and I like it. However, what I miss is a "download" button or a simple "link" in order to let users actually download a image. The "Galleria" display view of plonetruegallery does seem to offer such a link/button -- does any of the other display views? Or any other solution whithout having to hack the plonetruegallery addon myself?
I know that you can right click and then choose "download image" among several other options within your preferred browser -- however, for a dumb user to cumbersome ;)
I have added an option to collective.ptg.contactsheet (1.1.2) that let you choose between going to the content or downloading it.
Espen
There's not a built-in "feature" to do this. You can see which of the gallery views might have this; looks like you've already found one. I'm sure you could easily customize another one to include such a link, simply by following the example in Galleria.
This is quite easy to make. The url to download the image would probably be:
/path/to/image/download
One option could be to just add an action.
If you want to have this for a specific gallery, I can probably fix it.
(go to https://github.com/collective/collective.ptg.contactsheet or whatever gallerytype you want it for and add an "Issue"
Espen
I am having an ASPX page and i m trying to using jQuery light box(slimbox).I am able to invoke the Lightbox.Now i want to show the content of another page in this lightbox.Ex : I have a data entry form for user registration(signup.aspx).I want to show this when user clicks on the link (which is now showing image in the light box) .Is this possible, If Yes, Willl the evenet handlers work for that ASP page ? ie ;When user enter the data and clicks on the Button,Will it fire a Server side event ?
Thanks in advance
Slimbox is only for image content. See the FAQ. You'll need to make some changes for it to work with an ASPX page.
Quoting from the FAQ:
Is Slimbox able to display Flash
content (like videos), iFrames or
other content?
No, Slimbox has been designed from the
ground up to display images only, to
be simple and to have the smallest
code. However, some people have
created Slimbox derivatives that
implement these features. Because it's
open source, you are free to modify
the code to fit your needs, as long as
you respect the terms of the licence
and keep the credits.
I haven't used slimbox but if it supports iframe then you should be able to do anything within the box as you can on a regular page.
I don't think SlimBox supports that. There are plenty of other ways to do it. For example using FaceBox: https://github.com/defunkt/facebox
I like the feedback link that's static while the page scrolls and I want to add something similar to my site. See www.bind.pt, right side, for example. However I don't want to use UserVoice. I want to use a popup window with a form-to-email functionality.
Is there a similar sample asp.net component or Javascript that's available for a lazy developer like me for re-use?
There's an excellent solution to this problem here - the poster's own answer.
Enjoy!