Home› Themes

Tweak Highslide Theme

drexnefex Member
in Themes
I've installed the Highslide theme and it's working perfectly.

What im trying to do is have the theme use the effect shown here: http://highslide.com/example-mini-gallery.html

Here's what i've done so far:
-Copied the highslide-with-gallery.js file to the JS directory in the Highslide theme.
-Copies all the other Highslide JS and Graphic files included in the Highslide download to the proper dir under the highslide theme dir.
-Replaced highslide.js with highslide-with-gallery.js in the header of the album.php file.
-Added the following code to the album.php file
<script type="text/javascript">
hs.graphicsDir = '<?= $_zp_themeroot ?>/highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'rounded-white';
hs.fadeInOut = true;
hs.numberPosition = 'caption';
hs.dimmingOpacity = 0.75;

// Add the controlbar
if (hs.addSlideshow) hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
opacity: .75,
position: 'bottom center',
hideOnMouseOut: true
}
});
window.onload = function() {
hs.preloadImages();
}
</script>

Here's a link to an album page in my gallery: http://www.nwbroweather.com/zenphoto/index.php?album=surf/20080304_Oahu

Everything seems to be working fine except the Control Graphics for Next, Previous, Play, Move, Fullsize and Close show up as text links.

Any idea why the Control Graphics aren't showing up?

Comments

  • fretzl Administrator, Developer
    Looks like a CSS issue.
    I think the path to your `highslide.css` is not correct or the file isn't present at all.
    I know I can't find it anyway :-)
  • drexnefex Member
    I added the following to the album.php file and it does the same thing:
    <link rel="stylesheet" type="text/css" href="<?= $_zp_themeroot ?>/highslide/highslide.css" />

    Here's my album.php file:

    <?php
    if (!defined('WEBPATH')) die();
    $themeResult = getTheme($zenCSS, $themeColor, 'light');
    $firstPageImages = normalizeColumns('2', '6');
    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title><?php printGalleryTitle(); ?> | <?php echo getAlbumTitle();?></title>
    <link rel="stylesheet" href="<?php echo $zenCSS ?>" type="text/css" />
    <link rel="stylesheet" type="text/css" href="<?= $_zp_themeroot ?>/highslide/highslide.css" />

    <?php printRSSHeaderLink('Album',getAlbumTitle()); ?>
    <?php zenJavascript(); ?>
    <script type="text/javascript" src="<?= $_zp_themeroot ?>/highslide/highslide-full.js"></script>

    <script type="text/javascript">
    hs.graphicsDir = '<?= $_zp_themeroot ?>/highslide/graphics/';
    hs.align = 'center';
    hs.transitions = ['expand', 'crossfade'];
    hs.outlineType = 'rounded-white';
    hs.fadeInOut = true;
    hs.dimmingOpacity = 0.75;

    // Add the controlbar
    hs.addSlideshow({
    //slideshowGroup: 'group1',
    interval: 5000,
    repeat: false,
    useControls: true,
    fixedControls: 'fit',
    overlayOptions: {
    opacity: .75,
    position: 'bottom center',
    hideOnMouseOut: true
    }
    });

    </script>

    <script type="text/javascript">
    window.onload = function() {
    hs.preloadImages();
    }
    </script>

    </head>

    <body>
    <?php printAdminToolbox(); ?>

    <div id="main">

    <div id="gallerytitle">
    <h2><span>" title="Albums Index"><?php echo getGalleryTitle();?> | <?php printParentBreadcrumb(); ?></span> <?php printAlbumTitle(true);?></h2>
    </div>

    <div id="padbox">

    <?php printAlbumDesc(true); ?>

    <div id="albums">
    <?php while (next_album()): ?>
    <div class="album">

    <div class="thumb">
    " title="View album: <?php echo getAlbumTitle();?>"><?php printAlbumThumbImage(getAlbumTitle()); ?>
    </div>
    <div class="albumdesc">
    <h3>" title="View album: <?php echo getAlbumTitle();?>"><?php printAlbumTitle(); ?></h3>
    <small><?php printAlbumDate(""); ?></small>
    <p><?php printAlbumDesc(); ?></p>
    </div>
    <p style="clear: both; "></p>
    </div>
    <?php endwhile; ?>
    </div>

    <div id="highslide-container"></div>

    <div id="images">
    <?php while (next_image(false, $firstPageImages)): ?>
    <div class="image">
    <div class="imagethumb">" class="highslide" onclick="return hs.expand(this)" title="<?=getImageTitle();?>"><?php printImageThumb(getImageTitle()); ?></div>
    </div>
    <?php endwhile; ?>
    </div>

    <!--
    (optional). This is how you mark up the caption. The id contains the words 'caption-for-',
    then the id of the img tag above.
    -->

    <div class="highslide-caption" id="caption-for-thumb1">This caption can be styled using CSS.</div>

    <?php printPageListWithNav("« prev", "next »"); ?>
    <?php printTags(true, 'Tags: '); ?>

    </div>

    </div>

    <div id="credit"><?php printRSSLink('Album', '', 'Album RSS', ''); ?> | ?p=archive">Archive View | Powered by zenphoto</div>

    </body>
    </html>
  • pauschpage Member
    hi, i tried to do the same thing, has anybody a solution already?
  • fretzl Administrator, Developer
    The Highside theme comes with a very basic configuration. No support for a slideshow and no buttons.

    Visit the Highslide editor http://highslide.com/editor/ and configure it the way you want it.
    When done click the publish button and in the next window accept the licence conditions.
    You can then download a ZIP file with all the files/folders necessary for your configuration.(there's also a good tutorial about what to do on the same page)
    Replace the old files with the new ones.(no need use the sample images ofcourse)
    You'll probably have to change some paths, do some reading and testing... ;-)

    Succes
  • acrylian Administrator, Developer
    Also note that highslide is only free for personal use...
Sign In or Register to comment.