Substituir conteúdo do data-desc para o conteúdo da div

[PetrusHenrique 5]

Pessoal,

 

Estou fazendo um site para um cliente e este pediu que houvesse uma sessão/galeria de fotos onde a lightbox das imagens fosse igual a do facebook, que abre a lightbox com a descrição do conteúdo ao lado direito. Achei, entretanto essa descrição é pega da seguinte linha do HTML

<div data-desc="Lorem Ipsum"></div>

O data-desc pode ser um texto enorme, por isso o lance da lightbox estilo facebook. Entretanto desta forma eu não consigo utilizar tags html dentro do data-dec, e este conteúdo vem dinamicamente do banco de dados do WordPress.

 

Gostaria de alterar esse javascript abaixo, para que ao invés de captar e mostrar o conteúdo do data-desc, captasse e mostrasse o conteúdo da DIV de forma que eu pudesse fazer assim:

<div class="descricao" style="display:none;">Lorem Ipsum</div>

E assim as tags que meu cliente utilizar no painel do WordPress aparecerem na lighbox.

 

Segue o código da lightbox.

/*
* jQuery Slider Plugin
* Version : Am2_SimpleSlider.js
* author  :amit & amar
* website :
* Date    :06-2-2014
 
* NOTE : "jQuery v1.8.2 used while developing"
*/

(function ($) {

    jQuery.fn.Am2_SimpleSlider = function () {
        //popup div
        $div = $('<div class="product-gallery-popup"> <div class="popup-overlay"></div> <div class="product-popup-content"> <div class="product-image"> <img id="gallery-img" src="" alt="" /> <div class="gallery-nav-btns"> <a id="nav-btn-next" class="nav-btn next" ></a> <a id="nav-btn-prev" class="nav-btn prev" ></a></div> </div><div class="product-information"> <p class="product-desc"></p></div> <div class="clear"></div><a class="cross">X</a></div></div>').appendTo('body');

        //on image click   
        $(this).click(function () {
            $('.product-gallery-popup').fadeIn(500);
            $('body').css({ 'overflow': 'hidden' });
            $('.product-popup-content .product-image img').attr('src', $(this).find('img').attr('src'));
            $('.product-popup-content .product-information p').text($(this).find('div').attr('data-desc'));
            $Current = $(this);
            $PreviousElm = $(this).prev();
            $nextElm = $(this).next();
            if ($PreviousElm.length === 0) { $('.nav-btn.prev').css({ 'display': 'none' }); }
            else { $('.nav-btn.prev').css({ 'display': 'block' }); }
            if ($nextElm.length === 0) { $('.nav-btn.next').css({ 'display': 'none' }); }
            else { $('.nav-btn.next').css({ 'display': 'block' }); }
        });
        //on Next click
        $('.next').click(function () {
            $NewCurrent = $nextElm;
            $PreviousElm = $NewCurrent.prev();
            $nextElm = $NewCurrent.next();
            $('.product-popup-content .product-image img').clearQueue().animate({ opacity: '0' }, 0).attr('src', $NewCurrent.find('img').attr('src')).animate({ opacity: '1' }, 500);
          
          
            
            $('.product-popup-content .product-information p').text($NewCurrent.find('div').attr('data-desc'));
            if ($PreviousElm.length === 0) { $('.nav-btn.prev').css({ 'display': 'none' }); }
            else { $('.nav-btn.prev').css({ 'display': 'block' }); }
            if ($nextElm.length === 0) { $('.nav-btn.next').css({ 'display': 'none' }); }
            else { $('.nav-btn.next').css({ 'display': 'block' }); }
        });
        //on Prev click
        $('.prev').click(function () {
            $NewCurrent = $PreviousElm;
            $PreviousElm = $NewCurrent.prev();
            $nextElm = $NewCurrent.next();
            $('.product-popup-content .product-image img').clearQueue().animate({ opacity: '0' }, 0).attr('src', $NewCurrent.find('img').attr('src')).animate({ opacity: '1' }, 500);
            
            $('.product-popup-content .product-information p').text($NewCurrent.find('div').attr('data-desc'));
            if ($PreviousElm.length === 0) { $('.nav-btn.prev').css({ 'display': 'none' }); }
            else { $('.nav-btn.prev').css({ 'display': 'block' }); }
            if ($nextElm.length === 0) { $('.nav-btn.next').css({ 'display': 'none' }); }
            else { $('.nav-btn.next').css({ 'display': 'block' }); }
        });
        //Close Popup
        $('.cross,.popup-overlay').click(function () {
            $('.product-gallery-popup').fadeOut(500);
            $('body').css({ 'overflow': 'initial' });
        });

        //Key Events
        $(document).on('keyup', function (e) {
            e.preventDefault();
            //Close popup on esc
            if (e.keyCode === 27) { $('.product-gallery-popup').fadeOut(500); $('body').css({ 'overflow': 'initial' }); }
            //Next Img On Right Arrow Click
            if (e.keyCode === 39) { NextProduct(); }
            //Prev Img on Left Arrow Click
            if (e.keyCode === 37) { PrevProduct(); }
        });

        function NextProduct() {
            if ($nextElm.length === 1) {
                $NewCurrent = $nextElm;
                $PreviousElm = $NewCurrent.prev();
                $nextElm = $NewCurrent.next();
                $('.product-popup-content .product-image img').clearQueue().animate({ opacity: '0' }, 0).attr('src', $NewCurrent.find('img').attr('src')).animate({ opacity: '1' }, 500);
                
                $('.product-popup-content .product-information p').text($NewCurrent.find('div').attr('data-desc'));
                if ($PreviousElm.length === 0) { $('.nav-btn.prev').css({ 'display': 'none' }); }
                else { $('.nav-btn.prev').css({ 'display': 'block' }); }
                if ($nextElm.length === 0) { $('.nav-btn.next').css({ 'display': 'none' }); }
                else { $('.nav-btn.next').css({ 'display': 'block' }); }
            }

        }

        function PrevProduct() {
            if ($PreviousElm.length === 1) {
                $NewCurrent = $PreviousElm;
                $PreviousElm = $NewCurrent.prev();
                $nextElm = $NewCurrent.next();
                $('.product-popup-content .product-image img').clearQueue().animate({ opacity: '0' }, 0).attr('src', $NewCurrent.find('img').attr('src')).animate({ opacity: '1' }, 500);
        
                $('.product-popup-content .product-information p').text($NewCurrent.find('div').attr('data-desc'));
                if ($PreviousElm.length === 0) { $('.nav-btn.prev').css({ 'display': 'none' }); }
                else { $('.nav-btn.prev').css({ 'display': 'block' }); }
                if ($nextElm.length === 0) { $('.nav-btn.next').css({ 'display': 'none' }); }
                else { $('.nav-btn.next').css({ 'display': 'block' }); }
            }

        }
    };

} (jQuery));

Eu até sei que linhas desse tipo aqui

$('.product-popup-content .product-information p').text($(this).find('div').attr('data-desc'));

Tem a ver com essa questão, mas não sei como modificá-las :(

Agradeço a todos que puderem ajudar.

 

Atenciosamente

[PetrusHenrique 5]

Pessoal, depois de muito pesquisar no google, resolvi trocando o .text por .html

 

¬¬

 

Sou um zero a esquerda em jQuery e JS. Ainda tenho q estudar muito.