How to add gallery images.

How to add gallery images.

Support Forums White – HTML Template How to add gallery images.

This topic contains 5 replies, has 3 voices, and was last updated by  CreaboxThemes 7 months, 1 week ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #5482

    Dakota Barron
    Participant

    Hello. I don’t know how to go about adding gallery elements with multiple images to the work page. It is not in the documentation.

    Please advise?

    #5492

    CreaboxThemes
    Keymaster

    Hi Dakota,

    if you want to add a gallery item you have to add the next code within the gallery section:

    <div class="item photo">
         <img class="css3Animate" src="http://placehold.it/800x440&text=Gallery" alt="" />
         <div class="item-content css3Animate">
              <a href="http://placehold.it/800x440&text=Image" class="css3Animate portfolio-gallery" title="">
                   <h4 class="css3Animate">GALLERY EXAMPLE</h4>
                   <p class="css3Animate">The awesome project description</p>
              </a>
         </div>
    </div>

    In the first image element you have to set up the image, video or work page you want to load in the attribute href.

    Remember to set up the correct class value. I mean, for an image is the class portfolio-popup, for a video is the class portfolio-youtube or portfolio-vimeo, and for add a gallery element is the class portfolio-gallery.

    Regards

    #5493

    Dakota Barron
    Participant

    Hello,

    Yes I understand how to add a gallery object, but how do I add multiple images to a gallery?

    For example, what would the code look like for a gallery with 3 images in it?

    Thank you,

    Dakota

    #5498

    CreaboxThemes
    Keymaster

    Hi Dakota,

    sorry but that is not possible. You can only add one image for each gallery element. Really, each gallery object that you can add is one image of the whole gallery.

    Regards

    #6040

    Mulchio
    Participant

    hi Dakota.
    I was trying the same and it helped understanding that the gallery takes images from the ‘pool’. Having that said i was able to create a work-around. Thus now i have two separate galleries with different images, which is if i am correct what you are trying to do.

    #1. In your custom.js file you can add code for a second gallery (portfolio-gallery2) as such:

    
    $('.portfolio-gallery2').magnificPopup({
    		type: 'image',
    		removalDelay: 500, //delay removal by X to allow out-animation
    		callbacks: {
    		beforeOpen: function() {
    			   this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure mfp-with-anim');
    			   this.st.mainClass = 'mfp-zoom-in';
    			}
    		},
    		gallery: {
    			enabled: true 
    		},
    		closeOnContentClick: true,
    		fixedContentPos: false
    	});

    For clarity i put this in around line 320, right underneath the code for the first gallery.

    #2. Netx, in your index.html file you can then refer to that second gallery (portfolio-gallery2):

    <a href="images/work/image4.jpg" class="css3Animate portfolio-gallery2" title="">
    <h4 class="css3Animate">ANOTHER GALLERY</h4>
    <p class="css3Animate">The awesome project description</p>
    <a href="images/work/image5.jpg" class="css3Animate portfolio-gallery2" title="">
    <a href="images/work/image6.jpg" class="css3Animate portfolio-gallery2" title="">
    </a>

    #3. Finally, note how i had to put the project name and description underneath the first image, not at the bottom, to ensure it would show up on rollover in the grid.

    Hope this helps.

    #6044

    CreaboxThemes
    Keymaster

    Thanks for your contribution Mulchio. I will consider it in the next update.

    Regards

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

You must be logged in to reply to this topic.