easy fancybox with slideshow modification

[Eric TABBONE]

Hie!

I've just change your fancybox code in order to implement a new functionality : A slideshow (button) command with interval option.

It´s a very simpe modification and with this option, you can open an fancybox with automatic slideshow - new option: {'interval:'1000}

The 'modified jquery.fancybox' zip file contain a "ready to test" html code... (! I've change directories names !)

Regards,

Eric Tabbone

eaono...@gmail.com

-----------------------------------------------------------------------------

USAGE: 

<script type="text/javascript">

$(document).ready(function() {

$("a[rel=example_group]").fancybox({'interval':3000}); 

}

</script>

This start a slide show with all 'rel=example_group' images with a 3s interval (if interval = 0 ==> no slideshow)

Option "cyclic" is automaticaly set on 'true'; 

You can set the CSS 'diplay' option to 'none' if you wat to hide all images (except the first one). 

<a rel="example_group" href="./example/9_b.jpg" title="Lorem ipsum dolor sit amet"><img alt="" src="./example/9_s.jpg" /></a>

<a rel="example_group" href="./example/10_b.jpg" title="Lorem ipsum dolor sit amet" style="display:none" ><img alt="" src="./example/10_s.jpg" /></a>

<a rel="example_group" href="./example/11_b.jpg" title="" style="display:none" ><img alt="" src="./example/11_s.jpg" /></a>

<a rel="example_group" href="./example/12_b.jpg" title="Lorem ipsum dolor sit amet" style="display:none" ><img class="last" alt="" src="./example/12_s.jpg" /></a>

IMAGES

No image modification, only 2 more icons.

- fancy_play.png

- fancy_pause.png

MODIFICATION LIST (jquery.fancybox-1.3.4.js):

IN: ;(function($) {

var tmp, loading, overlay, wrap, outer, content, close, title, nav_left, nav_right, slide, slide_play, slide_pause, slide_start = true,

IN: _start = function() {

if (obj.nodeName && !selectedOpts.orig) {

selectedOpts.orig = $(obj).children("img:first").length ? $(obj).children("img:first") : $(obj);

}

if (currentOpts.interval>0) {

selectedOpts.cyclic = true;

}

if (title === '' && selectedOpts.orig && selectedOpts.titleFromAlt) {

title = selectedOpts.orig.attr('alt');

}

[...]

if (selectedOpts.modal) {

selectedOpts.overlayShow = true;

selectedOpts.hideOnOverlayClick = false;

selectedOpts.hideOnContentClick = false;

selectedOpts.enableEscapeButton = false;

selectedOpts.showCloseButton = false;

selectedOpts.interval = 0;

}

IN: _finish = function () {

$.fancybox.center();

if ((currentOpts.interval>0) && slide_start && (currentArray.length>1))

{

slide_start = false;

slide = setInterval($.fancybox.next, currentOpts.interval);

slide_play.hide();

slide_pause.show();

}

currentOpts.onComplete(currentArray, currentIndex, currentOpts);

IN: $.fancybox.init = function() {

title = $('<div id="fancybox-title"></div>'),

slide_play = $('<div id="fancybox-slide-play"></div>'),

slide_pause = $('<div id="fancybox-slide-pause"></div>'),

nav_left = $('<a href="javascript:;" id="fancybox-left"><span class="fancy-ico" id="fancybox-left-ico"></span></a>'),

[...]

nav_left.click(function(e) {

e.preventDefault();

$.fancybox.prev();

if(!slide_start) {

slide_pause.hide();

slide_play.show();

clearInterval(slide);

}

});

nav_right.click(function(e) {

e.preventDefault();

$.fancybox.next();

if(!slide_start) {

slide_pause.hide();

slide_play.show();

clearInterval(slide);

}

});

slide_play.click(function(e) {

e.preventDefault();

slide_play.hide();

slide_pause.show();

if(!slide_start) {

slide_start = true;

$.fancybox.next();

}

});

slide_pause.click(function(e) {

e.preventDefault();

slide_pause.hide();

slide_play.show();

if(!slide_start) {

clearInterval(slide);

}

});

IN: $.fn.fancybox.defaults = {

padding : 10,

margin : 40,

opacity : false,

modal : false,

cyclic : false,

interval : 0,

scrolling : 'auto', // 'auto', 'yes' or 'no'

CSS MODIFICATION (jquery.fancybox-1.3.4.css)

#fancybox-slide-play {

position: absolute;

top: -15px;

left: -15px;

width: 30px;

height: 30px;

background: transparent url('../img/fancy_play.png');

cursor: pointer;

z-index: 1105;

display: none;

}

#fancybox-slide-pause {

position: absolute;

top: -15px;

left: -15px;

width: 30px;

height: 30px;

background: transparent url('../img/fancy_pause.png');

cursor: pointer;

z-index: 1106;

display: none;

}

/* IE6 */

.fancybox-ie6 #fancybox-slide-play { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/fancy_play.png', sizingMethod='scale'); }   

.fancybox-ie6 #fancybox-slide-pause { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/fancy_pause.png', sizingMethod='scale'); }

[JFK]

it would be nice if you post a working example

On May 13, 11:40 am, Eric TABBONE <eaonobra...@gmail.com> wrote:
> Hie!
>
> I've just change your fancybox code in order to implement a
> new functionality : A slideshow (button) command with interval option.
> It´s a very simpe modification and with this option, you can open an
> fancybox with automatic slideshow - new option: {'interval:'1000}
> The 'modified jquery.fancybox' zip file contain a "ready to test" html
> code... (! I've change directories names !)
>
> Regards,
>
> Eric Tabbone

> eaonobra...@gmail.com
>
> -----------------------------------------------------------------------------
>
> *USAGE*:

>
> <script type="text/javascript">
> $(document).ready(function() {
>  $("a[rel=example_group]").fancybox({'interval':3000});
>  }
> </script>
>
> This start a slide show with all 'rel=example_group' images with a 3s
> interval (if interval = 0 ==> no slideshow)
> Option "cyclic" is automaticaly set on 'true';
>
> You can set the CSS 'diplay' option to 'none' if you wat to hide all images
> (except the first one).
> <a rel="example_group" href="./example/9_b.jpg" title="Lorem ipsum dolor sit
> amet"><img alt="" src="./example/9_s.jpg" /></a>
> <a rel="example_group" href="./example/10_b.jpg" title="Lorem ipsum dolor
> sit amet" style="display:none" ><img alt="" src="./example/10_s.jpg" /></a>
> <a rel="example_group" href="./example/11_b.jpg" title=""
> style="display:none" ><img alt="" src="./example/11_s.jpg" /></a>
> <a rel="example_group" href="./example/12_b.jpg" title="Lorem ipsum dolor
> sit amet" style="display:none" ><img class="last" alt=""
> src="./example/12_s.jpg" /></a>
>

> *IMAGES*

>
> No image modification, only 2 more icons.
> - fancy_play.png
> - fancy_pause.png
>

> *
> *
> *MODIFICATION LIST* (jquery.fancybox-1.3.4.js):

> *CSS MODIFICATION *(jquery.fancybox-1.3.4.css)

>
> #fancybox-slide-play {
>  position: absolute;
> top: -15px;
> left: -15px;
>  width: 30px;
> height: 30px;

> background: transparent url('*../img*/fancy_play.png');

>  cursor: pointer;
> z-index: 1105;
> display: none;
>
> }
>
> #fancybox-slide-pause {
> position: absolute;
> top: -15px;
>  left: -15px;
> width: 30px;
> height: 30px;

>  background: transparent url(*'../img*/fancy_pause.png');

> cursor: pointer;
>  z-index: 1106;
> display: none;
>
> }
>
> /* IE6 */
> .fancybox-ie6 #fancybox-slide-play { background: transparent; filter:

> progid:DXImageTransform.Microsoft.AlphaImageLoader(src='*img*/fancy_play.png',

> sizingMethod='scale'); }
> .fancybox-ie6 #fancybox-slide-pause { background: transparent; filter:

> progid:DXImageTransform.Microsoft.AlphaImageLoader(src='*img*/fancy_pause.png',
> sizingMethod='scale'); }
>
>  fancy_pause.png
> 1KViewDownload
>
>  fancy_play.png
> 1KViewDownload
>
>  jquery.fancybox-1.3.4.js
> 40KViewDownload
>
>  modified jquery.fancybox.zip
> 848KViewDownload
>
>  jquery.fancybox-1.3.4.css
> 12KViewDownload
>
>  jquery.fancybox-1.3.4.pack.js
> 17KViewDownload

[eaonobrasil]

you can fine a working demo here

http://eaodemo.host-ed.net/fancybox/
eao

> > progid:DXImageTransform.Microsoft.AlphaImageLoader(src='*img*/fancy_play.pn g',

> > sizingMethod='scale'); }
> > .fancybox-ie6 #fancybox-slide-pause { background: transparent; filter:

> > progid:DXImageTransform.Microsoft.AlphaImageLoader(src='*img*/fancy_pause.p ng',

[JFK]

nice, thanks

[RavanH]

Nice!

If this thread was a ballot box, I'd vote for this feature in the main
version right here ;)

[Eric TABBONE]

Just one more change 

IN: function _cleanup() {

[...]

if(!slide_start) {

clearInterval(slide);

slide_start = true;

}

busy = false;

}

Like this, when you stop the slideshow and close the fancybox, when you open it again, it will restart the slideshow. The "cleanInterval" is needed if you have multi fancybox slideshow or if you re-open a slideshow.

If you want the slideshow icon on a modal window, you must change the _start function by deleting the "electedOpts.interval = 0;" line

IN: if (selectedOpts.modal) {

selectedOpts.overlayShow = true;

selectedOpts.hideOnOverlayClick = false;

selectedOpts.hideOnContentClick = false;

selectedOpts.enableEscapeButton = false;

selectedOpts.showCloseButton = false;

// selectedOpts.interval = 0;

}

 

demo page has been updated with the "new version" http://eaodemo.host-ed.net/fancybox/.

Eric

2011/5/13 eaonobrasil <eaono...@gmail.com>

--
You received this message because you are subscribed to the Google Groups "fancybox" group.
To post to this group, send email to fanc...@googlegroups.com.
To unsubscribe from this group, send email to fancybox+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/fancybox?hl=en.

[Halva]

Hello

how can i set paused as default ??

[Halva]

hello,
i have vorgot a question

can you tel me how insert all rel with the same name as thumbnail navigation in fancybox 1.34  lokk like fancybox 2 or better prettyphoto

but my firts is slidshow pause at start

[DoreB]

Erin,

Very nicely done.  I am a finishing up bachelors degree student and was able to figure out how to implement this in my page.  I used this to create a slideshow for my portfolio for school.  One thing I could not figure out, was how to make the slide show only go through one set of images and stop. 

My portfolio site is here:   www.dbdesignloft.com/portfolio. 

The problem is that the slide show keeps on going and runs through all the images in all categories.  I tried to put the images in separate folders (example, example2 and example3) but that did not work.

Can you help me get the show to stop at the end of each set?  

Dorene

[RavanH]

Hi Doreen,

You are using the same rel="example_group" attribute for all images. This is what makes FancyBox decide to put them all in the same gallery, no what directory the images are stored. Change these rel attributes to something different for each gallery.

RA

Op donderdag 5 juli 2012 03:36:19 UTC+2 schreef DoreB het volgende:

Erin,

Very nicely done.  I am a finishing up bachelors degree student and was able to figure out how to implement this in my page.  I used this to create a slideshow for my portfolio for school.  One thing I could not figure out, was how to make the slide show only go through one set of images and stop. 

My portfolio site is here:   www.dbdesignloft.com/portfolio. 

The problem is that the slide show keeps on going and runs through all the images in all categories.  I tried to put the images in separate folders (example, example2 and example3) but that did not work.

Can you help me get the show to stop at the end of each set?  

Dorene

On Friday, May 13, 2011 1:40:48 PM UTC-5, eaonobrasil wrote:

Hie!

I've just change your fancybox code in order to implement a new functionality : A slideshow (button) command with interval option.

It´s a very simpe modification and with this option, you can open an fancybox with automatic slideshow - new option: {'interval:'1000}

The 'modified jquery.fancybox' zip file contain a "ready to test" html code... (! I've change directories names !)

Regards,

Eric Tabbone

[frank]

Hello Eric,

I've made some modifications on your script for the slideshow. I needed to get 1 slide and 2 other instances of fancybox on the same page but when i opened the normal fancybox after the slide show. It started again so here are my changes.

// Note: within an iframe use - parent.$.fancybox.close();

$.fancybox.close = function() {

//Make sure there is no slide animation when closing the fancybox

clearInterval(slide);

//Hiding pause button

slide_pause.hide();

Hopefully you can use these changes

Op vrijdag 13 mei 2011 20:40:48 UTC+2 schreef eaonobrasil het volgende:

Hie!

I've just change your fancybox code in order to implement a new functionality : A slideshow (button) command with interval option.

It´s a very simpe modification and with this option, you can open an fancybox with automatic slideshow - new option: {'interval:'1000}

The 'modified jquery.fancybox' zip file contain a "ready to test" html code... (! I've change directories names !)

Regards,

Eric Tabbone