nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Child Item

Modify this Bootstrap Expandable Image Gallery

jdunne08

Hi.
How can I modify this Bootstrap Expandable Image Gallery; I want to make the expandable card fit the width of the screen when an image card is clicked but keep the 4 image cards in the same position?

I'm having trouble trying to figure it out as its a complicaed code for me. Any help would be greatly appreciated.

Couldn't add a Jsfiddle but heres links to Demo and Git Hub:

GitHub link to Image Gallery : https://github.com/geedmo/gridex
Live Demo : https://kautube.com/plugin/expandable-image-gallery-using-jquery-and-bootstrap/

Thanks

Find more posts tagged with

css

html

jquery

bootstrap

image gallery

Quick Links

Comments

mightyreds

if you change container to container-fluid in the top level div this will make it full width but also push your thumbnail pictures to the left ,you could then try center them again using the margin:auto 0 trick

I tried this it didn't center the thumbnails exactly right but then I added some padding to push them across to the center of the screen

jdunne08

mightyreds wrote: »

if you change container to container-fluid in the top level div this will make it full width but also push your thumbnail pictures to the left ,you could then try center them again using the margin:auto 0 trick

I tried this it didn't center the thumbnails exactly right but then I added some padding to push them across to the center of the screen

Thanks for the help. Did you change that code in the gridex.css stylesheet or the bootsrap.css stylesheet?

mightyreds

just changed the class in the top div from class="container wrapper" to class="container-fluid wrapper" , that will make it full width then added a center style in the styles at the top . of the html page

.center { margin : auto 0; }

add that to the ul for the thumbnails and then messed round with padding in the center class to try push it properly center

jdunne08

mightyreds wrote: »
just changed the class in the top div from class="container wrapper" to class="container-fluid wrapper" , that will make it full width then added a center style in the styles at the top . of the html page
.center { margin : auto 0; }
add that to the ul for the thumbnails and then messed round with padding in the center class to try push it properly center

Thank you!!

Also, Do you know how I can change the background colors of the individual rows of thumbnails? I have tried by creating a new ul class for each row (copying the original and renaming "gridex2" ) and it kind of works, it changes the BG Color but it doesnt expand anymore, its lost it function I think.

This is what I mean:

mightyreds

I would guess the function that hides and expands the image is targeting certain css classes so by adding in to that you break the functionality, maybe try target the ul from the css itself , something like this here
https://stackoverflow.com/questions/4619756/style-2nd-element-on-the-page-with-same-class

Talisman

Looking at the demo page there is a 'gd-expanded' class added to the <li> tag when an image is selected. You'll need to use this in the CSS rule to perform the required styling.

You will need to over ride the 'overflow: hidden' rule for the outer <div> container.

The following CSS rules should work for you, but you will probably need to restyle the elements within the inner <div> afterwards.

/* Make overflow visible for expanded content */
li.span3.gd-expanded > div.gd-expander {
  overflow: visible;
}

/* Move left and right margins to window boundary */
li.span3.gd-expanded > div.gd-expander > div.gd-inner {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

jdunne08

mightyreds wrote: »

I would guess the function that hides and expands the image is targeting certain css classes so by adding in to that you break the functionality, maybe try target the ul from the css itself , something like this here
https://stackoverflow.com/questions/4619756/style-2nd-element-on-the-page-with-same-class

Just tried fix it with the nth-child but I cant seem to do it. When I duplicate the grid it does lose its function so I think you are right with it breaking the functionality.

I found a new expandable image grid to work with and have made a fiddle with it to show the problem.

Jsfiddle

jdunne08

Talisman wrote: »
Looking at the demo page there is a 'gd-expanded' class added to the <li> tag when an image is selected. You'll need to use this in the CSS rule to perform the required styling.

You will need to over ride the 'overflow: hidden' rule for the outer <div> container.

The following CSS rules should work for you, but you will probably need to restyle the elements within the inner <div> afterwards.
/* Make overflow visible for expanded content */
li.span3.gd-expanded > div.gd-expander {
  overflow: visible;
}

/* Move left and right margins to window boundary */
li.span3.gd-expanded > div.gd-expander > div.gd-inner {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

Yes, thank you for the help.

Any chance you know why duplicates an expandable image grid cuses the second copy to lose its function?

Heres a Jsfiddle. You can see that I duplcated the first image grid and it no longer expands but the first one still does, any ideas?

Talisman

jdunne08 wrote: »

Yes, thank you for the help.

Any chance you know why duplicates an expandable image grid cuses the second copy to lose its function?

Heres a Jsfiddle. You can see that I duplcated the first image grid and it no longer expands but the first one still does, any ideas?

You have two containers on the page, both of which use the same 'og-grid' value for the 'id' property.

<ul id="og-grid" class="og-grid" ...

The id for each should be unique, however the linked grid.js file has the value hardcoded so it can only be used with a single instance of the grid.

jdunne08

Talisman wrote: »
You have two containers on the page, both of which use the same 'og-grid' value for the 'id' property.
<ul id="og-grid" class="og-grid" ...
The id for each should be unique, however the linked grid.js file has the value hardcoded so it can only be used with a single instance of the grid.

Oh so theres nothing I can really do because its hardcoded??
That explains why I was creating difeerent id (og-grid2) and it still wouldnt work

Talisman

jdunne08 wrote: »

Oh so theres nothing I can really do because its hardcoded??
That explains why I was creating difeerent id (og-grid2) and it still wouldnt work

How good are your JavaScript coding skills? Provided you know what you are doing then changing the code to do what you need should be easy enough.

In your JavaScript code, 'Grid' is defined as an Immediatel Invoked Function Expression or IIFE which returns an object with two methods: init and addItems.

var Grid = (function() {

	var $grid = $( '#og-grid' ), // here is the hardcoded selector

	// ... rest of the code

	return { 
		init : init,
		addItems : addItems
	};

})();

IIFEs are for things you want to do exactly once, so there can only be a single instance of the container on a page.

What you need to do is turn the IIFE into a prototype object declaration so that you can declare multiple instances of Grid.

The code will end up in this pattern:

function Grid(gridId) {
	// gridId is the selector
	this.$grid = $( gridId );
	// more code here
}

Grid.prototype = {
	init: function ( config ) {
	// loads more code
	},
	// etc ...
	//      etc ...
	//            etc ...
}

And afterwards you can have as many instances as you need.

<script>
	$(function() {
		Grid.init();
	});
</script>

Could be replaced with the following:

<script>
	$(function() {
		var grid1 = new Grid('#grid-id-1');
		var grid2 = new Grid('#grid-id-2');
		grid1.init();
		grid2.init();
	});
</script>

You would need to pass the correct selector string to each new instance of the Grid object.