Modify Gallery Code

nunomira

How do you modify this gallery's code
http://themes.muffingroup.com/be/showcase/portfolio-item/aliquam-eratac/
?

Where is the following code coming from?

----------------------------------
<div class="image_wrapper"><a href="http://themes.muffingroup.com/be/showcase/wp-content/uploads/2014/05/home_showcase_portfolio_1b.jpg" rel="lightbox[gallery-1]" data-type="gallery"><div class="mask"></div><img src="http://themes.muffingroup.com/be/showcase/wp-content/uploads/2014/05/home_showcase_portfolio_1b-300x300.jpg" class="attachment-thumbnail size-thumbnail" alt="" srcset="http://themes.muffingroup.com/be/showcase/wp-content/uploads/2014/05/home_showcase_portfolio_1b-300x300.jpg 300w, http://themes.muffingroup.com/be/showcase/wp-content/uploads/2014/05/home_showcase_portfolio_1b-80x80.jpg 80w, http://themes.muffingroup.com/be/showcase/wp-content/uploads/2014/05/home_showcase_portfolio_1b-85x85.jpg 85w" sizes="(max-width: 300px) 100vw, 300px" style="height: auto; width: 100%;" width="300" height="300"></a></div>
----------------------------------

I thought it was coming from /wp-includes/media.php but I don't think it is.

nunomira

The code is in the \themes\betheme\js\scripts.js file.
So, in your theme, you can override this script.
The original is

----------------------------------
$( '.gallery-icon > a', el )
                .wrap( '<div class="image_frame scale-with-grid"><div class="image_wrapper"></div></div>' )
                .prepend( '<div class="mask"></div>' )
                .children( 'img' )
                    .css( 'height', 'auto' )
                    .css( 'width', '100%' );
----------------------------------

So I changed it to

----------------------------------
var href = $( '.gallery-icon > a', el ).attr('href');
            $( '.gallery-icon > a', el )
                .append('<div class="image_links"><a href="' + href + '" class="zoom" rel="lightbox" data-type="image"><i class="icon-search"></i></a></div>')
                .wrap( '<div class="image_frame scale-with-grid"><div class="image_wrapper"></div></div>' )
                .prepend( '<div class="mask"></div>' )
                .children( 'img' )
                    .css( 'height', 'auto' )
                    .css( 'width', '100%' );
----------------------------------

So that the gallery has the same behaviour as other images

Bryan

Hi,

What you ask for, requires files customization what in reference to Item Support Policy is not allowed. So if you want to modify files and don't know how, you should contact your web developer. Item Policy says:
Item support does not include services to modify or extend the item beyond the original features, style, and functionality described on the item page. For customization services that will help you tailor the item to your specific requirements, we recommend contacting the author to see if they privately offer paid customisation services or checking out the great service providers on Envato Studio

thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next