1-888-365-2779
+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / Image Widget - show large image in fancybox style

Image Widget - show large image in fancybox style

2 posts, 0 answered
  1. Markus
    Markus avatar
    2763 posts
    Registered:
    25 Nov 2005
    19 Dec 2012
    Link to this post
    First I must thank Jochem once again for pushing me to finally try to make my own solution.

    Here we go. screencast http://www.marktold.com/screencast/fancybox_images.swf

    I think the image widgets option to show an image in original size is cool. However having it open as a new blank window like in 1998 is a bit embarrassing.

    Here is my solution I would like to share.

    1) I downloaded fancybox version 2.1.3 from here http://fancyapps.com/fancybox/#license
    2) Extracted the files and included the files in my own project.  I have a root folder MyResources where I have some general stuff. Split in images, scripts, styles -> so I had to change jquery.fancybox.css (css_changes.png) image pathes to my own hierarchie. -> MyResources.png
    3) created fancybox.ascx with the following code
    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="fancybox.ascx.cs" Inherits="SitefinityWebApp.UserControls.fancybox" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
    <!-- Add jQuery library -->
    <script type="text/javascript" src="/MyResources/scripts/jquery-1.8.3.min.js"></script>
     
    <!-- Add mousewheel plugin (this is optional) -->
    <script type="text/javascript" src="/MyResources/scripts/jquery.mousewheel-3.0.6.pack.js"></script>
     
    <!-- Add fancyBox -->
    <link rel="stylesheet" href="/MyResources/styles/jquery.fancybox.css?v=2.1.3" type="text/css" media="screen" />
    <script type="text/javascript" src="/MyResources/scripts/jquery.fancybox.pack.js?v=2.1.3"></script>
     
        <script type="text/javascript">
            $(document).ready(function () {
                $(".sfimageWrp a").fancybox();
            });
        </script>

    4) build my project and uploaded the whole stuff.
    5) In the backend Admin - Settings - Advanced - Toolboxes  I have my own section where I add the fancybox.ascx (add_ascx.png)
    6) now a client can select an image widget, choose to have original size shown and drag the fancybox.ascx widget to the page. I dragged it to the bottom of the page.

    So now when clicked the images should open in fancybox style.

    Markus

    PS: Tried it first on master.master but then the sitefnity gallery would no longer work :-( so therefore this (might be clumsy) approach. 

    Seems to work so far. Looking for feedback.

    Markus

    PS: Wished the image widget would do this automatically.
  2. Patrick Dunn
    Patrick Dunn avatar
    237 posts
    Registered:
    03 Nov 2014
    24 Dec 2012
    Link to this post
    Hi Markus,

     Thank you for your contribution. Looks great!

    All the best,
    Patrick Dunn
    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
2 posts, 0 answered