[JOHN DParticipant]

Hi, John here from bammeltv.com, Integrity dark

I have added a page called Gallery of Historical Images. We’re a TV and electronics repair shop, I’ve always wanted to add such a critter, we have a ton of cool old images of old classic electronics that I want to put up on a secondary/tertiary page, maybe increase the stay time on our site, &c. But I’m not sure the best way to do this in X.

I have currently about 115 scanned images, they’re full-page size. I’d like them to display as little thumbnails that blow up to full size upon the visitor’s click. Can you recommend a procedure—I don’t understand how to use thumbnails I guess—how many thumbnails can I cram into a row, and all that.

John in Houston

[Lloyd CParticipant]

Hello,

I would also be interested with the answer since using portfolio items aren’t very practical if you just want a kinda photo gallery.

For the moment I’m just using the “Image” element on that page : http://alaingautier.fr/preprod/medias/
But the loading is long (all the full width images are loading at the same time, not when you click them within the lightbox) and you have to do everything manually…

Thanks in advance !
Lloyd

[RadModerator]

Hi Guys,

You could just use portfolio post items with featured image ( as a thumbnail http://awesomescreenshot.com/0b42xdble9 )

Then follow the step 2 given here http://theme.co/x/member/forums/topic/portfolio-and-blog-help/page/2/#post-37503

And you’re set.

Just let us know if there is confusing part, and we will gladly help you.

Thank you.

[Lloyd CParticipant]

Hi

Thanks for your answer !
It works quite good indeed, the only problem I have is with the lightbox view which doubles the image you’re zooming in…
See here : http://alaingautier.fr/preprod/test-portfolio/

Any idea what could cause this ?
Thanks again !

[RadModerator]

Hi Lloyd,

For the code you copied from other thread, could you replace its code from

jQuery(document).ready(function(){jQuery('.page-template-template-layout-portfolio-php .type-x-portfolio a').iLightBox({skin: 'light',overlay: {opacity: 0.875,blur: true},styles: {prevScale: 0.75,prevOpacity: 0.75,nextScale: 0.75,nextOpacity: 0.75},path: 'horizontal',controls: {thumbnail: false}});});

into:

jQuery(function($){
	$(document).ready(function(){
		
		$('.page-template-template-layout-portfolio-php .x-portfolio-filter').each(function(){
			$( $(this).data('option-value') ).iLightBox({skin: 'light',overlay: {opacity: 0.875,blur: true},styles: {prevScale: 0.75,prevOpacity: 0.75,nextScale: 0.75,nextOpacity: 0.75},path: 'horizontal',controls: {thumbnail: false}});
		});		

	});	
});

Cheers!

[Lloyd CParticipant]

Thank you very much, I’m gona try this !
Cheers

[RadModerator]

You’re welcome Lloyd! Let us know 🙂

[KiljanParticipant]

To Lloyd and support:
This is how the page mentioned above looks like to me:

This problem with not being able to easy create a grid gallery that opens in a lightbox is very annoying.

[ZeshanMember]

Hi Kiljan,

Thank you for writing in!

Adding the following CSS code to Customizer > Custom > CSS will resolve the issue with the images:

.x-img {max-width: 100%;}

Please review this answer for grid gallery question: http://theme.co/x/member/forums/topic/efficient-use-of-block-grid-for-ilightbox/#post-62110

Hope this helps. Please let us know if you have any question, we will be happy to answer.

Thank you

[KiljanParticipant]

Thanks, that solved it for me. I´ll look into the other option to. Thanks again.

[ChristianModerator]

You’re welcome Kiljan.

[Author]

Posts