Image Widget - show large image in fancybox style

Posted by Community Admin on 04-Aug-2018 16:50

Image Widget - show large image in fancybox style

Sitefinity - Front- & Back-End Development

All Replies

Posted by Community Admin on 19-Dec-2012 00:00

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.

Posted by Community Admin on 24-Dec-2012 00:00

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

This thread is closed