Posted by Pierre_G on October 8, 2009 at 3:28pm
Jump to:
| Project: | Jquery Slideshow |
| Version: | 6.x-1.2 |
| Component: | Code |
| Category: | bug report |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | needs review |
Issue Summary
I wanted to have multiple slideshows displayed in a page which is listing teasers with the slide inside them.
But with the module, it was impossible to have more than one in a page.
I made some changes to get it work :
(thanks as well to this post : #557560: handling empty imagefields)
theme_jquery_slideshow_formatter function
function theme_jquery_slideshow_formatter($element) {
static $current_slide_nid;
if (!$current_slide_nid || $current_slide_nid!=$element['#item']['nid']) {
$nid = $element['#item']['nid'];
$current_slide_nid = $nid;
$node = node_load($element['#item']['nid']);
$field_name = $element['#field_name'];
if($node->{$field_name}){
$jq_slideshow_id = 'jq-slideshow-'. $nid .'-'. $field_name;
#render CSS files
$formatter = $element['#formatter'];
$dets = explode('__', $formatter);
$preset = $dets[1];
_jquery_slideshow_get_settings($jq_slideshow_id, $preset, $nid);
#render output HTML
$output = '<div class="jquery_slideshow" id="'. $jq_slideshow_id .'">';
foreach ($node->{$field_name} as $image) {
if($image) {
$output .= theme('imagecache', $preset, $image['filepath'], $image['data']['alt'], $image['data']['title']);
}
}
$output .= '</div>';
}
return $output;
}
}_jquery_slideshow_get_settings function
function _jquery_slideshow_get_settings($jq_slideshow_id, $preset, $nid='') {
jquery_plugin_add('cycle');
$data = _jquery_slideshow_get_actions($preset);
$script = "Drupal.behaviors.jquerySlideshow".$nid." = function(){
$('#".$jq_slideshow_id."').css({height:'". $data['height'] ."px'});
$('#".$jq_slideshow_id."').css({width:'". $data['width'] ."px'});
$('#".$jq_slideshow_id."').cycle({
fx: '". variable_get('jquery_slideshow_effect', 'fade') ."',
speed: ". variable_get('jquery_slideshow_speed', 500) .",
timeout: ". variable_get('jquery_slideshow_timeout', 4000) ."
});
}";
drupal_add_js($script, 'inline');
}I hope I didn't forget anything, but it seems OK.
Any change to make it more optimized are welcome of course.
Comments
#1
I forgot to say that with this, you can also make multiple slideshow in one content, with their own sizes / imagecache presets.
#2
I've installed Jquery Slideshow, which provides the exact functionality I was seeking, except that I experience errors with nodes that contain empty image fields, and I cannot display more than one slideshow on a page (I need multiple).
Both of these features are essential for me (multiple slideshows on one page and properly handling nodes with an empty image field), and am not certain how to patch this module in order to add this functionality.
Is there a module that can accomplish multiple slideshows on one page and successfully handle empty image fields?
Thanks for any help you can provide!
#3
I implemented the above code changes, and both of the problems I was experiencing disappeared, and the module now serves multiple images on a page and does not indicate an error when encountering a node that has an empty image field. Will the above code become a part of the module soon? If not, is it safe to make the above changes to the module on a production site? If so, this module with the above code changes seems to work perfectly for what I am trying to accomplish.
#4
When using the above code to create an image slideshow within a field using multiple nodes on a page via views, Internet Explorer slows down scrolling significantly after adding only a few images (6 or 7). Any ideas as to why? Firefox works fine.
#5
I didn't test it with IE, only on Firefox.
I'll work on my project in the next days, I'll be back here to tell if I find any improvements about this.
#6
Thanks very much Pierre_G. The two problems I found when testing the above code are as follows:
1. In Internet Explorer, scrolling is very slow when placing several images on one page. Firefox is fine.
2. I defined a Jquery Slideshow image field inside of a view, and I use that view to pull multiple nodes onto one page (this is how I was able to accomplish #1 above). I noticed that when I add a new image and then visit the view page, the space occupied by the image is ignored, and therefore the text below the image (the next field) is directly underneath the image itself, as if the view does not know that the image exists. So, instead of having the image followed by the text field, the text ends up underneath the image. But, when I reload the page, the problem disappears. It seems as if this only happens when I add the image to a node for the first time and visit the page that contains the view, because when I reload the page, the view seems to recognize the image size.
If I could solve the above two problems, your code above will work perfectly for what I am trying to accomplish (which is to have multiple nodes shown on one page using views, with each node having a Jquery Slideshow image field producing a slideshow). This will serve as an alternative to animated GIFs on my site so that I can implement higher quality JPG or PNG images.
I look forward to hearing what you can determine Pierre_G!
#7
I tried this for a list of nodes all with thumbnail slide shows and it works perfectly in FF and Chrome but IE doesnt like it although this maybe due to conflict other js on the page.
Thanks
#8
Thanks for the suggested code. Would it be possible for you to provide a patch file so I can easily determine what lines you've changed?
#9
Hi all,
I have the same trouble in IE.
I have an 'addthis' tool that uses java along with jquery_slideshow pulling multi photos from one field_photo.
IE is very slow and will not show java. The Error on page says Invalid argument, line:68 Char:9 Code:0
Firefox is great! on probs.
Very frustrating.
Cheers
#10
Hi all,
I was having a good look at the invalid argument code and the bad line reads;-
$('.jquery_slideshow').css({height:'100%px'});
I would say it has to do with the height at 100%px ?
Anyone know how this can be changed?
Cheers
#12
I'm having trouble implementing the code to fix Multiple Instances of jQuery_Slideshow.
Can anyone give me a briefing on how to input the above code?
I copied and pasted all that code into template.php and added phptemplate to the beginning of the function names. Still not working for me.
Please help?
#13
I have the same problem with getting two instances of jQuery_Slideshow to work.
Would some please be so kind to look where's the problem in the code.
I would be really, really delighted to get this nice plugin to work :)
#14
I'm working on this also. Any updates for the most current version would be appreciated!
#15
subscribing
#16
I have this working! The first thing I had to figure out is that the instructions Pierre_G so kindly provided seem to relate to version 1.2, not 1.3 that I had downloaded from GIT. I had started with 1.3 because I need the Prev and Next links. If you've also downloaded and are using 1.3, then it will take a little more work.
First I rolled back to version 1.2, then applied Pierre_G's fix to jquery_slideshow.module. It worked just as described. My views page displayed two slideshows at the same time!
Next I had to figure out how to pull in the code to generate the Prev and Next links. I opened my edited version 1.2 and the 1.3 version (nvoyageur-Jquery-Slideshow-613e2b2) and looked for the sections that rendered the ul.jqs-controls. I copied all those in the appropriate places in my edited 1.2 version. Since 1.3 uses appropriate wrapper divs, I also added all those to the html rendering section. I replaced the inline/on-page js script with the linked jquery_slideshow.js. I also added the jquery_slideshow.css and images folder to my hacked-up verison 1.2.
When I uploaded and tested it, the only problem I encountered was with the Prev/Next on my Views page. (They worked properly on the first node teaser, but were apparently confused about what to do on the second and later teasers.) Because I was at the edge of my technical skill (ha!), I decided to use CSS (my real expertise) to hide the links on the Views page. Now it all works nicely!
Summary:
1. Start with version 1.2.
2. Apply Pierre_G's fix.
3. Add in the Prev/Next coding.
4. Convert to linked js and css/images files.
5. Hide Prev/Next on Views pages (to avoid Prev/Next conflicts).
6. Celebrate! It works!
I'm not posting my code here because I'm not a coder and I'm sure that it's not "Drupal-kosher." I'm happy to share with the project dev if it would help anyone else!
Happy day,
Anne
PS: See all this coding wonder at http://mouse-map.com/disney-world-news .
#18
I tired tweaking a little these tow functions so that the multiple sideshows but with controls.
Anyone care to comment? I'm not sure these are really orthodox...
theme_jquery_slideshow_formatter function
function theme_jquery_slideshow_formatter($element) {
static $current_slide_nid;
if (!$current_slide_nid || $current_slide_nid!=$element['#item']['nid']) {
$nid = $element['#item']['nid'];
$current_slide_nid = $nid;
$node = node_load($element['#item']['nid']);
$field_name = $element['#field_name'];
if($node->{$field_name}){
$jq_slideshow_id = 'jq-slideshow-'. $nid .'-'. $field_name;
#render CSS files
$formatter = $element['#formatter'];
$dets = explode('__', $formatter);
$preset = $dets[1];
_jquery_slideshow_get_settings($jq_slideshow_id, $preset, $nid);
#render output HTML
$output = '<div class="jquery_slideshow" id="'. $jq_slideshow_id .'">';
foreach ($node->{$field_name} as $image) {
if($image) {
$output .= theme('imagecache', $preset, $image['filepath'], $image['data']['alt'], $image['data']['title']);
}
}
$output .= '</div>';
if (variable_get('jquery_slideshow_showcontrols', 'Yes') == 'Yes' && (1 < count($node->{$field_name}))) {
$output .= '<ul class="jqs-controls">
<li class="jqs-prev-slide"><a href="#" id="jqs-prev-slide-'. $jq_slideshow_id .'">' . t('Prev') . '</a></li>
<li class="jqs-next-slide"><a href="#" id="jqs-next-slide-'. $jq_slideshow_id .'">' . t('Next') . '</a></li>
</ul>';
}
}
return $output;
}
}
_jquery_slideshow_get_settings function
function _jquery_slideshow_get_settings($jq_slideshow_id, $preset, $nid='') {
jquery_plugin_add('cycle');
$data = _jquery_slideshow_get_actions($preset);
$script = "Drupal.behaviors.jquerySlideshow".$nid." = function(){
$('#".$jq_slideshow_id."').css({height:'". $data['height'] ."px'});
$('#".$jq_slideshow_id."').css({width:'". $data['width'] ."px'});
$('#".$jq_slideshow_id."').cycle({
fx: '". variable_get('jquery_slideshow_effect', 'fade') ."',
speed: ". variable_get('jquery_slideshow_speed', 500) .",
timeout: ". variable_get('jquery_slideshow_timeout', 4000) .",
next: '#jqs-next-slide-".$jq_slideshow_id."',
prev: '#jqs-prev-slide-".$jq_slideshow_id."'
});
}";
drupal_add_js($script, 'inline');
}