More in this section

Forums / Developing with Sitefinity / Netflix style photo gallery

Netflix style photo gallery

12 posts, 0 answered
  1. Samir Vaidya
    Samir Vaidya avatar
    261 posts
    Registered:
    05 Feb 2005
    27 Jul 2011
    Link to this post
    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?
  2. Jordan
    Jordan avatar
    172 posts
    Registered:
    20 Oct 2015
    27 Jul 2011
    Link to this post
    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
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Samir Vaidya
    Samir Vaidya avatar
    261 posts
    Registered:
    05 Feb 2005
    28 Jul 2011
    Link to this post
    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.
  4. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    28 Jul 2011
    Link to this post
    Something like this?
  5. Jordan
    Jordan avatar
    172 posts
    Registered:
    20 Oct 2015
    28 Jul 2011
    Link to this post
    Hi,

    From the screenshots I saw this sample perfectly fits in the scenario, right?


    Kind regards,
    Jordan
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  6. Samir Vaidya
    Samir Vaidya avatar
    261 posts
    Registered:
    05 Feb 2005
    28 Jul 2011
    Link to this post
    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?

  7. Jordan
    Jordan avatar
    172 posts
    Registered:
    20 Oct 2015
    28 Jul 2011
    Link to this post
    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
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  8. Samir Vaidya
    Samir Vaidya avatar
    261 posts
    Registered:
    05 Feb 2005
    01 Aug 2011
    Link to this post
    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.
  9. Jordan
    Jordan avatar
    172 posts
    Registered:
    20 Oct 2015
    01 Aug 2011
    Link to this post
    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
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  10. Samir Vaidya
    Samir Vaidya avatar
    261 posts
    Registered:
    05 Feb 2005
    07 Apr 2012
    Link to this post
    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.

    Where do I place this content when customizing the Widget template?

    Thanks.
  11. Samir Vaidya
    Samir Vaidya avatar
    261 posts
    Registered:
    05 Feb 2005
    07 Apr 2012
    Link to this post
    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.

    Where do I place this content when customizing the Widget template?

    Thanks.
  12. Samir Vaidya
    Samir Vaidya avatar
    261 posts
    Registered:
    05 Feb 2005
    07 Apr 2012
    Link to this post
    I published the Widget Template - Simple Image List based on your sample, but it is not working as expected:

12 posts, 0 answered