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

Forums / Developing with Sitefinity / Image Gallery Lightbox customization problem

Image Gallery Lightbox customization problem

7 posts, 0 answered
  1. Darko Tomic
    Darko Tomic avatar
    5 posts
    Registered:
    28 Oct 2009
    04 Feb 2010
    Link to this post
    Hi,

    I'm developing a site for a client, at the moment localy - when I finish the site I'll move it to the live environment and activate client license. So, the version is 3.7 standard trial.

    I am not a developer, and totally new to Sitefinity. So, I've gone through a few weeks of reading, searching forums etc. to get some issues solved.
    So, now I'm stucked with Image Gallery Lightbox customization. I succeed in mapping my own template (GalleryLightboxList.ascx) and associating my own stylesheet to it. This works fine, except two things:

    1.  I can't remove inline style for generated thumbnails. I just want to put a nice gray border to all of my thumbnails, but the hardcoded inline style is always here:<img style="border-width: 0px;" ... and won't let me set the border through css file.
    I also found this topic, but had no luck with solving this issue: 

    2. How can I map different lightbox templates to different galleries? I want to be able to control the frontend design of my galleries separately. So, I tried to set duplicated GalleryLightboxList2.ascx but with no luck. When I set the Image Gallery ItemListTemplatePath to this new template, I get following server error: 'The resource object with key 'Gallery_GoBack' was not found'. Also I tried to put additional template to controls.config.xml file but then I get the message: An item with the same key has already been added.
    So, is it possible to have different Item List Templates for different lightbox gallaries (on the same site) and how?

    My config file Telerik.Sitefinity.Configuration.ControlsConfig.xml looks like this at the moment:
    <?xml version="1.0" encoding="utf-8" ?>
    <controlsConfig>
      <viewMap>
        <viewSettings hostType="Telerik.News.WebControls.NewsArchive" layoutTemplatePath="~/Sitefinity/ControlTemplates/News/ArchiveTemplate.ascx" />
        <viewSettings hostType="Telerik.Polls.WebControls.PollBox" layoutTemplatePath="~/Sitefinity/ControlTemplates/Polls/PollBox.ascx" />
        <viewSettings hostType="Telerik.Polls.WebControls.ResultsBox" layoutTemplatePath="~/Sitefinity/ControlTemplates/Polls/ResultsBoxNoLegend.ascx" />
        <viewSettings hostType="Telerik.Libraries.WebControls.ImageGallery">
          <additionalTemplates>
            <add key="LightBoxListTemplatePath" layoutTemplatePath="~/Sitefinity/ControlTemplates/Libraries/GalleryLightboxList.ascx" />
     </additionalTemplates>
        </viewSettings
    </viewMap>
    </controlsConfig>

    I would greatly appreciate any help regarding this issue.

    Thank you very much,
    Darko
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    16 Jun 2017
    04 Feb 2010
    Link to this post
    Hello Darko Tomic,

    1. If you add the following classes in the theme stylesheet you should be able to see 6px Red border around each image. the width in the other two css classes is calculated  150 - the default value + 2x6 px for left and right.

    ol.sf_photoListLightbox li dd.sf_image img
    {
        border: 6px solid Red !important;
    }
    ol.sf_photoListLightbox li
    {
        width:162px !important;
    }
    ol.sf_photoListLightbox li dd.sf_image
    {
        width:162px !important;
    }


    2. You have to map the template through ImageGallery control designer from the backend UI. Open the control in edit mode nad go to AdvancedTab. Then scroll to the down and under TemplatePaths cateogry set ItemListTemplatePath property to point to your custom template.

    All the best,
    Ivan Dimitrov
    the Telerik team

    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
    Follow the status of features or bugs in PITS and vote for them to affect their priority.
  3. Darko Tomic
    Darko Tomic avatar
    5 posts
    Registered:
    28 Oct 2009
    04 Feb 2010
    Link to this post
    Thank you very much Ivan.

    1. Now this works, following your tip.

    2. I've done this already, as I described in my first post. I duplicated the template file i.e. created GalleryLightboxList2.ascx . Now on page where I have second Image Gallery control, in the Advanced tab I set this new template (under TemplatePaths set ItemListTemplatePath property). So, I get this error 'The resource object with key 'Gallery_GoBack' was not found....'
    Maybe the problem is because I use two template files, I don't know. First file GalleryLightboxList.ascx works good in first gallery where I use it. But I can't set the second template file to work on other page gallery.
    Any hints?

    Best regards
    Darko

  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    16 Jun 2017
    04 Feb 2010
    Link to this post
    Hi Darko Tomic,

    You have to copy the local resources as well and rename the resx file to GalleryLightboxList2.resx

    Regards,
    Ivan Dimitrov
    the Telerik team

    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
    Follow the status of features or bugs in PITS and vote for them to affect their priority.
  5. Darko Tomic
    Darko Tomic avatar
    5 posts
    Registered:
    28 Oct 2009
    04 Feb 2010
    Link to this post
    Thank you once more Ivan, I finally get it working :)

    All the best,
    Darko Tomic
  6. Besian Krasniqi
    Besian Krasniqi avatar
    1 posts
    Registered:
    14 Jan 2010
    06 Feb 2010
    Link to this post
    Hi,

    I am having a problem to basically open the images in lightbox after I customize my gallery. I mapped the external templates and I got the thumbnails working the way I want to but after clicking on each thumbnail the image appears not in the lightbox but in the next page. 

    Any Idea, I chose from the settings in the ImageGallery to display List & Lightbox, 

    Please let me know, 
  7. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    16 Jun 2017
    07 Feb 2010
    Link to this post
    Hi Besian Krasniqi,

    Check whether there are any js errors thrown. Make sure that the lightbox scripts are loaded.

    Best wishes,
    Ivan Dimitrov
    the Telerik team

    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
    Follow the status of features or bugs in PITS and vote for them to affect their priority.
Register for webinar
7 posts, 0 answered