Account Options

  1. Sign in
The old Google Groups will be going away soon.
Switch to the new Google Groups.
Google Groups Home
« Groups Home
fancybox
Home
+ new post
About this group
Join this group
easy fancybox with slideshow modification
Options
There are currently too many topics in this group that display first. To make this topic appear first, remove this option from another topic.
There was an error processing your request. Please try again.
flag
   8 messages - Collapse all  -  Translate all to Translated (View all originals)
The group you are posting to is a Usenet group. Messages posted to this group will make your email address visible to anyone on the Internet.
Your reply message has not been sent.
Your post was successful
 
From:
To:
Cc:
Followup To:
Add Cc | Add Followup-to | Edit Subject
Subject:
Validation:
For verification purposes please type the characters you see in the picture below or the numbers you hear by clicking the accessibility icon. Listen and type the numbers you hear
 
Eric TABBONE  
View profile  
 More options May 13 2011, 2:40 pm
From: Eric TABBONE <eaonobra...@gmail.com>
Date: Fri, 13 May 2011 15:40:48 -0300
Local: Fri, May 13 2011 2:40 pm
Subject: easy fancybox with slideshow modification
Print | Individual message | Show original | Report this message | Find messages by this author

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

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.pn g',
sizingMethod='scale'); }
.fancybox-ie6 #fancybox-slide-pause { background: transparent; filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src='*img*/fancy_pause.p ng',
sizingMethod='scale'); }

  fancy_pause.png
1K Download

  fancy_play.png
1K Download

  jquery.fancybox-1.3.4.js
40K Download

  modified jquery.fancybox.zip
848K Download

  jquery.fancybox-1.3.4.css
12K Download

  jquery.fancybox-1.3.4.pack.js
17K Download

 
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
JFK  
View profile  
 More options May 13 2011, 2:48 pm
From: JFK <jfk.d...@gmail.com>
Date: Fri, 13 May 2011 11:48:22 -0700 (PDT)
Local: Fri, May 13 2011 2:48 pm
Subject: Re: easy fancybox with slideshow modification
Print | Individual message | Show original | Report this message | Find messages by this author
it would be nice if you post a working example

On May 13, 11:40 am, Eric TABBONE <eaonobra...@gmail.com> wrote:


 
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
eaonobrasil  
View profile  
 More options May 13 2011, 3:47 pm
From: eaonobrasil <eaonobra...@gmail.com>
Date: Fri, 13 May 2011 12:47:00 -0700 (PDT)
Subject: Re: easy fancybox with slideshow modification
Print | Individual message | Show original | Report this message | Find messages by this author
you can fine a working demo here

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

On May 13, 3:48 pm, JFK <jfk.d...@gmail.com> wrote:


 
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
JFK  
View profile  
 More options May 13 2011, 5:29 pm
From: JFK <jfk.d...@gmail.com>
Date: Fri, 13 May 2011 14:29:28 -0700 (PDT)
Local: Fri, May 13 2011 5:29 pm
Subject: Re: easy fancybox with slideshow modification
Print | Individual message | Show original | Report this message | Find messages by this author
nice, thanks

On May 13, 12:47 pm, eaonobrasil <eaonobra...@gmail.com> wrote:


 
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
RavanH  
View profile  
 More options May 13 2011, 8:14 pm
From: RavanH <ravanha...@gmail.com>
Date: Fri, 13 May 2011 17:14:55 -0700 (PDT)
Local: Fri, May 13 2011 8:14 pm
Subject: Re: easy fancybox with slideshow modification
Print | Individual message | Show original | Report this message | Find messages by this author
Nice!

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

On 13 mei, 21:47, eaonobrasil <eaonobra...@gmail.com> wrote:


 
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
Eric TABBONE  
View profile  
 More options May 14 2011, 12:26 pm
From: Eric TABBONE <eaonobra...@gmail.com>
Date: Sat, 14 May 2011 13:26:10 -0300
Local: Sat, May 14 2011 12:26 pm
Subject: Re: easy fancybox with slideshow modification
Print | Individual message | Show original | Report this message | Find messages by this author

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 <eaonobra...@gmail.com>

  modified jquery.fancybox v2.zip
910K Download

 
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
Halva  
View profile  
 More options Jan 4, 11:24 am
From: Halva <hup...@googlemail.com>
Date: Wed, 4 Jan 2012 08:24:51 -0800 (PST)
Local: Wed, Jan 4 2012 11:24 am
Subject: Re: easy fancybox with slideshow modification
Print | Individual message | Show original | Report this message | Find messages by this author

Hello

how can i set paused as default ??


 
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
Halva  
View profile  
 More options Jan 4, 1:11 pm
From: Halva <hup...@googlemail.com>
Date: Wed, 4 Jan 2012 10:11:10 -0800 (PST)
Local: Wed, Jan 4 2012 1:11 pm
Subject: Re: easy fancybox with slideshow modification
Print | Individual message | Show original | Report this message | Find messages by this author

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


 
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
End of messages
« Back to Discussions « Newer topic     Older topic »

Create a group - Google Groups - Google Home - Terms of Service - Privacy Policy
©2012 Google