How to create block of html code in jquery?-CodePudding

I created fancybox via jquery but I want to write it in some nicer way. I am interesting in overlay variable.

I think that overlay content can be written in php partial folder and transfer to jquery, but how it is done in more professional way?

This is my code:

 /*
    Gallery Fancybox
    */

    var overlay = $('<div id="overlay"><div id="overlay__left-arrow-block"><span id="overlay__left-arrow"></span></div><div id="top-margin"></div><div id="overlay__img-wrapper"></div><div id="overlay__bottom-slider"></div><div id="overlay__right-arrow-block"><span id="overlay__right-arrow"></span></div><div id="overlay__close-btn">Zavrieť</div></div>'),
        gallery = $('.item-detail__gallery'),
        galleryImgs = gallery.find('img'),
        galleryImgWrappers = gallery.find('a'),
        image = $('<img>', {class: 'lightbox__img'}),
        loadingImg = $('<img>', {src: '/bazar/assets/img/icons/circle.svg', class: 'loading-img'});

    // Create FANCYBOX

    // Start overlay
    overlay.appendTo('body').hide();

    // Show overlay after click on a elemet of gallery
    gallery.find('a').on('click', function(event) {
        event.preventDefault();

        // Define avriables
        var galleryImgWrapperHref = $(this).attr('href');

        // Show overlay
        overlay.appendTo('body').show();

        // Show chosen image in overlay
        image.attr('src', galleryImgWrapperHref);

        // Show loadin image before image is loaded
        loadingImg.appendTo('#overlay__img-wrapper');

        // Image will show after it will be loaded, before loading image is showed
        image.on('load', function() {
            image.appendTo('#overlay__img-wrapper');
            loadingImg.hide(); // Hide loading image afet image was loaded
        });

        // Make images slider for thumbnails from gallery
        galleryImgs.each(function() {

            var src = $(this).attr('src'),
                href = $(this).parent().attr('href');
                thumbWrapper = $('<a/>', {id: 'overlay__img-thumb-wrapper'}),
                thumbImg = $('<img>', {id: 'lightbox__img-thumb'});

            // Add thumb image src and id from original image and href to a element from original e element in gallery
            thumbWrapper.attr('href', href);
            thumbImg.attr('src', src);
            thumbWrapper.html(thumbImg); // Put image into thumbImgWrapper
            thumbWrapper.appendTo('#overlay__bottom-slider');

            // If src of thumb and main image is the same then mark thumb as active
            if ((thumbImg.attr('src').substring(thumbImg.attr('src').lastIndexOf("/")   1) == image.attr('src').substring(image.attr('src').lastIndexOf("/")   1))) {
                thumbWrapper.addClass('img-active');
            }
        })

    });

Thank you

CodePudding user response：

ECMAScript 5

You should concatenate strings.

First example

$(function() {
  var html = '<div>'  
               '<div>Foo</div>'  
               '<div>Bar</div>'  
               '<div>Baz</div>'  
             '</div>';
           
  $('body').append(html);
});

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>

Second example

$(function() {
  var html = "<div>";
      html  = "  <div>Foo</div>";
      html  = "  <div>Bar</div>";
      html  = "  <div>Baz</div>";
      html  = "</div>";
    
  $("body").append(html);
});

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>

ECMAScript 6

You can use template literals.

$(() => {
  let html = `<div>
                <div>Foo</div>
                <div>Bar</div>
                <div>Baz</div>
              </div>`;
            
  $('body').append(html);
});

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>