PDA

View Full Version : How to add "Lightbox" to "Simple Controls Gallery" links?



CJ Romix
12-07-2011, 12:43 PM
1) Script Title: "Simple Controls Gallery v1.4"

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/simplegallery.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 (http://www.eventmusic.ru/about.html)

jscheuer1
12-07-2011, 05:36 PM
.
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:


<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:


<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):


<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.

CJ Romix
12-07-2011, 08:07 PM
John Very BIG thnx! I try it soon and let you know about it.

CJ Romix
12-08-2011, 11:14 AM
Ok, I try it! Please see at this link (http://www.eventmusic.ru/about_new.html). 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!

jscheuer1
12-08-2011, 03:10 PM
One thing I forgot to mention is that where you have:


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:


<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:


<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:


<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>

CJ Romix
12-09-2011, 10:47 AM
John you're the best, thank you very much for your help! How can I thank you for your help, can a small reward? ;)

jscheuer1
12-09-2011, 03:34 PM
can a small reward? ;)

You're welcome! If you mean a donation:

Donate (http://home.comcast.net/~jscheuer1/side/donate.htm)

CJ Romix
01-26-2012, 02:16 PM
Hello, John!
I'm back again with some new help request from you!
Please look this link (http://www.eventmusic.ru/about_new_test.html), 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!

jscheuer1
01-27-2012, 04:00 AM
First off, you need 4 images - left, play, right, and pause. You only have three, no play image and your pause image:

http://www.eventmusic.ru/Image/s_play.gif

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:


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:


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:


. . . 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:


<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):


<td align="center" id="newcontrols"><div id="myvacation"></div> </td>

That's it.

CJ Romix
01-28-2012, 05:47 PM
Cool! It's work fine!
Thank you John! :)