How to create a basic dynamic display block image slideshow with links to other pages

This tutorial gives step by step instructions how to create a basic slideshow, with links to other pages, using one node as input for the slideshow.

I will use the content type: "ddblock images with links to other pages", the node: "ddblock images with links" and a ddblock named: "ddblock image-link slideshow". I advise you to use the same names to make this tutorial work. When you have the slideshow working you can use your own names for the content type, node and ddblock.

Links refer to the existing tutorial on this site.

Installation:

Follow the detailed Installation instruction on how to install the required modules to make the: ddblock image slideshow with links to other pages.

Create a content type

Path to create content type:

Go to Admin > Content management > Content types.

Add content type

Click Add content type button.
Fill in the following fields:
- Name - e.g ("ddblock images with links to other pages").
- Type - e.g ("ddblock_images_with_links").
- Description - (optional).
Click Save content type button.

Create a node to provide content for the slideshow

Path to create a node:

Go to Admin > Create content > "ddblock images with links to other pages".

Create node

Fill in the following fields:

Title - e.g ("ddblock images with links").

Insert the following code in the Body for using 3 slides.

   <div class="slides">
    <div class="slide">
     <a href="link to node"><img src="link to image"></a>
    </div>
    <div class="slide">
     <a href="link to node"><img src="link to image"></a>
    </div> 
    <div class="slide">
     <a href="link to node"><img src="link to image"></a>
    </div> 
   </div>

Attach images to your node.
Attach 3 images to the node (You need to have upload module enabled to attach files).
Change "link to node" and "link to image".
You need to change "link to node" and "link to image" to real URLS

"link to node" - Link to a node or other URL. E.g ("node/1 to link to node 1 or http://themes.myalbums.biz to link to a page on another Internet site.)

"link to image" - Path to image to show in the slideshow. (copy the link from the attached images)
Change Input format to Full HTML.
Make the node Published.
Click Save button.

Adding more slides
For this: "ddblock image slideshow with links to other pages" only 3 slides will show. If you want more slides to show for the image slideshow copy and paste the code below after the end tag of the <div class="slide">.

  <div class="slide">
   <a href="link to node"><img src="link to image"></a>
  </div>

Enable the content type for the dynamic display block module

Before you can use the content type with the dynamic display block module you have to enable it.

Path to enable content type in the settings pages of the dynamic display block:

Go to Admin > Site configuration > Dynamic display block.
Click Settings tab.

Enable content type

Enable: "ddblock images with links to other pages" under Content types.
Click Save configuration button.

Add a block for the: "ddblock image slideshow with links to other pages"

Path to add a block:

Go to Admin > Site configuration > Dynamic display block.

Add block

Fill in Block title text field - e.g ("ddblock image-link slideshow").
Click Add block button.

Configure block - "ddblock image-link slideshow"

You can use two path to configuring a block:

Go to Admin > Site building > Blocks > "ddblock image-link slideshow".
Go to Admin > Site configuration > Dynamic display block > "ddblock image-link slideshow".

Configure the block

Choose Content type under Input type select box fieldset.
Choose "ddblock_images_with_links" under Content type select box fieldset.
Choose the node you made, e.g ("ddblock images with links").
Set the other settings.
Notes:
1. Change Content container to div.slide.
2. Uncheck the Next checkbox.
3. You can u use a number pager or prev/next pager. Check the Use Pager checkbox.
4. Choose a pager.
Click Save block button.

Display Dynamic display block slideshow:

You can place your block - "ddblock image-link slideshow" in either a region of your theme or in a node.

In the Display advanced Dynamic display block slideshow tutorial page you can find more information how to display the slideshow on your site.

Styling the slideshow
You can style the slideshow by overriding the node.tpl.php template file.
Create a copy of the node.tpl.php file and rename it to node-[Content-type-name].tpl.php.

Add new comment

Comments

Thu, 01/21/2010 - 06:57 — undersound3 (not verified)

thanks

Thanks for this clear explanation. Worked right out of the box !

Mon, 09/07/2009 - 22:20 — drecute (not verified)

the ddblock does not animate to the other slides

Nice tutorial!

I followed this tutorial closely. But I can't get it to work.

At the moment, the ddblock just shows only the first images and does not animate to the others. What I noticed is that the images are lined up one after the other. I mean one image on top and the others follow beneath.
Please I need your help.

Thanks

Thu, 11/19/2009 - 08:13 — X1-Bot (not verified)

Same problem

I have the same problem. I get the 1st image but it doesn't fade to the next. And the next and prev buttons I added don't move from image to image either

Thu, 11/19/2009 - 10:31 — X1-Bot (not verified)

Nevermind I'm an idiot--I made typo

Make sure to check your code for typos if you find you have a similar problem as me. I found out I typed the class names (slide, slides, etc) wrong so jquery wasn't 'finding' them in my page. Make sure you don't type an extra 's' etc.

Tue, 09/08/2009 - 10:17 — admin

Re: ddblock does not animate

Please make an issue in the issue queue and attach the page source where the ddblock is added, so I can help you better.

Mon, 07/13/2009 - 03:29 — Tyera (not verified)

Block to accommodate vertical and horizontal pics

Hello, thanks for the module! I've had no trouble getting it to work.

However, I am using it for user generated slideshows that may have both vertical and horizontal pictures in them. I am using ImageCache, so either the height or the width is set to 475px.
(an example from my site here)

Ideally, I would like the slideshow box (and slider) to adjust to a vertical aspect ratio when a vertical picture is displayed.
If that is impossible, i would like to use a square container box (which i have been able to create using css) with the pictures centered vertically and horizontally (which i have not).

Can you help?

my .css currently looks like this:
div.ddblock-cycle-upright40 div.container{background-color:#fff;width:475px;}
div.ddblock-cycle-upright40 div.container-inner{height:358px;position:relative;}
div.ddblock-cycle-upright40 div.slider{float:left;width:475px;}
div.ddblock-cycle-upright40 div.slider-inner{background:transparent url(../images/transparent_bg.png) repeat scroll 0 0!important;height:315px;overflow:hidden;position:relative;visibility:hidden;}
div.ddblock-cycle-upright40 div.slide{display:none;height:100%;left:0;position:absolute;top:0;}
div.ddblock-cycle-upright40 div.slide-inner img{margin:0 !important;padding:0 !important;}
div.ddblock-cycle-upright40 div.slide-text{background:transparent url(../images/transparent_bg.png) repeat scroll 0 0!important;position:absolute;}
div.ddblock-cycle-upright40 div.slide-text-horizontal{height:85px;left:0;width:475px;}
div.ddblock-cycle-upright40 div.slide-text-vertical{height:303px;width:140px;}
div.ddblock-cycle-upright40 div.slide-text-top{top:7px;}
div.ddblock-cycle-upright40 div.slide-text-right{bottom:0;right:30px;}
div.ddblock-cycle-upright40 div.slide-text-bottom{bottom:7px;}
div.ddblock-cycle-upright40 div.slide-text-left{bottom:0;left:30px;}
div.ddblock-cycle-upright40 div.slide-text-inner{padding:10px;}
div.ddblock-cycle-upright40 div.slide-title{float:left;}
div.ddblock-cycle-upright40 div.slide-title-vertical{width:130px;}
div.ddblock-cycle-upright40 div.slide-title-horizontal{float:left;width:158px;}
div.ddblock-cycle-upright40 div.slide-title h2{margin:-5px 0 0 0;padding:0;}
div.ddblock-cycle-upright40 div.slide-title-inner{color:white;font-weight:bold;}
div.ddblock-cycle-upright40 div.slide-body-vertical{width:132px;}
div.ddblock-cycle-upright40 div.slide-body-horizontal{float:left;width:290px;}
div.ddblock-cycle-upright40 div.slide-body-inner{color:white;}
div.ddblock-cycle-upright40 div.slide-body-inner p{margin:0 8px 0 0;padding:0;}
div.ddblock-cycle-upright40 div.slide-read-more{width:110px;}
div.ddblock-cycle-upright40 div.slide-read-more p{padding:0;margin:0;}
div.ddblock-cycle-upright40 div.slide-read-more a{background:url(../images/readmore.png) no-repeat;border:none;bottom:5px;color:#fff;font-size:14px;font-family:times New Roman;margin:0;padding:4px 0 4px 19px;position:absolute;text-decoration:none;text-align:left;width:100px;}
div.ddblock-cycle-upright40 div.slide-read-more-horizontal a{right:-17px;}
div.ddblock-cycle-upright40 div.slide-read-more-vertical a{right:5px;}
div.ddblock-cycle-upright40 div.slide-read-more a:hover{background:url(../images/readmore-hover.png) no-repeat;text-decoration:underline;}
div.ddblock-cycle-upright40 div.slide-read-more-horizontal a:hover{right:-17px;}
div.ddblock-cycle-upright40 div.slide-read-more-vertical a:hover{right:5px;}
div.ddblock-cycle-upright40 div.custom-pager{width:475px;}
div.ddblock-cycle-upright40 div.custom-pager-inner{height:60px;}
div.ddblock-cycle-upright40 div.custom-pager .custom-pager-item{float:left;}
div.ddblock-cycle-upright40 div.custom-pager .custom-pager-item-inner{width:75px;}
div.ddblock-cycle-upright40 div.custom-pager a{background-color:#fff;color:#999;display:block;float:left;font-family:Tahoma,Arial,sans-serif;font-size:.9em;font-weight:bold;line-height:46px;opacity:0.7;text-align:center;text-decoration:none;width:75px;}
div.ddblock-cycle-upright40 div.custom-pager a.activeSlide{background-color:#999;color:#fff;opacity:1;}
div.ddblock-cycle-upright40 div.custom-pager a:hover{background:#111;color:#f00;opacity:1;}
div.ddblock-cycle-upright40 div.custom-pager a:focus{outline:none;}
div.ddblock-cycle-upright40 div.custom-pager img{border:none;margin:0 !important;padding:0 !important;vertical-align:middle;}
div.ddblock-cycle-upright40 div.spacer-vertical{display:block;float:left;height:60px;width:5px;background-color:#ccc;}
div.ddblock-cycle-upright40 div.spacer-horizontal{clear:both;height:5px;background-color:#ccc;}

Thank you very much!!

Mon, 07/13/2009 - 14:28 — admin

Re: Vertical and horizontal pics

You could delete the height from container-inner and increase the size of the slider_inner to accommodate the largest portrait picture. Would then place the pager at the top. You can also delete the background from slider-inner so you would have a white background. With image cache you could make all pictures as wide as the slideshow, so the width is static, the height is flexible.

Hope this helps you further, please let me know.

Tue, 07/14/2009 - 04:29 — Tyera (not verified)

Brilliant! Looks much nicer,

Brilliant! Looks much nicer, especially with the slider text limited to the width of the photo.
Thank you very much!!

Sun, 07/12/2009 - 20:15 — Irfan (not verified)

The Node title still display

Hi, I'm using DDB for my site, and I follow this tutorial. The slide works fine but there is one problem. The node title ("ddblock images with links") is still appearing between slide show. How is the way to hide the node title?
thanks

Mon, 07/13/2009 - 14:38 — admin

Re: The Node title still display

Can you send a link where I can see what you mean.

Thu, 08/20/2009 - 22:04 — beasley (not verified)

Title showing

I've got the same problem as Irfan. The node title still shows when an image fades. I've set the block title to 'none' but it has no effect:

div id="ddblock-5" class="ddblock-contents clear-block" style="visibility:hidden">
 <div class="ddblock-content clear-block">
         <div class="ddblock-container"> 
         <div class="node node node-mine node-type-ddblock_images_with_links" id="node-549">
	<div class="node-inner">
       	    <h2 class="title node-title">
				<a href="/node/549">ddblock images with links</a>
			</h2>
      	<div class="content">
  	  <div class="slides">
<div class="slide"><a href="link"><img src="image url" alt="" /></a></div>
<div class="slide"><a href="link"><img src="image url" alt="" /></a></div>
<div class="slide"><a href="link"><img src="image url" alt="" /></a></div>
</div>
  	</div>
 </div> <!-- /node-inner -->
</div> <!-- /node-->       </div>
</div>
</div>
</div>
</div> <!-- /block-inner -->
</div> <!-- /block -->

I can remove it with CSS, of course. I was just wondering if there was a better way.

Fri, 08/21/2009 - 08:33 — admin

Re: Title showing

The node title you see is the title of the node where you place the ddblock in. It is not the title of the block itself. That is way you can not remove it with setting the block title to none.

You can remove (hide) the title with CSS

You can remove the title by overriding the node.tpl.php template file.
create a node-[Content-type-name].tpl.php file by copying the node.tpl.php file and remove the title.

Hope this helps you further, please let me know.

Fri, 08/21/2009 - 16:19 — beasley (not verified)

Thanks!

I tried the template route and it worked fine. Thanks a lot for that and thanks for the great module!

Thu, 06/11/2009 - 04:50 — Izzy (not verified)

I am not able to get this to

I am not able to get this to work.

When I try to enable it by going to the dynamic display settings tab and check the Content type and save, it will not allow me to save without specifying a block and the ddblock image-link slideshow block does not show as an option.

I must be missing a step. Any help would be appreciated.

Thanks.

Thu, 06/11/2009 - 11:50 — admin

Re: I am not able to get this to

Ok, I see the block setting is mandatory. Just select one of the blocks in the list and Save. (There are no consequences making a block available for the ddblock module. It's only there to limit the lists in the configuration page. Will change this to optional in next release of the module, so also only content types can be made available for the ddblock module.

Hope this helps you further, please let me know.

Fri, 06/12/2009 - 06:05 — Izzy (not verified)

I tried that but got an error

I tried that but got an error that the block couldn't be associated with the new Content type. I didn't try them all. Is there a block that I might try that won't have this restriction?

Should this be opened as an issue on drupal.org?

Thanks,

Izzy

Fri, 06/12/2009 - 09:18 — admin

Re: I tried that but got an error

Izzy,

Yes please make an issue in the issue queue of the dynamic display block module

Do you have a link to the site?

Tue, 04/21/2009 - 11:01 — cssgalactic (not verified)

How to question?

Thank you, I was able to get it to work, I would like to show more than one image as the images scroll to the left.

How can I display more than one image?

Wed, 04/22/2009 - 13:58 — admin

Re: How to question

I don't understand your requirements to give a good answer.
If you want to show more images per slide, you can add more images to the div, but maybe that is not what you are looking for.

Can you be more specific, so I can help you better.

Mon, 07/13/2009 - 16:02 — Imran (not verified)

Re: How to question

May be you want to show more than one image cck field instead of just one image and slider text? If that is the case then you will have to add in the cck field, and make changes to your theme template file.

If you look at our portfolio page http://www.newearthmarketing.com/portfolio I have added one button "Visit Site" which takes you to the website. For this I have added one link cck field and added this code to my template.php file

  if (isset($result->node_data_field_website_url_field_website_url_url)) {
              $slider_items[$key1]['slide_visit_site'] =  l('Visit Site', $result->node_data_field_website_url_field_website_url_url);
              $slider_items[$key1]['slide_node'] =  'node/' . $result->nid;
            }

And added this to my ddblock template file

<div class="slide-visit-website">
	 <?php print $slider_item['slide_visit_site'] ?>
 </div>

Dynamic display block slideshow module for Drupal

Dynamic Display Block

Example sites

Sites using dynamic display block slideshows

Alexa

Recent comments