249 lines
12 KiB
HTML
249 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html class="no-js" lang="en-GB">
|
||
<head>
|
||
<title>Create a Slideshow of Multiple Images Using Fancy Slide | Oliver Davies</title>
|
||
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
||
|
||
<meta property="og:url" content="https://www.oliverdavies.uk/blog/2010/05/25/create-slideshow-multiple-images-using-fancy-slide">
|
||
<meta property="og:title" content="Create a Slideshow of Multiple Images Using Fancy Slide"/>
|
||
|
||
|
||
|
||
<meta property="og:image" content="https://www.oliverdavies.uk/assets/images/me-precedent.jpg"/>
|
||
<meta property="og:image:height" content="327"/>
|
||
<meta property="og:image:type" content="image/jpg">
|
||
<meta property="og:image:width" content="327"/>
|
||
|
||
|
||
|
||
<link rel="stylesheet" href="https://www.oliverdavies.uk/assets/css/main.css">
|
||
<link rel="stylesheet" href="https://www.oliverdavies.uk/assets/css/blog-post.css">
|
||
|
||
<link rel="apple-touch-icon" href="/assets/images/me-precedent.jpg?s=57" sizes="57x57">
|
||
<link rel="apple-touch-icon" href="/assets/images/me-precedent.jpg?s=114" sizes="114x114">
|
||
<link rel="apple-touch-icon" href="/assets/images/me-precedent.jpg?s=72" sizes="72x72">
|
||
<link rel="apple-touch-icon" href="/assets/images/me-precedent.jpg?s=144" sizes="144x144">
|
||
<link rel="apple-touch-icon" href="/assets/images/me-precedent.jpg?s=60" sizes="60x60">
|
||
<link rel="apple-touch-icon" href="/assets/images/me-precedent.jpg?s=120" sizes="120x120">
|
||
<link rel="apple-touch-icon" href="/assets/images/me-precedent.jpg?s=76" sizes="76x76">
|
||
<link rel="apple-touch-icon" href="/assets/images/me-precedent.jpg?s=152" sizes="152x152">
|
||
|
||
<link rel="icon" href="/assets/images/me-precedent.jpg?s=160" sizes="160x160">
|
||
<link rel="icon" href="/assets/images/me-precedent.jpg?s=96" sizes="96x96">
|
||
<link rel="icon" href="/assets/images/me-precedent.jpg?s=32" sizes="32x32">
|
||
<link rel="icon" href="/assets/images/me-precedent.jpg?s=16" sizes="16x16">
|
||
</head>
|
||
<body class="">
|
||
<nav class="navbar navbar-inverse navbar-fixed-top">
|
||
<div class="container">
|
||
<div class="navbar-header">
|
||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
|
||
<span class="sr-only">Toggle navigation</span>
|
||
<span class="icon-bar"></span>
|
||
<span class="icon-bar"></span>
|
||
<span class="icon-bar"></span>
|
||
</button>
|
||
<a class="navbar-brand" href="https://www.oliverdavies.uk/">Oliver Davies</a>
|
||
</div>
|
||
|
||
<div id="navbar" class="collapse navbar-collapse" role="navigation">
|
||
<ul class="nav navbar-nav">
|
||
<li class="">
|
||
<a href="/">About</a>
|
||
</li>
|
||
|
||
<li class="">
|
||
<a href="/experience">Experience</a>
|
||
</li>
|
||
|
||
<li class="">
|
||
<a href="/testimonials">Testimonials</a>
|
||
</li>
|
||
|
||
<li class="">
|
||
<a href="/talks">Talks</a>
|
||
</li>
|
||
|
||
<li class="active">
|
||
<a href="/blog">Blog</a>
|
||
</li>
|
||
|
||
<li class="">
|
||
<a href="/contact">Contact</a>
|
||
</li>
|
||
</ul>
|
||
</div> </div>
|
||
</nav>
|
||
|
||
<div class="container">
|
||
<div class="row">
|
||
<main class="col-md-9">
|
||
<h1>Create a Slideshow of Multiple Images Using Fancy Slide</h1>
|
||
|
||
<p class="posted text-light">25th May 2010</p>
|
||
|
||
<p>Whilst updating my About page, I thought about creating a slideshow of several images instead of just the one static image. When I looking on Drupal.org, the only slideshow modules were to create slideshows of images that were attached to different nodes - not multiple images attached to one node. Then, I found the <a href="http://drupal.org/project/fancy_slide">Fancy Slide</a> module. It's a jQuery Slideshow module with features that include integration with the <a href="http://drupal.org/project/cck">CCK</a>, <a href="http://drupal.org/project/imagecache">ImageCache</a> and <a href="http://drupal.org/project/nodequeue">Nodequeue</a> modules.</p>
|
||
|
||
<p>I added an CCK Image field to my Page content type, and set the number of values to 3, then uploaded my images to the Page.</p>
|
||
|
||
<p>Once the Images were added, I went to the Fancy Slide settings page and created the slideshow.</p>
|
||
|
||
<p>I added the dimensions of my images, the type of animation, specified the node that contained the images, the slideshow field, delay between slides and transition speed. With the slideshow created, it now needed embedding into the page.</p>
|
||
|
||
<p>I added the following code into my About page, as described in the Fancy Slide readme.txt file - the number representing the ID of the slideshow.</p>
|
||
|
||
<pre><code class="language-php"><?php print theme('fancy_slide', 1); ?>
|
||
</code></pre>
|
||
|
||
<p>In my opinion, this adds a nice effect to the About page. I like it because it's easy to set up, and easy to add additional images later on if required.</p>
|
||
|
||
<p class="tags">
|
||
Tags:
|
||
<a href="https://www.oliverdavies.uk/blog/tags/drupal-planet">drupal-planet</a>, <a href="https://www.oliverdavies.uk/blog/tags/drupal">drupal</a>, <a href="https://www.oliverdavies.uk/blog/tags/drupal-6">drupal-6</a>, <a href="https://www.oliverdavies.uk/blog/tags/fancy-slide">fancy-slide</a>, <a href="https://www.oliverdavies.uk/blog/tags/slideshow">slideshow</a> </p>
|
||
<div class="post-pager is-flex">
|
||
<div class="is-half">
|
||
<a href="/blog/2010/05/10/quickly-create-zen-subthemes-using-zenophile">
|
||
« Quickly Create Zen Subthemes Using Zenophile
|
||
</a>
|
||
</div>
|
||
|
||
<div class="is-half text-right">
|
||
<a href="/blog/2010/05/29/quickly-import-multiples-images-using-imagefieldimport-module">
|
||
Quickly Import Multiples Images Using the Imagefield_Import Module »
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="about-author">
|
||
<h2>About the Author</h2>
|
||
|
||
<img src="//images.oliverdavies.uk/assets/images/me-precedent.jpg" alt="Picture of Oliver" class="img-circle">
|
||
|
||
<p>Oliver Davies is a Web Developer, System Administrator and Drupal specialist based in the UK. He is a Senior Developer at <a href="https://microserve.io">Microserve</a> and also provides freelance consultancy services for Drupal websites, PHP applications and Linux servers.</p>
|
||
</div>
|
||
</main>
|
||
|
||
<div class="col-md-3">
|
||
<div class="panel badges text-center">
|
||
<a class="badge--da-member" href="https://assoc.drupal.org/membership" title="I’m a Drupal Association member.">
|
||
<img
|
||
src="//images.oliverdavies.uk/assets/images/da-individual-member.png"
|
||
alt="Drupal Association Individual Member"
|
||
width="152"
|
||
>
|
||
</a>
|
||
|
||
<a href="http://drupalcores.com/#opdavies">
|
||
<img
|
||
alt="I built Drupal 8 with hand holding a wrench on blue background"
|
||
src="//images.oliverdavies.uk/assets/images/drupal-8.jpg"
|
||
/>
|
||
</a>
|
||
|
||
<img
|
||
src="//images.oliverdavies.uk/assets/images/badges/acquia-certified-developer-drupal-8.png"
|
||
alt="Acquia Certified Developer - Drupal 8 Exam Badge"
|
||
height="147" width="147"
|
||
/>
|
||
|
||
<a href="http://conference.phpnw.org.uk/phpnw17">
|
||
<img src="//images.oliverdavies.uk/assets/images/badges/phpnw17.png" alt="">
|
||
</a>
|
||
</div>
|
||
<div class="availability panel panel-default">
|
||
<div class="panel-heading">Availability</div>
|
||
|
||
<div class="panel-body">
|
||
<p>
|
||
<i class="fa fa-thumbs-o-up text-warning"></i>
|
||
|
||
|
||
Currently have limited part-time capacity
|
||
</p>
|
||
<p>
|
||
<i class="fa fa-thumbs-o-down text-danger"></i>
|
||
|
||
Currently no spare full-time capacity.
|
||
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="latest-posts panel panel-default">
|
||
<div class="latest-posts__heading panel-heading">Latest blog posts</div>
|
||
|
||
<ul class="list-group">
|
||
<li class="post list-group-item">
|
||
<span class="post__title">
|
||
<a href="/blog/2017/06/09/introducing-the-drupal-meetups-twitterbot">
|
||
Introducing the Drupal Meetups Twitterbot
|
||
</a>
|
||
</span> -
|
||
<span class="post__date">9th June, 2017</span>
|
||
</li>
|
||
<li class="post list-group-item">
|
||
<span class="post__title">
|
||
<a href="/blog/2017/05/20/turning-drupal-module-into-feature">
|
||
Turning Your Custom Drupal Module into a Feature
|
||
</a>
|
||
</span> -
|
||
<span class="post__date">20th May, 2017</span>
|
||
</li>
|
||
<li class="post list-group-item">
|
||
<span class="post__title">
|
||
<a href="/blog/2017/05/15/drupalcamp-bristol-early-bird-tickets-sessions-sponsors">
|
||
DrupalCamp Bristol 2017 - Early Bird Tickets, Call for Sessions, Sponsors
|
||
</a>
|
||
</span> -
|
||
<span class="post__date">15th May, 2017</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
</div> </div>
|
||
<footer class="container">
|
||
<p class="copyright">
|
||
© 2010-2017 Oliver Davies. Built with <a href="https://sculpin.io">Sculpin</a>.
|
||
</p>
|
||
|
||
<div class="meetups">
|
||
<h2>Things that I organise</h2>
|
||
<ul>
|
||
<li class="meetups--drupal-bristol">
|
||
<a href="http://www.drupalbristol.org.uk" title="Drupal Bristol">
|
||
<img
|
||
src="//images.oliverdavies.uk/assets/images/meetups/drupal-bristol.jpeg"
|
||
alt="Drupal Bristol logo"
|
||
>
|
||
</a>
|
||
</li>
|
||
<li class="meetups--drupalcamp-bristol">
|
||
<a href="http://www.drupalcampbristol.co.uk" title="DrupalCamp Bristol">
|
||
<img
|
||
src="//images.oliverdavies.uk/assets/images/meetups/drupalcamp-bristol.png"
|
||
alt="DrupalCamp Bristol logo"
|
||
>
|
||
</a>
|
||
</li>
|
||
<li class="meetups--phpsw">
|
||
<a href="http://phpsw.uk" title="PHPSW">
|
||
<img
|
||
src="//images.oliverdavies.uk/assets/images/meetups/phpsw.jpeg"
|
||
alt="PHPSW logo"
|
||
>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="https://www.oliverdavies.uk/assets/js/site.js"></script>
|
||
|
||
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-11967257-1', 'auto'); ga('send', 'pageview');</script>
|
||
|
||
</body>
|
||
</html>
|