Results 1 to 10 of 10

Thread: How to add "Lightbox" to "Simple Controls Gallery" links?

  1. #1
    Join Date
    Dec 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default How to add "Lightbox" to "Simple Controls Gallery" links?

    1) Script Title: "Simple Controls Gallery v1.4"

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...plegallery.htm

    3) Describe problem: How to add "Lightbox Image Viewer 2.03a" to "Simple Controls Gallery v1.4" links?

    Now when I click on the picture, opens a new window of browser with a full sized photos. Is it possible to add a link (rel="lightbox") to the code that would be opened gallery with lightbox script? If it is not possible, tell me please another script with slideshow.
    Thank you!

    You can watch my site with Simple Controls Gallery v1.4

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    .
    Before you do anything, back up the page in case it becomes unusable.


    Lightbox isn't compatible with jQuery. I like Fancybox for this:

    http://fancybox.net/

    Download Version: 1.3.4 from that page (version 2 is available, but it's not free). Put the fancybox folder (the whole folder, not just its contents) from that archive in the same folder as the page and install the head files on the page (for this you only need the fancybox script and styles, but the helper images must be present in the fancybox folder). Update the jQuery version to 1.7 (1.6.0 is a little buggy). So this:

    Code:
    <title>Chill Out Event</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
    will now look like this:

    Code:
    <title>Chill Out Event</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    <link href="fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    Then in your on page call to Simple Gallery, add the highlighted (scroll the code block to see all the additions or simply copy and paste it over your own):

    Code:
    <script type="text/javascript">
    
    var vacationtext=[
    "Команда Chill Out Event стала победителем регаты Ocean Medi Cup 2011",
    "Гала показ мехового дома NAFA",
    "Инаугурация губернатора Тульской области",
    "Форум Селигер 2011",
    "Празднование 35 летия центра образования 109 в Крокус Сите Холле",
    "Организация визита вице-президента США Джозефа Байдена"
    ]
    var mygallery=new simpleGallery({
    	wrapperid: "simplegallery1", //ID of gallery DIV container,
    	dimensions: [260, 205], //width/height of gallery in pixels. Should reflect dimensions of the images exactly!
    	imagearray: [
    		["Photos/06_sm.jpg", "Photos/06.jpg", "_new", ""],
    		["Photos/05_sm.jpg", "Photos/05.jpg", "_new", ""],
    		["Photos/04_sm.jpg", "Photos/04.jpg", "_new", ""],
    		["Photos/03_sm.jpg", "Photos/03.jpg", "_new", ""],
    		["Photos/02_sm.jpg", "Photos/02.jpg", "_new", ""],
    		["Photos/01_sm.jpg", "Photos/01.jpg", "_new", ""]
    	],
    	autoplay: [false, 3500, 3], //[auto play: delay slides in millisec, cycles before stopping]
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 800, //transition duration (milliseconds)
    	oninit:function(){ //event that fires when gallery has initialized/ ready to run
    		//Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
    		$.each(this.setting.imagearray, function(){
    			$(new Image()).attr('src', this[1]);
    		});
    	},
    	onslide:function(curslide, i){ //event that fires after each slide is shown
    	document.getElementById("myvacation").innerHTML=vacationtext[i]
    		//Keyword "this": references current gallery instance
    		//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)
    	}
    })
    
    $('#simplegallery1 .gallerylayer a').live('click', function(e){
    	e.preventDefault();
    	$.fancybox({
    		href: this.href,
    		title: vacationtext[mygallery.setting.curimage],
    		onComplete: function(){
    			mygallery.showhidenavpanel('hide');
    		}
    	});
    });
    </script>
    Tested and working here in a local mock up.

    Any problems or questions, let me know.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Dec 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    John Very BIG thnx! I try it soon and let you know about it.

  4. #4
    Join Date
    Dec 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Ok, I try it! Please see at this link. But I would like to Fancybox would be able to view all images are registered in the page with control buttons. And yet it is desirable that would be a slide show like a "Simple Gallery" script
    While I can not understand how to configure Fancybox that would change 'descriptions' position used photos of the so that it is within the window (not external "banner").
    John, Please help me ))
    Thank you!

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    One thing I forgot to mention is that where you have:

    Code:
    	imagearray: [
    		["Photos/06_sm.jpg", "Photos/066.jpg", "_new", ""],
    		["Photos/05_sm.jpg", "Photos/055.jpg", "_new", ""],
    		["Photos/04_sm.jpg", "Photos/044.jpg", "_new", ""],
    		["Photos/033_sm.jpg", "Photos/033.jpg", "_new", ""],
    		["Photos/02_sm.jpg", "Photos/022.jpg", "_new", ""],
    		["Photos/01_sm.jpg", "Photos/011.jpg", "_new", ""],
    	],
    That last comma (red) inside the imagearray doesn't belong there. It will cause the script to break in IE 8 and less. Remove it.



    OK. Remember to back up what you have, just in case. Try this variation, copy it over the existing on page call. The tags in the head remain the same:

    Code:
    <script type="text/javascript">
    
    var vacationtext=[
    "Команда Chill Out Event стала победителем регаты Ocean Medi Cup 2011",
    "Гала показ мехового дома NAFA",
    "Инаугурация губернатора Тульской области",
    "Форум Селигер 2011",
    "Празднование 35 летия центра образования 109 в Крокус Сите Холле",
    "Организация визита вице-президента США Джозефа Байдена"
    ]
    $(window).load(function(){simpleGallery.window = true;}); // create reference, is window loaded?
    var mygallery=new simpleGallery({
    	wrapperid: "simplegallery1", //ID of gallery DIV container,
    	dimensions: [260, 205], //width/height of gallery in pixels. Should reflect dimensions of the images exactly!
    	imagearray: [
    		["Photos/06_sm.jpg", "Photos/06.jpg", "_new", ""],
    		["Photos/05_sm.jpg", "Photos/05.jpg", "_new", ""],
    		["Photos/04_sm.jpg", "Photos/04.jpg", "_new", ""],
    		["Photos/03_sm.jpg", "Photos/03.jpg", "_new", ""],
    		["Photos/02_sm.jpg", "Photos/02.jpg", "_new", ""],
    		["Photos/01_sm.jpg", "Photos/01.jpg", "_new", ""]
    	],
    	autoplay: [false, 3500, 3], //[auto play: delay slides in millisec, cycles before stopping]
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 800, //transition duration (milliseconds)
    	oninit:function(){ //event that fires when gallery has initialized/ ready to run
    		//Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
    		var gal = this, s = gal.setting, $n = $(s.navbuttons), $p = $n.eq(1), il = s.imagearray.length,
    			$fbdiv = $('<div></div>').css({display: 'none'}).appendTo($('body')), $fblinks, $fbnav;
    		$.each(s.imagearray, function(i){
    			if(simpleGallery.window){ // preload larger images
    				$(new Image()).attr('src', this[1]);
    			} else {
    				var src = this[1];
    				$(window).load(function(){$(new Image()).attr('src', src);});
    			}
    			$fbdiv.append($('<a href="' + this[1] + '" title="изображение ' + (i + 1) + ' из ' + il +
    				'\u00a0 \u00a0 \u2013 \u00a0 \u00a0' + vacationtext[i] + '" rel="gallery"></a>')); // create proxy links
    		});
    		$fblinks = $fbdiv.find('a').fancybox({ // bind fancybox to the proxy links
    			margin: 100,
    			cyclic: true,
    			titlePosition: 'inside',
    			onComplete: function(){
    				gal.showhidenavpanel('hide');
    				$(document).unbind('keydown.fb');
    				$fbnav = $('#fancybox-left, #fancybox-right').unbind('click.fbsg').bind('click.fbsg', function(){
    					$n.eq(this.id === 'fancybox-left'? 0 : 2).click();
    				});
    			},
    			onCleanUp : function(){$fbnav.unbind('click.fbsg');}
    		});
    		s.$wrapperdiv.find('.gallerylayer a').live('click', function(e){
    			e.preventDefault();
    			if (!s.ispaused) {$p.click();} // if gallery playing, pause it by simulating a click on the pause button
    			$fblinks.eq(s.curimage).click(); // activate fancybox
    		});
    		$('#fancybox-content img').live('mouseenter', function(){this.title = '';});
    	},
    	onslide:function(curslide, i){ //event that fires after each slide is shown
    	document.getElementById("myvacation").innerHTML=vacationtext[i]
    		//Keyword "this": references current gallery instance
    		//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>
    That's it for that one.




    OR Here's another variation. Don't try to do both on the same page - this one requires styles added to the head as shown:

    Code:
    <link href="style.css" rel="stylesheet" type="text/css">
    <link href="fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css">
    <style type="text/css">
    
    #fancybox-left, #fancybox-right {
    	top: 0px;
    	visibility: hidden;
    }
    
    #fancybox-left-ico, #fancybox-right-ico {
    	margin-top: 0;
    }
    
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <script type="text/javascript" src="fancybox/jquery.easing-1.3.pack.js"></script>
    <script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
    And this on page call:

    Code:
    <script type="text/javascript">
    
    var vacationtext=[
    "Команда Chill Out Event стала победителем регаты Ocean Medi Cup 2011",
    "Гала показ мехового дома NAFA",
    "Инаугурация губернатора Тульской области",
    "Форум Селигер 2011",
    "Празднование 35 летия центра образования 109 в Крокус Сите Холле",
    "Организация визита вице-президента США Джозефа Байдена"
    ]
    $(window).load(function(){simpleGallery.window = true;}); // create reference, is window loaded?
    var mygallery=new simpleGallery({
    	wrapperid: "simplegallery1", //ID of gallery DIV container,
    	dimensions: [260, 205], //width/height of gallery in pixels. Should reflect dimensions of the images exactly!
    	imagearray: [
    		["Photos/06_sm.jpg", "Photos/06.jpg", "_new", ""],
    		["Photos/05_sm.jpg", "Photos/05.jpg", "_new", ""],
    		["Photos/04_sm.jpg", "Photos/04.jpg", "_new", ""],
    		["Photos/03_sm.jpg", "Photos/03.jpg", "_new", ""],
    		["Photos/02_sm.jpg", "Photos/02.jpg", "_new", ""],
    		["Photos/01_sm.jpg", "Photos/01.jpg", "_new", ""]
    	],
    	autoplay: [false, 3500, 3], //[auto play: delay slides in millisec, cycles before stopping]
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 800, //transition duration (milliseconds)
    	oninit:function(){ //event that fires when gallery has initialized/ ready to run
    		//Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
    		var gal = this, s = gal.setting, $n = $(s.navbuttons), $p = $n.eq(1), il = s.imagearray.length,
    			$fbdiv = $('<div></div>').css({display: 'none'}).appendTo($('body')), $fblinks, $fbnav;
    		$.each(s.imagearray, function(i){
    			if(simpleGallery.window){ // preload larger images
    				$(new Image()).attr('src', this[1]);
    			} else {
    				var src = this[1];
    				$(window).load(function(){$(new Image()).attr('src', src);});
    			}
    			$fbdiv.append($('<a href="' + this[1] + '" title="изображение ' + (i + 1) + ' из ' + il +
    				'\u00a0 \u00a0 \u2013 \u00a0 \u00a0' + vacationtext[i] + '" rel="gallery"></a>')); // create proxy links
    		});
    		$fblinks = $fbdiv.find('a').fancybox({ // bind fancybox to the proxy links
    			margin: 100,
    			cyclic: true,
    			titlePosition: 'inside',
    			titleFormat: function(title, currentArray, currentIndex, currentOpts) {
    				var newclose = $('#fancybox-close').css({visibility: 'hidden'}).clone(true).attr('title', 'Закрой');
    				return $('<span id="fancybox-title-inside" style="display: block; text-align: left; position: relative;">' +
    				'<span style="display: block; margin-right: 40px;">' +
    				(title.length? title : '') + '<\/span><\/span>').prepend(newclose.css({visibility: 'visible',
    				right: 0, top: '50%', marginTop: -15}).fadeIn('slow', function(){this.style.display = 'block';
    				$('#fancybox-left, #fancybox-right').css({visibility: 'visible', height : $('#fancybox-content').innerHeight()})
    				.attr('title', 'Предыдущий').eq(1).attr('title', 'Следующая');
    				$('#fancybox-content img').attr('title', '');})	);
    			},
    			onComplete: function(){
    				gal.showhidenavpanel('hide');
    				$(document).unbind('keydown.fb');
    				$fbnav = $('#fancybox-left, #fancybox-right').unbind('click.fbsg').bind('click.fbsg', function(){
    					$n.eq(this.id === 'fancybox-left'? 0 : 2).click();
    				});
    			},
    			onCleanUp : function(){$fbnav.unbind('click.fbsg');}
    		});
    		s.$wrapperdiv.find('.gallerylayer a').live('click', function(e){
    			e.preventDefault();
    			if (!s.ispaused) {$p.click();} // if gallery playing, pause it by simulating a click on the pause button
    			$fblinks.eq(s.curimage).click(); // activate fancybox
    		});
    	},
    	onslide:function(curslide, i){ //event that fires after each slide is shown
    	document.getElementById("myvacation").innerHTML=vacationtext[i]
    		//Keyword "this": references current gallery instance
    		//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>
    Last edited by jscheuer1; 12-08-2011 at 05:28 PM. Reason: add another choice
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Dec 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    John you're the best, thank you very much for your help! How can I thank you for your help, can a small reward?

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by CJ Romix View Post
    can a small reward?
    You're welcome! If you mean a donation:

    Donate
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Dec 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hello, John!
    I'm back again with some new help request from you!
    Please look this link, I need to add 3 control buttons (back/pause/forward) instead of controls in script and remove popup conrols on mouse over.
    Please change the script.
    Thank you!

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    First off, you need 4 images - left, play, right, and pause. You only have three, no play image and your pause image:



    is called s_play.gif. We can use that as the pause image, and use the s_right.gif image as the play image for now. You will probably want to fix that up though.

    OK, in the simplegallery.js at the beginning where it has:

    Code:
    var simpleGallery_navpanel={
    	loadinggif: 'ajaxload.gif', //full path or URL to loading gif image
    	panel: {height:'45px', opacity:0.5, paddingTop:'5px', fontStyle:'bold 11px Verdana'}, //customize nav panel container
    	images: [ 'left.gif', 'play.gif', 'right.gif', 'pause.gif'], //nav panel images (in that order)
    	imageSpacing: {offsetTop:[-4, 0, -4], spacing:10}, //top offset of left, play, and right images, PLUS spacing between the 3 images
    	slideduration: 500 //duration of slide up animation to reveal panel
    }
    Replace all of that with:

    Code:
    simpleGallery_navpanel={
    	loadinggif: 'ajaxload.gif', //full path or URL to loading gif image
    	panel: {height:'45px', opacity:0.5, paddingTop:'5px', fontStyle:'bold 11px Verdana'}, //customize nav panel container
    	images: [ 'Image/s_left.gif', 'Image/s_right.gif', 'Image/s_right.gif', 'Image/s_play.gif'], //nav panel images
    			//left		//play			//right			//pause
    	imageSpacing: {offsetTop:[-4, -4, -4], spacing:10}, //top offset of left, play, and right images, PLUS spacing between the 3 images
    	slideduration: 500 //duration of slide up animation to reveal panel
    }
    Then in the oninit function on the page, add the two highlighted lines:

    Code:
     . . . tos/011.jpg", "_new", ""]
    	],
    	autoplay: [false, 4500, 3], //[auto play: delay slides in millisec, cycles before stopping]
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 50, //transition duration (milliseconds)
    	oninit:function(){ //event that fires when gallery has initialized/ ready to run
    		//Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
    		var gal = this, s = gal.setting, $n = $(s.navbuttons), $p = $n.eq(1), il = s.imagearray.length,
    			$fbdiv = $('<div></div>').css({display: 'none'}).appendTo($('body')), $fblinks, $fbnav;
    		$('.navpanelfg').prependTo('#newcontrols').css({position: 'static'});
    		$('.navpanellayer, .gallerystatus').remove();
    		$.each(s.imagearray, function(i){
    			if(simpleGallery.window){ // preload larger images
    				$(new Image()).at . . .
    And then, where you currently have your control images:

    Code:
    <td align="center"><img src="Image/s_left.gif" width="20" height="20" />&nbsp;&nbsp;<img src="Image/s_play.gif" width="20" height="20" />&nbsp;&nbsp;<img src="Image/s_right.gif" width="20" height="20" /><br /><div id="myvacation"></div> </td>
    Change that to just (be sure to add the highlighted id though):

    Code:
    <td align="center" id="newcontrols"><div id="myvacation"></div> </td>
    That's it.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #10
    Join Date
    Dec 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    Cool! It's work fine!
    Thank you John!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •