Slider is the very first thing you will see when visiting a website. Adding some movement effects can attract your visitors alot. This is the tutorial for creating jQuery image slider block in Drupal.
We received a number of questions for creating a jQuery image slider block in Drupal, especially in our two free Drupal themes Alphorn and Conch. So I decide to write a tutorial for this issue.
Demo of jQuery slider
ST Alphorn slider
ST Conch slider
ST Duduk slider
ST Inci slider
Download demo of jquery cycle: Jquery Cycle Demo
Drupal jQuery slider tutorial
Following these steps to get your slider working.
Step 1: Download jQuery
Download jQuery Cycle plugin at here.
Step 2: Install View, CCK, ImageCache
Install and enable View, CCK, ImageCache modules. You can download those modules at drupal.org
Step 3: Create a slideshow block.
- Use ImageCache to create slideshow preset for image on slides.
- First login to Administer -> Site Building -> Image cache
- Label a new namespace preset: for example "slideshow" (no quotes) and click on the 'Create preset' button.
- Then choose an action: scale, resize, or crop.
- After that, give the preset a width and height, you can use a percentage to get sizes relative to the original image's size or enter an absolute value in pixels.
- Create content slideshow type and add image field for it. Go to admin/User management/permissions to set permission for image field which you've created. This is to avoid the case when the images disappear when you log out.
- Add several slideshow nodes.
- Create a slideshow view.
- Add a view with view type ‘node’.
- In Fields section: select ‘Content:Image’; ‘Node:body’. In Format of ‘Content:Image’: select ‘slideshow image’.
- In Filters section: add ‘Node: Published’=yes and ‘Node: Type’ = slideshow.
- Add a Block display on this view.
- Add slideshow block to slideshow position.
Step 4: Create a javascript file, add it in theme_folder and add scripts[] = myscript.js to file .info (Don't forget clear cache befor you refresh your browser).
This is basic demo code:
$(document).ready(function() {
$('#st_slogan .view-content').cycle({
fx: 'scrollLeft'; // You can change the effect at this line
});
});
To learn more about jQuery please click here .
Conclusion
Done! Now you can play around with this slider block by changing effects etc.
I have used this technique for our two free Drupal themes, Alphorn and Conch. You can download and check them out to see what sliders look like in a real theme.
| Attachment | Size |
|---|---|
| alphorn_slider.JPG | 23.24 KB |
| jquery_cycle_page_control.jpg | 27.69 KB |
| duduk_slider_demo.jpg | 21.52 KB |
| inci_slider_demo.jpg | 22.63 KB |
| conch_slider_demo.jpg | 19.93 KB |
| jquery_cycle.zip | 108.51 KB |
Comments
Question
Step 1: Download jQuery
Download jQuery Cycle plugin at here.
And where I have to put this into? On my Desktop it doesn't work.
You see I'am a Dummie, plz help me. :-)
upload it to the js folder in
upload it to the js folder in the Ocavin directory under themes.
Thank you
Tank you for sharing
I found this informative and
I found this informative and interesting blog i think its very useful and knowledge able.I would like to thank you for the efforts you have made in writing this article.
hiii
May I download this plugin thanks
vimax
This is a tutorial, not a
This is a tutorial, not a plugin. You need to follow these steps to get it working.
It IS a plugin
They are referring to Step 1, where you are asked to download a plugin.
So many problems its not funny :(
Ok, I admit I'm new to Drupal and only just recently decided that Drupal was exactly what my wife needed for her wedding decoration business web site.
After getting Drupal working on my Ubuntu test machine, I started off by looking for a theme that would look professional and eye-catching. Alphorn made the choice easy!
However, getting that slideshow to work is a major nightmare.
So I will outline now what I did. I'm convinced that anyone more familiar with Drupal will see straight away where I'ven gone wrong, but I also hope that it shows perhaps where the tutorial could be improved
Step 1 and 2: no problems here!
Step 3:
1a. I went to "Administer|Site Building|ImageCache" and chose "Add new preset"
1b. Selected "Add new preset" tab and set the "Preset Namespace" to "slideshow"
1c. Added a "Resize" action to that preset
2a. I went to "Administer|Content Management|Content types"
2b. Selected "Add content type" tab and set the name to "Slideshow", type to "slideshow" and added some description
2c. Then I was going to add a filed with Label "Image", name "image" (resulting in "field_image" and node type "image", but that type did not exists (all I had was Decimal, Float, Integer, Node reference, Text and User reference)
2d. Since the tutorial doesn't mention anything I downloaded/installed filefield and imagefield, enabled these modules in the CCK section and now managed to complete step 2c by setting filed type to File and form element to edit the data to Image.
2e. Tried in vain to find where I could modify the permissions for this field so skipped this step.
3. Added a few slideshow nodes (uploaded images and and assigned text to it and made sure "published" was ticked.
4a. Selected "Administer|Site building|Views"
4b. Use the "Add" tab to create a new view
4c. Set "View Name" = "slideshow", set some description, left view tag blank and selected "Node" in "View Type".
4d. The next screen shows some dialog with "Block" details (dropdown box with "Page" selected, "Add display" and "Analyze" buttons) which I changed to "Block" and clicked "Add display". There were many other areas, all of which I left alone. Then I clicked the + button next to Fields and ticked the boxes "Content:Image (field-image)" and "Node:Body" (I looked for something like format to select "slideshow image" but this did not exist, so I skipped this step). I set the filters to "Published = Yes" and "Type = Slideshow".
5. Selected "Administer|Site building|Blocks" and found "slideshow: Block" listed at the bottom of the screen. In the dropdown box I selected "Slider" and saved the page.
Amazingly, when I clicked the "Home" link, I could see the banner but... read on.
Step 4: Well creating a javascript file will do absolutely nothing unless you also load it somehow. So I hunted in my Alphorn theme and found a file "themes/alphorn/js/custom.js" which looked very similar to what the tutorial suggests (except this file had a different DOM selector for the slide show: $('#st_wrapper_slogan .view-content'), but I assume this is a type in the tutorial) so I simply did nothing!
Now back to the behaviour. These are the problems I have:
1. My ImageCache Resize rule is not applied. This means that the image overruns the right margin and spreads into the footer.
2. When I'm logged out, I don't see the image, but I see the body of all three slideshow content entries listed below each other and the fancy graphical box shows the first two dimmed behind the third. Where do I set permissions again?
3. When I'm logged in as administrator, it shows me an "Image:" heading
As I said, I'm a Drupal greenhorn, but I do believe that starting off by getting the absolute basics going and then selecting a theme is not so outlandish. The slideshow that the demo includes is certainly one of the great characteristics of this theme.
I doubt that I'm the only one that is surprised that the slideshow doesn't exists after installing and switching to the alphorn theme. I'm not saying that this is wrong at all, in contrast, it makes perfect sense. My only criticism is on this "tutorial".
Pete
Slideshow
Finally figured out,but some more questions
1.When creating content type and new field on it, which field type should be selected?
2.Format of ‘Content:Image’: select ‘slideshow image’.
This format does not exists.
3.If I put block in slideshow position is does not shown at all,only in "slogan" position.
4.What is deafault size for upper banner?
Thanx!
Hi JMX, 1.When creating
Hi JMX,
1.When creating content type and new field on it, which field type should be selected?
=> select file type and then select image option
2.Format of ‘Content:Image’: select ‘slideshow image’.
This format does not exists.
=> Please see step 1: Use ImageCache to create slideshow preset for image on slides. This enables all images to have the same size. when you create slideshow preset, this format'll exit.
3.If I put block in slideshow position is does not shown at all,only in "slogan" position.
=> If you want to put block in other positon, you have to change javascript file. Put the id of posion which you want to display slideshow on the bold line below.
$(document).ready(function() {
$('#st_slogan .view-content').cycle({
fx: 'scrollLeft'; // You can change the effect at this line
});
});
4.What is deafault size for upper banner?
=> it depend on each theme.
Cheers,
Support - SymphonyThemes.
Problems
I cannot see the 'content:image' option field in views, i only have Content: imagefield (field_image) File - Appears in: Slideshow, i have tried this one already but it does not have the Slideshow option, what am i missing here?
Can you give me the link of
Can you give me the link of your web site?
I've figured out my problem
I've figured out my problem already thank you