Home Forums Porto Template 3 columns masonry gallery

This topic contains 8 replies, has 2 voices, and was last updated by  fede13 2 months ago. This post has been viewed 192 times

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #10022754

    fede13
    Participant

    I want to make that the 3 columns mansonry, play like images gallery, now If I click take me the link to portfolio-single-small-slider.html but I want to make the gallery image effect, I want, when I clik the image to open in a big imagelike happens in the gallery images, no to take me to another html.
    How can i meke this? Thanks


    #10022757

    Support2
    Keymaster

    Hello,

    On link below is the code that you need to create a lightbox gallery with masonry.
    https://pastebin.com/raw/4fSbQdM6

    Basically you need to wrap the masonry with a lightbox plugin div. Also note the links <a> of each masonry item.

    Please, try that and let me know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10022764

    fede13
    Participant

    Thanks very much Rodrigo, yes this is what I wnat, but in 3 columns masonry, like ( portfolio-masonry-3-columns.html ) with and open imag gallery.
    I try now to put the <div class=”image-gallery lightbox” data-plugin-options=”{‘delegate’: ‘a.lightbox-portfolio’, ‘type’: ‘image’, ‘gallery’: {‘enabled’: true}}”>
    before the 3 columns masonry but didn´t work, Is not so easy for me 🙁

    With your code works perfect but is 4 columns and no margin…


    #10022769

    Support2
    Keymaster

    Hello,

    Sorry i missed the “3 columns”. In that case follow the steps below:

    1) Add the class “custom-masonry-item-size” on each masonry item, like the code below:

    <div class="masonry-item custom-masonry-item-size">
    	<a href="img/projects/project.jpg" class="lightbox-portfolio">
    		<span class="thumb-info thumb-info-centered-info thumb-info-no-borders">
    			<span class="thumb-info-wrapper">
    				<img src="img/gallery/gallery-1.jpg" class="img-responsive" alt="">
    				<span class="thumb-info-title">
    					<span class="thumb-info-inner">Project Title</span>
    					<span class="thumb-info-type">Project Type</span>
    				</span>
    				<span class="thumb-info-action">
    					<span class="thumb-info-action-icon"><i class="fa fa-link"></i></span>
    				</span>
    			</span>
    		</span>
    	</a>
    </div>

    2) Add the code below in (css/custom.css):

    .custom-masonry-item-size {
    	width: 33.33333% !important; // 3 columns
    	padding: 10px 5px 0 5px; // gap between items
    }

    Please, try that and let me know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10022779

    fede13
    Participant

    Ok Thanks, Now it´s work but the separation between each image is missing (there one next to the other, no like “portfolio-masonry-3-columns.html”
    Can we fix this easily?
    Thanks again!!


    #10022787

    Support2
    Keymaster

    Hello :),

    Sure, just change the padding value to:

    padding: 0 15px 30px 15px;

    Please, try that and let me know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10022831

    fede13
    Participant

    The padding I don´t know why is not working!!
    http://www.naturasi.es/new/moncloa.html


    #10022836

    Support2
    Keymaster

    Hello,

    I saw that is missing the “px” on number “30” of padding.
    Also remove the comments. Change like the code below:

    .custom-masonry-item-size {
    	width: 33.33333% !important;
    	padding: 10px 15px 30px 15px;
    }

    Please, try that and let me know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10022840

    fede13
    Participant

    Now works perfect!!!
    Thanks for your help!!!


Viewing 9 posts - 1 through 9 (of 9 total)