cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <h1>Loading multiple slides from a Data-attribute into Jquery Cycle 2</h1>

<a class="btn modal-trigger-slide" data-slides='
"<div class=&#39;slide&#39;><img src=&#39;http://www.greggant.com/emerge/codepen/cycle/drill.jpg&#39;></div>",
"<div class=&#39;slide&#39;><img src=&#39;http://www.greggant.com/emerge/codepen/cycle/reach.jpg&#39;></div>",
"<div class=&#39;slide&#39;><img src=&#39;http://www.greggant.com/emerge/codepen/cycle/hero3.jpg&#39;></div>"'
>Trigger Slideshow 1</a>

<a class="btn modal-trigger-slide" data-slides='
"<div class=&#39;slide&#39;><img src=&#39;http://www.greggant.com/emerge/codepen/cats/cat1.jpg&#39;></div>",
"<div class=&#39;slide&#39;><img src=&#39;http://www.greggant.com/emerge/codepen/cats/cat2.jpg&#39;></div>",
"<div class=&#39;slide&#39;><img src=&#39;http://www.greggant.com/emerge/codepen/cats/cat3.jpg&#39;></div>",
"<div class=&#39;slide&#39;><img src=&#39;http://www.greggant.com/emerge/codepen/cats/cat4.jpg&#39;></div>"'
>Trigger Slideshow 2</a>




	<div class="modal ">
		<div class="rotate">
			<div class="container">
				<div class="row">
					<div class="col-xs-22 col-xs-offset-1 background-black text-center">
						<div id=""></div>
						<a href="#">
							<div class="close"><i class="fa fa-times"></i></div>
						</a>
						<div class="cycle-slideshow" data-cycle-fx=fadeout data-cycle-timeout=0 data-cycle-center-horz=true data-cycle-center-vert=true data-cycle-auto-height=true data-cycle-slides="> .slide">
							<div class="cycle-prev"><i class="fa fa-chevron-left"></i></div>
							<div class="cycle-next"><i class="fa fa-chevron-right"></i></div>
							<div class="slide"><img src="http://www.greggant.com/emerge/codepen/cycle/test.jpg"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>


<div class="container">
	<div class="row">
		<div class="col-sm-12">
				<h3>What is going on in this pen?</h3>
				<p>jQuery Cycle 2 is a pretty powerful plugin, and has the ability to add and remove slides. This pen demostrates how to trigger a slide show from a button, that contains multiple slides on a data-attribute. JSON is used to parse it and then spit back into the slideslide. Upon closing the slide show, all the slides are removed. See the Javascript comments for more details!</p>
					<h3>Back Story</h3>
					<p>For a current CMS managed project, the client's website has gallery, where each image triggers a slide show. This means roughly 20 seperate slide shows on a single page. This is a paired down version of said code that uses a single modal and single instance of jQuery Cycle on the entire page to repopulate the same slide show repeatedly.</p>
		</div>
	</div>
</div>
            
          
!
            
              .modal {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 101;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	overflow: auto;
	transition: all .5s;
	opacity: 0;
	-webkit-perspective: 1300px;
	-moz-perspective: 1300px;
	perspective: 1300px;
	display: none;
	.cycle-slideshow {
		width: 100%;
		img {
			//position: relative !important;
			top: 0;
		}
		.cycle-prev, .cycle-next {
			position: absolute;
			top: 0;
			color: white;
			z-index: 1005;
			top: 45%;
			font-size: 40px;
			opacity: 0.75;
		}
		.cycle-next {
			right: 0;
		}
	}
	.background-black {
		background-color: #000;
		position: relative;
	}
	.slide, .background-black, .cycle-slideshow {
		height: 400px;
	}
	.background-white {
		background-color: white;
	}
	.slide {
		width: 100%;
		text-align: center;

	}
	img {
		max-width: 100%;
		max-height: 100%;
		//width: 100%;
    height: auto;
	}
	.more-info {
		float: right;
		text-align: center;
		text-transform: uppercase;
		font-size: 11px;
		margin-left: 30px;
		line-height: 1em;
	}
	.container {
		margin-top: 135px;
	}
	.close {
		position: absolute;
		right: 0px;
		top: 0px;
		background: grey;
		width: 40px;
		height: 40px;
		padding-top: 8px;
		z-index: 1001;
		color: white;
	}
	.info {
		padding: 20px;
		font-size: 13px;
		line-height: 1.3em;
		i {
			font-size: 16px;
			margin-bottom: 1px;
			//font-style: normal;
		}
		p {
			padding: 0;
			margin: 0;
		}
	}
	h1 {
		font-size: 160px;
	}

	.rotate {
	//	height: 85%;
	transition: all .5s;
		-webkit-transform-style: preserve-3d;
		-moz-transform-style: preserve-3d;
		transform-style: preserve-3d;
		-webkit-transform: rotateY(-70deg);
		-moz-transform: rotateY(-70deg);
		-ms-transform: rotateY(-70deg);
		transform: rotateY(-70deg);
		-webkit-transition: all .3s;
		-moz-transition: all .3s;
		transition: all .3s;
		opacity: 0
	}
}
.noscroll .modal {
	display: block;
}
.addopacity {
	.modal, .rotate {
			opacity: 1;
	}
	.rotate {
		//color: white;

		-webkit-transform: rotateY(0deg);
		-moz-transform: rotateY(0deg);
		-ms-transform: rotateY(0deg);
		transform: rotateY(0deg);
	}
}
.show {
	overflow: hidden;
	.modal {
		position: fixed;

		display: block;
	}
}




// Page styling
.btn {
	color: white;
	padding: 10px;
	background: rgb(116,153,22);
}
h1 {
	color: #fff;
	font-size: 40px;
	font-family: 'Raleway', sans-serif;
}
body {
	width: 100%;
	height: 100%;
	min-height: 800px;
	text-align: center;
	background: rgb(205,235,142);
	background: radial-gradient(ellipse at center, rgba(205,235,142,1) 43%,rgba(116,153,22,1) 100%); 
	line-height: 1.4em;
}
            
          
!
            
              (function(jQuery) {
		"use strict";
		var Engine;
		jQuery(document).ready(function() {
			Engine = {
				ui: {
					clearSlides : function () {
						//This function destroys all the slides in the current slide show.
						var numSlides = $('.cycle-slideshow').data('cycle.opts').slideCount;
						for(var slide = 0; slide < numSlides; slide++) {
						$('.cycle-slideshow').cycle('remove', slide);
						// if the elements are not removed from the DOM you could also
						// try call $('.cycle-slideshow .cycle-slide').eq(slide).remove(); here
							console.log("clearslides");
						}
					},
					modal : function () {
						//The close button scripts
						$(".close").click(function() {
						
							$("body").removeClass("addopacity");
							setTimeout(function() {
									$("body").removeClass("show");
							}, 600);
							//destroy slides on close
							Engine.ui.clearSlides();
							console.log("close");
						});
						
					},
					dynamicSlideshow : function(){
						/*
							JQuery Cycle needs an array that is nabbed
							Array format
							<div data-slides='"a","b","c"'> </div>

							==================================
							Working Example of properly formatted code
							==================================
							<a id="test" href="" data-slides='
							"<div class=&#39;slide&#39;><img src=&#39;../images/fpo/source/IMG_4728.jpg&#39;></div>",
							"<div class=&#39;slide&#39;><img src=&#39;../images/fpo/hero4.jpg&#39;></div>",
							"<div class=&#39;slide&#39;><img src=&#39;../images/fpo/profile4.jpg&#39;></div>"
							'>

						*/
						
						$(".modal-trigger-slide").click(function(){
							//make the slideshow no longer display:none;
							$("body").addClass("show");
							//delete slides
							Engine.ui.clearSlides();
							//Grab the images list and stash into JSON
							var images = 	JSON.parse( '[' + $(this).data("slides") + ']' );
							//Add the slides into jQuery Cycle
							for (var i=0; i < images.length; i++) {
								$('.cycle-slideshow').cycle('add', images[i]);
							}
							$(this).prop('disabled', true);
							//Make the slide show visible.
							setTimeout(function() {
											$("body").addClass('addopacity');
							}, 500);
						});
					}	
				} // ui
			}; // Engine
			Engine.ui.modal();
			Engine.ui.dynamicSlideshow();
		}); // Engine
}(jQuery));

            
          
!
999px
Loading ..................

Console