Netflix style photo gallery
I would like to have a Netflix style photo gallery in my Sitefinity website.
Basically, when a user hovers over the photos in the photo gallery, I would like to be able to display a description hover box that provides details on the photos in a manner similar to how Netflix provides details about a movie when hovering over a thumbnail image of the Movie.
Is there a way to already do this in Sitefinity v. 4.1 SP3 or does something need to be added such as a JavaScript content block etc. in order to provide this hover functionality to the existing photo/image gallery controls?
Hi Samir,
I have tried to find this netflix style gallery with no success. Should I have a credentials for their website to see it?
However here is an example with image gallery (movies list), and when you hover the poster the description is shown:
I have used customized widget template, few CSS rules and few lines of JS. Here is the custom image gallery template:
<%@ Control Language="C#" %><%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.ContentUI" Assembly="Telerik.Sitefinity" %><%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI" Assembly="Telerik.Sitefinity" %><%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.PublicControls.BrowseAndEdit" Assembly="Telerik.Sitefinity" %><%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %><sf:BrowseAndEditToolbar ID="browseAndEditToolbar" runat="server" Mode="Edit"></sf:BrowseAndEditToolbar><telerik:RadListView ID="ItemsList" ItemPlaceholderID="ItemsContainer" runat="server" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false"> <LayoutTemplate> <ul class="sfimagesList"> <asp:PlaceHolder ID="ItemsContainer" runat="server"/> </ul> </LayoutTemplate> <ItemTemplate> <li class="sfimageListItem"> <div class="poster"> <sf:SitefinityHyperLink runat="server" id="singleItemLink" /> </div> <div class="more-info"> <div class="title"><sitefinity:TextField runat="server" DisplayMode="Read" Value='<%# Eval("Title")%>' /></div> <div class="director"><sitefinity:TextField runat="server" DisplayMode="Read" Value='<%# Eval("Author")%>' /></div> <div class="description"><sitefinity:TextField runat="server" DisplayMode="Read" Value='<%# Eval("Description")%>' /> </div> </div> </li> </ItemTemplate></telerik:RadListView><sf:Pager id="pager" runat="server"></sf:Pager>
Here is the entire CSS of my theme:
body background-color: #eee; font-family: Arial; font-size: 12px;#PublicWrapper position: relative; float: left; width: 900px; padding: 20px; margin: 20px; background-color: white;.sfimageListItem border: 10px solid #EEEEEE; float: left; height: 280px; margin: 10px; position: relative; width: 180px; list-style: none;.sfimagesList float: left; margin: 0; padding: 0; position: relative; width: 100%;.poster position:relative; float:left; width: 180px; height: 280px; overflow: hidden;.more-info position:absolute; left: -10px; width: 160px; padding: 20px; height: 260px; top: -10px; background-color: rgba(0, 0, 0, 0.7); color: #999; font-size: 11px; display: none;.title font-size: 16px; font-family: Georgia, "Times New Roman", Times, serif; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #fff; color: white; position:relative; float:left; width: 100%;.director position: relative; font-size: 12px; color: #ccc; float:left; margin-bottom: 10px; width: 100%;
This is the jQuery code used for the hover event:
$(document).ready(function() $('.poster').mouseover(function() $(this).next().fadeIn('fast'););$(".more-info").mouseout(function() $(this).fadeOut();))
For the meta info the following built-in fields are used - title, description and author (no custom fields).
Can you point me to this netflix gallery so I can prepare similar example?
All the best,
Jordan
the Telerik team
I have attached a screenshot of the Netflix image gallery with the hover functionality for your review.
In addition, RedBox.com has similar functionality for their image gallery.
Something like this?
Hi,
From the screenshots I saw this sample perfectly fits in the scenario, right?
Kind regards,
Jordan
the Telerik team
Yes, exactly! Is there any chance that this functionality can be built right into the Sitefinity Image Gallery functionality rather than having to write a custom control to accomplish this?
Hi,
Actually this is not a custom control we are modifying the widget template and adding three lines of javascript. Also may be the better way to do more complicated descriptions of the movies you should use the lists content items and use custom widget templates. The lists are created exactly for these scenarios.
Regards,
Jordan
the Telerik team
I was previously using the Thumbnails with Lightbox functionality. Do I customize that Widget template or did you customize a different Widget template?
Do I simply customize the widget template and then add a JavaScript block to the Page that has my Image Gallery?
If so, when I type in the specified JavaScript into the JavaScript block, my page remains in an infinite loop and is never able to completely publish the page. I have waited for more than 10 mins and the page never returns from the JavaScript-->write JavaScript event.
Please advise.
Hello Samir,
I have customized the simple images list widget template and the javascript was added in the page template. I also tried to put it inside a page and it is published without any problems. Did you try with the same script? If you are using your own can you provide us here so we can test with it?
Greetings,
Jordan
the Telerik team
I have modified the Images - Simple List template in SItefinity v. 5.01, but I do not see any options to select any associated JavaScript or CSS for the template.
I have modified the Images - Simple List template in SItefinity v. 5.01, but I do not see any options to select any associated JavaScript or CSS for the template.
I published the Widget Template - Simple Image List based on your sample, but it is not working as expected: