Add the CrossSlide plugin
davebv - August 15, 2008 - 12:00
| Project: | jQuery plugins |
| Version: | 6.x-1.10 |
| Component: | Code |
| Category: | support request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | needs review |
Description
Useful for pics transitions
http://plugins.jquery.com/project/CrossSlide
http://www.gruppo4.com/~tobia/cross-slide.shtml
Thanks for tye attention
#1
I think there might be a problem with hosting this on cvs.drupal.org, which has a "GPL 2 or later"-only policy whereas this plugin is released under GPL 3 or later. However, you could request permission from the author to release it under GPL 2 or later.
#2
I contacted the autor of the plugin and asked me there were no problem to release it with GPL2 or later, and so he did.
http://www.gruppo4.com/~tobia/files/jquery.cross-slide.js
Now it has the GPL v2 or later header.
Will this plugin be included in this module?
Thank you so much!
#3
I modified myself the file jquery_plugin.jq.inc to add this plugin:
Just added
<?php'crossslide' => array(
'name' => t('Cross Slide'),
'description' => t('CrossSlide is a jQuery plugin that implements in Javascript some common slide-show animations, traditionally only available to the web developer via Adobe Flash™ or other proprietary plugins. CrossSlide builds upon jQuery\'s animation facility, so it is as portable across browsers as jQuery itself (a lot.)'),
'version' => '0.1',
'url' => 'http://plugins.jquery.com/project/CrossSlide',
'files' => array(
'js' => array(
$path .'/jquery.cross-slide.js',
),
'css' => NULL,
),
'invocation' => NULL,
),
?>
And copied the http://www.gruppo4.com/~tobia/files/jquery.cross-slide.js file into sites/all/modules/jquery_plugin/
#4
I attach a patch for jquery_plugin.jq.inc
#5
Hi!
As you did not answered... I do not know if what I did was correct and if the license now is in the correct version. Can you confirm that? Thank you!
#6
With the GPL 2 license it should be ok to add it here, soon as I have a chance.
#7
Actually I did find a problem. I run the plugins thru the YUI Compressor to "minify" them -- http://www.julienlecomte.net/yuicompressor/
This plugin is not able to be minified due to syntax errors. Could you contact the author and ask them to fix these issues?
java -jar yuicompressor-2.3.6.jar -v jquery.cross-slide.js > jquery.cross-slide.min.js
[INFO] Using charset UTF-8
[ERROR] 18:4028:unterminated string literal
[ERROR] 18:4028:syntax error
[ERROR] 19:21:syntax error
[ERROR] 19:21:illegal character
[ERROR] 19:27:syntax error
[ERROR] 20:15:missing : after property id
[ERROR] 20:45:illegal character
[ERROR] 20:51:syntax error
[ERROR] 21:42:missing : after property id
[ERROR] 21:72:illegal character
[ERROR] 21:78:syntax error
[ERROR] 21:130:illegal character
[ERROR] 21:136:syntax error
[ERROR] 22:22:missing : after property id
[ERROR] 23:20:missing : after property id
[ERROR] 23:50:illegal character
[ERROR] 23:56:syntax error
[ERROR] 23:352:unterminated string literal
[ERROR] 23:352:missing } in compound statement
[ERROR] 23:352:missing } in compound statement
[ERROR] 23:352:missing } in compound statement
[ERROR] 23:352:missing } after function body
[ERROR] 23:352:missing } after function body
[ERROR] 23:352:missing } after function body
[ERROR] 1:0:Compilation produced 24 syntax errors.
org.mozilla.javascript.EvaluatorException: Compilation produced 24 syntax errors.
at com.yahoo.platform.yui.compressor.YUICompressor$1.runtimeError(YUICompressor.java:143)
at org.mozilla.javascript.Parser.parse(Parser.java:391)
at org.mozilla.javascript.Parser.parse(Parser.java:336)
at com.yahoo.platform.yui.compressor.JavaScriptCompressor.parse(JavaScriptCompressor.java:312)
at com.yahoo.platform.yui.compressor.JavaScriptCompressor.(JavaScriptCompressor.java:532)
at com.yahoo.platform.yui.compressor.YUICompressor.main(YUICompressor.java:120)
#8
that's strange, I conntacted the author and he got no errors. I checked myself and I just get warnings. Maybe the file you are using is corrupted?
#9
You got no errors when using YUI compressor -- http://www.julienlecomte.net/yuicompressor/ ?
#10
OK figured it out. some java issue on my side.
#11
Nevermind, the outputted js has syntax problems and causes errors in the browser! So it seems there is still a problem with YUI Compressor compatibility.
#12
I do not know but I have no errors at all. The minified works OK. I even modified the original one a little bit and now I do not get any error, nor warning in the minifying process, by executing java -jar yuicompressor-2.3.6.jar -v jquery.cross-slide.js > jquery.cross-slide.min.js.
I double checked with firebug, everything works fine.
I attach both files.
#13
OK the version of cross-slide you have is quite different from that at http://www.gruppo4.com/~tobia/files/jquery.cross-slide.js (~12KB unified diff). If you minify the gruppo4.com version on the other hand, you should get firebug errors? You might want to contribute a patch upstream :)
#14
Let me know if the author will make some modifications for YUI compressor compatibility. Otherwise we could add the modified version here.
#15
He's answered my emails quickly but last one I sent some days ago about my modification didn't get answer. Maybe you can add the modified version for now, and see if the author makes the changes any time soon?
#16
Can you add my modified version? The author is not modifying his version. Thanks!
#17
Could you re-roll your modified cross-slide? There was an updated version posted on Sept 18th.
#18
First of all, kudos on the patch it worked beautifully for me. The cross slide plugin shows up in my jq Plugin Administration and all. I've uploaded the plugin jquery.cross-slide.js to the jquery_plugin directory.
Now to the issue at hand. I might just be missing something completely, but when I added the following code into a block nothing happened:
<script type="text/javascript">jq_add('crossslide');
$(function() {
$('#image-rotator').crossSlide({
sleep: 2, //in sec
fade: 1 //in sec
}, [
{ src: '/sites/all/themes/NSF/images/homepage/1.jpg' },
{ src: '/sites/all/themes/NSF/images/homepage/2.jpg' },
{ src: '/sites/all/themes/NSF/images/homepage/3.jpg' },
{ src: '/sites/all/themes/NSF/images/homepage/4.jpg' }
]);
});
</script>
<div id="image-rotator" class="image-rotator">
Loading...
</div>
Am I doing something wrong here?
#19
I am not so sure, but I think "jq_add()" is a php function, not a js function.
If you are interested in using the cross-slide plugin in a easier way (just choosing the folder in which you have the pictures you want to display in the slideshow), you have the module http://drupal.org/project/slideshowcs
This module provides a drupal interface for the cross-slide jquery plugin (for configuring blocks, and all its parameters). Just install the module and you're ready to go.
You can try a demo here: http://sandbox.davebv.es
#20
Here's a patch and jquery.cross-slide.min.js from the lastest version (0.3.7 @ 2009-05-14). Running YUI compressor still gives warnings, I've mailed the author about them.
#21
Hi, Hope all is well. I am also trying to use the jquery cross-slide. The Ken Burns Effect. http://www.gruppo4.com/~tobia/cross-slide.shtml
I have so far uploaded jquery.cross-slide.js and jquery.cross-slide.js into a folder called images/slideshow which also has all the images i want to use.
On my index.php page this is the code i am inputting:
<div id="indexDefaultMainContent" class="content"><script src="images/slideshow/jquery.cross-slide.js" type="text/javascript"></script>
<style type="text/css">
#test3 {
margin: 0 auto;
border: 0px solid #555;
width: 575px;
height: 325px;
}
</style>
<script type="text/javascript">
$(function() {
$('#test3').crossSlide({
fade: 1
}, [
{
src: 'http://www.islamicgems.com/images/slideshow/pic1.jpg',
href: 'http://islamicgems.com/index.php?cPath=1_51',
from: '0% 0% 1x',
to: '0% 80% 1.2x',
time: 3
}, {
src: 'http://www.islamicgems.com/images/slideshow/pic11.jpg',
href: 'http://blog.islamicgems.com/?p=336',
from: '50% 80% 1.4x',
to: '80% 0% 1.1x',
time: 2
}, {
src: 'http://www.islamicgems.com/images/slideshow/pic4.jpg',
href: 'http://islamicgems.com/product_info.php?products_id=340',
from: '0% 80% 1.1x',
to: '0% 0% 1.0x',
time: 2
}, {
src: 'http://www.islamicgems.com/images/slideshow/pic2.jpg',
href: 'http://blog.islamicgems.com/?cat=9',
from: '50% 100%',
to: '0% 50% 1.2x',
time: 3
}, {
src: 'http://www.islamicgems.com/images/slideshow/pic8.jpg',
href: 'http://islamicgems.com/product_info.php?products_id=347',
from: 'bottom left 1.2x',
to: 'bottom right 1.0x',
time: 3
}, {
src: 'http://www.islamicgems.com/images/slideshow/pic9.jpg',
href: 'http://www.facebook.com/pages/ISLAMICGEMS/74177547629?ref=ts',
from: 'top left',
to: 'bottom right 1.2x',
time: 2
}, {
src: 'http://www.islamicgems.com/images/slideshow/pic5.jpg',
href: 'http://islamicgems.com/product_info.php?products_id=337',
from: '50% 0% 1x',
to: '20% 80% 1.2x',
time: 3
}, {
src: 'http://www.islamicgems.com/images/slideshow/pic10.jpg',
href: 'http://blog.islamicgems.com/?p=336',
from: 'bottom left 1.1x',
to: '20% 80% 1x',
time: 3
}, {
src: 'http://www.islamicgems.com/images/slideshow/pic3.jpg',
href: 'http://islamicgems.com/product_info.php?products_id=349',
from: '50% 80% 1.3x',
to: '80% 0% 1x',
time: 2
}, {
src: 'http://www.islamicgems.com/images/slideshow/pic7.jpg',
href: 'http://islamicgems.com/product_info.php?products_id=352',
from: 'top left 1x',
to: 'bottom right 1.3x',
time: 3
}
]);
});
</script>
this is all in my index.php file. I can paste the contents of that here as well if needed.
Can anyone help me figure out where i am going wrong. I'd really appreciate it. Ive been at this for over a month and am feeling so lost now.
Thank You
#22
you should have a div element with a id #test3
If you need a block with the cross slide use this module: http://drupal.org/project/slideshowcs
And I think, problems with the cross-slide plugin is out of the scope of this issue, which is intended to ask for the inclusion of this plugin in the module. Maybe if you have problems in using the plugin itself, should open another issue. If I am wrong, please, correct me.