Demo

Overview

Here is the sample page of CKEditor plugins with using CKEditor's version 4. Upload file is not possible on this demo, just keep playing with the available images !!.

Click on "SlideShow" plugin button in the toolbar, create your slide show, and then

Press to `Preview` button to see preview of what you will get !!

New Feature

You can now add "clickable" link on images, to allows to open a specific page when clicking on the image. For more information go to the SlideShow Plugin page.

Bugs & Known Issues

Preview panel does not work correctly with IE9 and below (Due to the usage of "iframe" for the preview popup, It seems that the preview panel doesn't work with Internet Explorer version 9 and below).

<h1><strong>Welcome in the Slide Show Demo</strong></h1>

<p><strong>Just an example, with 3 slide shows, and a table !! Click on the button to preview the result. Double Click on a slide Show object to Modify / Edit It, and preview again !!</strong></p>

<ul>
	<li><strong>The first SlideShow has no thumb, and no FancyBox open on images click. <span style="color:tomato;">The second image is "clickable", try It !!</span></strong></li>
	<li><strong>The second has  open on enabled, click, just click an image and see the result !!, Show-Title enabled, so the title and short description given to the images (if any) is displyed ! (You can edit these values by clicking on the EDIT buton in the Slide Show dialog editor).</strong></li>
	<li><strong>The third has open on enabled, click, just click an image and see the result !!</strong></li>
</ul>

<hr />

<div class="ad-nav" contenteditable="false" style="display: none;">
			<div class="ad-thumbs" contenteditable="false">
			<ul class="ad-thumb-list" contenteditable="false">
				<li contenteditable="false"><a contenteditable="false" href="https://devlabnet.eu/softdev/slideshow/filemanager/userfiles/1.jpg"><img alt="" contenteditable="false" src="https://devlabnet.eu/softdev/slideshow/filemanager/userfiles/1.jpg" style="height:50px; width:32px" title="" /></a></li>
				<li contenteditable="false"><a contenteditable="false" href="https://devlabnet.eu/softdev/slideshow/filemanager/userfiles/imageclick.jpg"><img alt="IMAGE_LINK_TAB: https://devlabnet.eu/softdev/slideshow/index.php" contenteditable="false" src="https://devlabnet.eu/softdev/slideshow/filemanager/userfiles/imageclick.jpg" style="height:30px; width:50px" title="Click on me to open the URL !" /></a></li>
				<li contenteditable="false"><a contenteditable="false" href="https://devlabnet.eu/softdev/slideshow/filemanager/userfiles/5740183157_baaa10cfa6.jpg"><img alt="" contenteditable="false" src="https://devlabnet.eu/softdev/slideshow/filemanager/userfiles/5740183157_baaa10cfa6.jpg" style="height:23px; width:50px" title="" /></a></li>
			</ul>
			</div>
			</div>
			</div>
			<script src="https://devlabnet.eu/softdev/slideshow/ckeditor/plugins/slideshow/3rdParty/ad-gallery/jquery.ad-gallery.min.js" type="text/javascript"></script>
			<script type="text/javascript">(function($) {$(function() {$("#ad-gallery_cke_15vji0b7_slideShow").on("click",".ad-image",function(){var imgObj =$(this).find("img");var isrc=imgObj.attr("src");var ititle=null;var idesc=null;var iname=isrc.split('/');iname=iname[iname.length-1];var imgdescid=$(this).find(".ad-image-description");if(imgdescid){ititle=$(this).find(".ad-description-title");if(ititle)ititle=ititle.text();idesc=$(this).find("span");if(idesc)idesc=idesc.text();if(idesc!=''){var url=window.location.href.trim();if (idesc.indexOf('IMAGE_LINK_TAB:') >= 0) {	idesc = idesc.substring(15).trim(); if (url != idesc) window.open(idesc,'_blank');} else if (idesc.indexOf('IMAGE_LINK_PAR:') >= 0) {	idesc = idesc.substring(15).trim(); if (url != idesc) window.open(idesc,'_self');}}}});});})(jQuery);</script>
			<script type="text/javascript">(function($) { $('head').append('<link rel="stylesheet" href="https://devlabnet.eu/softdev/slideshow/ckeditor/plugins/slideshow/3rdParty/ad-gallery/jquery.ad-gallery.css" type="text/css" />'); })(jQuery);</script>
			<script type="text/javascript">(function($) {$(function() {   var galleries = $('#ad-gallery_cke_15vji0b7_slideShow').adGallery({loader_image: 'https://devlabnet.eu/softdev/slideshow/ckeditor/plugins/slideshow/3rdParty/ad-gallery/loader.gif', width:false, height:300, start_at_index: 0, animation_speed: 2500, update_window_hash: false, effect: 'fade', slideshow: { enable: true, autostart: true, start_label: 'Start', stop_label: 'Stop', speed: 5000,},});});})(jQuery);</script>
			</div>
			</td>
		</tr>
		<tr>
			<td>
			<div class="slideshowPlugin" contenteditable="false" data-animspeedid="2000" data-autostartid="true" data-openonclickid="true" data-pictheightid="300" data-showcontrolid="true" data-showthumbid="true" data-showtitleid="true" data-slideshowid="cke_k63wsiwe_slideShow" data-speedid="3" data-transitiontypeid="resize" id="cke_k63wsiwe_slideShow">
			<div class="ad-gallery" contenteditable="false" id="ad-gallery_cke_k63wsiwe_slideShow">
			<div class="ad-image-wrapper" contenteditable="false"> </div>

<div class="ad-nav" contenteditable="false" style="display: block;">
			<div class="ad-thumbs" contenteditable="false">
			<ul class="ad-thumb-list" contenteditable="false">
				<li contenteditable="false"><a contenteditable="false" href="https://devlabnet.eu/softdev/slideshow/filemanager/userfiles/las-vegas-new-york-new-york_l.jpg"><img alt="" contenteditable="false" src="https://devlabnet.eu/softdev/slideshow/filemanager/userfiles/las-vegas-new-york-new-york_l.jpg" style="height:29.000000000000004; width:50px" title="BIG TOWERS" /></a></li>
				<li contenteditable="false"><a contenteditable="false" href="https://devlabnet.eu/softdev/slideshow/filemanager/userfiles/shrek-balloon_l.jpg"><img alt="The green Monster !!" contenteditable="false" src="https://devlabnet.eu/softdev/slideshow/filemanager/userfiles/shrek-balloon_l.jpg" style="height:50px; width:38px" title="Shreck" /></a></li>
				<li contenteditable="false"><a contenteditable="false" href="https://devlabnet.eu/softdev/slideshow/filemanager/userfiles/Untitled.jpg"><img alt="" contenteditable="false" src="https://devlabnet.eu/softdev/slideshow/filemanager/userfiles/Untitled.jpg" style="height:21px; width:50px" title="" /></a></li>
			</ul>
			</div>
			</div>
			</div>
			<script src="https://devlabnet.eu/softdev/slideshow/ckeditor/plugins/slideshow/3rdParty/ad-gallery/jquery.ad-gallery.min.js" type="text/javascript"></script>
			<script type="text/javascript">(function($) { $('head').append('<link rel="stylesheet" href="https://devlabnet.eu/softdev/slideshow/ckeditor/plugins/slideshow/3rdParty/fancybox2/jquery.fancybox.css?v=2.1.5" type="text/css" />'); })(jQuery);</script>
			<script src="https://devlabnet.eu/softdev/slideshow/ckeditor/plugins/slideshow/3rdParty/fancybox2/jquery.fancybox.pack.js?v=2.1.5" type="text/javascript"></script>
			<script type="text/javascript">(function($) {$(function() {$("#ad-gallery_cke_k63wsiwe_slideShow").on("click",".ad-image",function(){var imgObj =$(this).find("img");var isrc=imgObj.attr("src");var ititle=null;var idesc=null;var iname=isrc.split('/');iname=iname[iname.length-1];var imgdescid=$(this).find(".ad-image-description");if(imgdescid){ititle=$(this).find(".ad-description-title");if(ititle)ititle=ititle.text();if(ititle!='')ititle='<big>'+ititle+'</big>';idesc=$(this).find("span");if(idesc)idesc=idesc.text();if(idesc!=''){if(ititle!='')ititle=ititle+'<br>';idesc='<i>'+idesc+'</i>';}}$.fancybox.open({href:isrc,beforeLoad:function(){this.title=ititle+idesc;},});});});})(jQuery);</script>
			<script type="text/javascript">(function($) { $('head').append('<link rel="stylesheet" href="https://devlabnet.eu/softdev/slideshow/ckeditor/plugins/slideshow/3rdParty/ad-gallery/jquery.ad-gallery.css" type="text/css" />'); })(jQuery);</script>
			<script type="text/javascript">(function($) {$(function() {   var galleries = $('#ad-gallery_cke_k63wsiwe_slideShow').adGallery({loader_image: 'https://devlabnet.eu/softdev/slideshow/ckeditor/plugins/slideshow/3rdParty/ad-gallery/loader.gif', width:false, height:300, start_at_index: 0, animation_speed: 2000, update_window_hash: false, effect: 'resize', slideshow: { enable: true, autostart: true, start_label: 'Start', stop_label: 'Stop', speed: 3000,},});});})(jQuery);</script>
			</div>
			</td>
			<td>
			<div class="slideshowPlugin" contenteditable="false" data-animspeedid="500" data-autostartid="true" data-openonclickid="true" data-pictheightid="300" data-showcontrolid="true" data-showthumbid="true" data-showtitleid="true" data-slideshowid="cke_fwmdaown_slideShow" data-speedid="2" data-transitiontypeid="slide-vert" id="cke_fwmdaown_slideShow">
			<div class="ad-gallery" contenteditable="false" id="ad-gallery_cke_fwmdaown_slideShow">
			<div class="ad-image-wrapper" contenteditable="false"> </div>

<div class="ad-nav" contenteditable="false" style="display: block;">
			<div class="ad-thumbs" contenteditable="false">
			<ul class="ad-thumb-list" contenteditable="false">
				<li contenteditable="false"><a contenteditable="false" href="https://devlabnet.eu/softdev/slideshow/filemanager/userfiles/5740183157_baaa10cfa6.jpg"><img alt="" contenteditable="false" src="https://devlabnet.eu/softdev/slideshow/filemanager/userfiles/5740183157_baaa10cfa6.jpg" style="height:23px; width:50px" title="" /></a></li>
				<li contenteditable="false"><a contenteditable="false" href="https://devlabnet.eu/softdev/slideshow/filemanager/userfiles/rex_hill.jpg"><img alt="" contenteditable="false" src="https://devlabnet.eu/softdev/slideshow/filemanager/userfiles/rex_hill.jpg" style="height:50px; width:42px" title="" /></a></li>
				<li contenteditable="false"><a contenteditable="false" href="https://devlabnet.eu/softdev/slideshow/filemanager/userfiles/pana.jpg"><img alt="" contenteditable="false" src="https://devlabnet.eu/softdev/slideshow/filemanager/userfiles/pana.jpg" style="height:10.999999999999998; width:50px" title="" /></a></li>
			</ul>
			</div>
			</div>
			</div>
			<script src="https://devlabnet.eu/softdev/slideshow/ckeditor/plugins/slideshow/3rdParty/ad-gallery/jquery.ad-gallery.min.js" type="text/javascript"></script>
			<script type="text/javascript">(function($) { $('head').append('<link rel="stylesheet" href="https://devlabnet.eu/softdev/slideshow/ckeditor/plugins/slideshow/3rdParty/fancybox2/jquery.fancybox.css?v=2.1.5" type="text/css" />'); })(jQuery);</script>
			<script src="https://devlabnet.eu/softdev/slideshow/ckeditor/plugins/slideshow/3rdParty/fancybox2/jquery.fancybox.pack.js?v=2.1.5" type="text/javascript"></script>
			<script type="text/javascript">(function($) {$(function() {$("#ad-gallery_cke_fwmdaown_slideShow").on("click",".ad-image",function(){var imgObj =$(this).find("img");var isrc=imgObj.attr("src");var ititle=null;var idesc=null;var iname=isrc.split('/');iname=iname[iname.length-1];var imgdescid=$(this).find(".ad-image-description");if(imgdescid){ititle=$(this).find(".ad-description-title");if(ititle)ititle=ititle.text();if(ititle!='')ititle='<big>'+ititle+'</big>';idesc=$(this).find("span");if(idesc)idesc=idesc.text();if(idesc!=''){if(ititle!='')ititle=ititle+'<br>';idesc='<i>'+idesc+'</i>';}}$.fancybox.open({href:isrc,beforeLoad:function(){this.title=ititle+idesc;},});});});})(jQuery);</script>
			<script type="text/javascript">(function($) { $('head').append('<link rel="stylesheet" href="https://devlabnet.eu/softdev/slideshow/ckeditor/plugins/slideshow/3rdParty/ad-gallery/jquery.ad-gallery.css" type="text/css" />'); })(jQuery);</script>
			<script type="text/javascript">(function($) {$(function() {   var galleries = $('#ad-gallery_cke_fwmdaown_slideShow').adGallery({loader_image: 'https://devlabnet.eu/softdev/slideshow/ckeditor/plugins/slideshow/3rdParty/ad-gallery/loader.gif', width:false, height:300, start_at_index: 0, animation_speed: 500, update_window_hash: false, effect: 'slide-vert', slideshow: { enable: true, autostart: true, start_label: 'Start', stop_label: 'Stop', speed: 2000,},});});})(jQuery);</script>
			</div>
			</td>
		</tr>
	</tbody>
</table>
<p> </p>

Press here to preview

RESULT

Plugin By Cricri042