Lightbox option for image in CMS rich text editor

Please add an option for an image in the CMS rich text editor to be clickable, so that a large size version is displayed lightbox style.

  • Markus J.
  • Jan 24 2017
CMS / Editor
  • Andy Martin commented
    12 Jul 18:58

    this idead is so good i like it

    دانلود آهنگ

  • Mustafa Kenan Yigitoglu commented
    09 May 10:26

    Step-1

    Open custom code section and add that css source in top of head (Inside <head> tag) section.

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />

    Step-2

    Add that js source in top of body (Before </body> tag) section.


    <script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

    Step-3

    Give an ID to your text editor. I gave (editorInbox) in that case.

    Step-4

    Add that custom code below to "Step-2".

    <script>

    var valuOfImg = $("#editorInbox").find("img").length;

    //console.log(valuOfImg);

    if( valuOfImg == 1){

    var imgURL = $("#editorInbox").find("img").attr("src");

    var getImgData = imgURL.substring(imgURL.length , imgURL.length - 13);

    if(getImgData == "_lightbox.jpg" || getImgData == "_lightbox.png" || getImgData == "_lightbox.gif")

    {

    $("#editorInbox").find("img").wrap( '<a href="'+imgURL+'" data-fancybox="images"></a>' );

    }

    }

    if( valuOfImg > 1){

    var i;

    for (i = 0; i < valuOfImg; i++) {

    var imgURL = $("#editorInbox").find("img").eq(i).attr("src");

    var getImgData = imgURL.substring(imgURL.length , imgURL.length - 13);

    if(getImgData == "_lightbox.jpg" || getImgData == "_lightbox.png" || getImgData == "_lightbox.gif")

    {

    $("#editorInbox").find("img").eq(i).wrap( '<a href="'+imgURL+'" data-fancybox="images"></a>' );

    }

    }

    }

    </script>

    Step-5 (important!)

    You have to add _lightbox to end of your file name.

    (yourimagefilename_lightbox.jpg , yourimagefilename_lightbox.png , yourimagefilename_lightbox.gif, etc.)

    THATS IT :)

  • Dave Kim commented
    27 Feb 02:48

    I agree!

  • Simone Taufenbach commented
    29 Jan 11:38

    Any News here?

  • Nicolas Fol commented
    April 04, 2019 08:40

    I absolutely need this! pls Webflow 

  • Nafta Studio commented
    February 27, 2019 20:05

    richtext option is an emergency more than e commerce for me, i know that store is attractive for new user and for webflow bank account but gallery and richtext image lightbox are musts.

  • Erwin Bomans commented
    December 02, 2018 12:17

    In need this to!

  • Erwin Bomans commented
    December 02, 2018 12:17

    I need this to!

  • Alex Cheng commented
    June 27, 2018 02:27

    I would go as far as group this as part of the CMS gallery.

  • Alex Cheng commented
    June 27, 2018 02:14

    Maxed out my 3 votes. Definitely a must. I would go as far as group this as part of the 

  • Brent Hegnauer commented
    June 24, 2018 03:49

    I would give this all 15 votes if I coud