CSS Codes
CSS Layouts

Creating a responsive gallery (v1.5 feature)

Creating a responsive Simple Controls Gallery is simple, and involves a combination of setting the gallery's width to a percentage value to start, then using CSS and CSS media queries to fine tune the result. For example, lets say we wish our gallery to behave as follows:

  • Span 80% of the parent container's width by default (so its width changes based on the parent container's). Its height should be 450px
  • Constrain the gallery's maximum width to 700px
  • When the device screen width is 400px or below, change the gallery's width to 100% its parent's width and 250px in height.

To do this, we simply set the default dimensions of the gallery inside the script, then use CSS and media queries to handle the other cases. The whole affair is easy and only requires minimal knowledge of CSS. Here is the result:

<link rel="stylesheet" href="simplegallery.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.touchSwipe.min.js"></script>

<script type="text/javascript" src="simplegallery.js">

/***********************************************
* Simple Controls Gallery- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Please keep this notice intact
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<style>
#simplegallery1{
	max-width: 700px;
}

@media screen and (max-width: 400px) {
	#simplegallery1{
		width: 100% !important;
		height: 250px !important;
	}
}
</style>

<script>

var mygallery=new simpleGallery({
	wrapperid: "simplegallery1", //ID of main gallery container,
	dimensions: ['80%', 450], //width/height of gallery in [pixels, pixels] or ['percentage%', pixels]
	imagearray: [
		["http://dynamicdrive.com/dynamicindex14/fullpageslideshow/img/img3.jpg", "", "_new", "Snail on the bench, less sensational than snakes on a plane"],
		["http://dynamicdrive.com/dynamicindex14/fullpageslideshow/img/img0.jpg", "", "", "Beautiful bird resting on a branch"],
		["http://dynamicdrive.com/dynamicindex14/fullpageslideshow/img/img1.jpg", "", "", "Lions and more lions oh my!"],
		["http://dynamicdrive.com/dynamicindex14/fullpageslideshow/img/img2.jpg", "", "", "Seagulls perching"]
	],
	autoplay: [true, 2500, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
	persist: false,
	scaleimage: 'both', //valid values are 'both', 'width', or 'none'
	fadeduration: 500, //transition duration (milliseconds)
	oninit:function(){ //event that fires when gallery has initialized/ ready to run
	},
	onslide:function(curslide, i){ //event that fires after each slide is shown
		//curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
		//i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
	}
})

</script>

Result:

Notice the use of !important following CSS values inside the media queries; this is to enforce/ override the same property values set by the script.

Table Of Contents

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post