Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In with Google Sign In with OpenID

links on slideshow

edited January 2013 in Apps

How can I assign a link to each slide in the slideshow?

Would be difficult to use a different PHP slideshow?


  • The built-in slideshow is very simple and just reads a folder for the files it should include, so it doesn't have a way to specify links for the images. However, you could create a custom slideshow handler with links like this:

    1. Create a file named apps/myapp/handlers/slideshow.php with the following code. This is where you specify the list of images and links.

    // Edit the list of images and links here
    $files = array (
        '/files/homepage/photo1.jpg' => '/link-to-here',
        '/files/homepage/photo2.jpg' => '/another-link'
    $page->add_script ('/apps/filemanager/js/jquery.cycle.all.min.js');
    echo $tpl->render ('myapp/slideshow', array ('files' => $files));

    2. Create the view template to render the slideshow, named apps/myapp/views/slideshow.html with the following code (based on the built-in slideshow code).

    $(function () {
        $('#my-slideshow').cycle ({
            fx: 'fade',
            pager: '#my-slideshow-nav',
            timeout: 6000
    #my-slideshow-nav {
        margin-left: 48%;
        margin-top: 10px;
    #my-slideshow-nav a {
        display: block;
        width: 10px;
        height: 10px;
        background: url(/apps/filemanager/css/notcurrent.png) no-repeat;
        float: left;
        text-indent: -9999px;
        border: 0;
        margin-right: 3px;
        text-decoration: none;
    #my-slideshow-nav a.activeSlide {
        background: url(/apps/filemanager/css/current.png) no-repeat;
    <div id="my-slideshow">
    {% foreach files as file, link %}
        <a href="{{ link }}"><img src="{{ file }}" style="display: none" /></a>
    {% end %}
    <div id="my-slideshow-nav"></div>
    <br style="clear: both" />

    3. Create a file named apps/myapp/conf/embed.php with the following settings. This tells Elefant to make your custom slideshow handler available through Elefant's dynamic objects menu in the wysiwyg editor.

    ; <?php /*
    label = "My Custom Slideshow"
    icon = picture
    ; */ ?>

    In place of step 3, you can also embed your new slideshow into the design template with the tag {! myapp/slideshow !} just like the built-in slideshow is included in the default template.

    Anyway, let me know how it goes!

Sign In or Register to comment.