Home› Plugins

using slide show with integrated wp theme

halinab Member
in Plugins
I've managed to integrate zenphoto with a wordpress theme but would like to get the slideshow component working.... the procedure sais to include printSlideShowJS in the head but how do i do that with an integerated wordpress theme...have attempted a few things but its not working correctly..
blog.halinasplace.net.au/blog

Comments

  • acrylian Administrator, Developer
    Note that the instruction for that is meant for Zenphoto themes. I never tried or even know if that would work within a Wordpress theme at all.

    You will have to call the Zenphoto template functions and the slideshow plugin functions. But since the "Zenphoto as a plugin" way described on our site does not work wiht current Wordpress versions you might be out of luck.

    In short you have to figure it out yourself, sorry.
  • halinab Member
    I've given up on trying to get slideshow to work but have copied zpgallerific colorbox use of the slideshow and have managed to get most of it working but the css components...some help to get the tumbnails going accross the top and the slideshow
    down the bottom would be appreciated.... also the comments have not worked since putting the js in the header of wp code

    this is the code

    `
    <?php if (getNumImages() > 0){ ?>












    <?php } else { ?>
    <?php include("album_alt.php"); ?>
    <?php } ?>
    `
    and this is the css

    `
    ul.thumbs,#image-stat ul {clear: both;margin: 0;padding: 0;}
    ul.thumbs li,#image-stat li{float: left;padding: 0;margin: 5px 10px 5px 0;list-style: none;}
    ul#no-gal-ul,#image-stat ul{margin:0 auto 20px auto;text-align:center;width:820px;}
    ul.thumbs li.no-gal-li{}
    a.thumb,#image-stat a {padding: 2px;display: block;border: 1px solid #4a4a4a;}
    ul.thumbs li.selected a.thumb {background: #fff;}
    a.thumb:focus,#image-stat a:focus {outline: none;}
    a.thumb:hover,#image-stat a:hover {border: 1px solid #ccc;}
    ul.thumbs img,#image-stat img {border: none;display: block;}
    div.pagination a, div.pagination span.current, div.pagination span.ellipsis {border-color: #4a4a4a;
    -moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;}
    div.pagination {clear: both;}
    div.navigation div.top {margin-bottom: 12px;height: 11px;}
    div.navigation div.bottom {padding-top:5px;}
    div.navigation a.prev {}
    div.navigation a.next {}
    div.pagination a, div.pagination span.current, div.pagination span.ellipsis {display: block;float: left;margin-right: 2px;padding: 2px 7px 2px 7px;border: 1px solid;}
    div.pagination a:hover {text-decoration: none;background-color: #000;border-color:#ccc;}
    div.pagination span.current {font-weight: bold;background-color: #fff;border-color: #fff;color: #222;}
    div.pagination span.ellipsis {border: none;padding: 5px 0 3px 2px;}

    div.caption {position:relative;top:0;left:0;height:25px;width: 50px;}
    div.caption-container {position:relative;height:25px;width: 50px;}
    `
  • fretzl Administrator, Developer
    Looks like the slideshow itself is working just fine.
    You'll need to make some adjustments in your layout and/or CSS to keep it from moving up and down.
  • halinab Member
    i copied the code from zpgallerific, i'm not strong on css which parts do i need to look at to fix the layout...i've fiddled with some parts so far...

    `
    <?php if (getNumImages() > 0){ ?>












    <?php } else { ?>
    <?php include("album_alt.php"); ?>
    <?php } ?>
    `
    and this is the css

    `
    ul.thumbs,#image-stat ul {clear: both;margin: 0;padding: 0;}
    ul.thumbs li,#image-stat li{float: left;padding: 0;margin: 5px 10px 5px 0;list-style: none;}
    ul#no-gal-ul,#image-stat ul{margin:0 auto 20px auto;text-align:center;width:820px;}
    ul.thumbs li.no-gal-li{}
    a.thumb,#image-stat a {padding: 2px;display: block;border: 1px solid #4a4a4a;}
    ul.thumbs li.selected a.thumb {background: #fff;}
    a.thumb:focus,#image-stat a:focus {outline: none;}
    a.thumb:hover,#image-stat a:hover {border: 1px solid #ccc;}
    ul.thumbs img,#image-stat img {border: none;display: block;}
    div.pagination a, div.pagination span.current, div.pagination span.ellipsis {border-color: #4a4a4a;
    -moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;}
    div.pagination {clear: both;}
    div.navigation div.top {margin-bottom: 12px;height: 11px;}
    div.navigation div.bottom {padding-top:5px;}
    div.navigation a.prev {}
    div.navigation a.next {}
    div.pagination a, div.pagination span.current, div.pagination span.ellipsis {display: block;float: left;margin-right: 2px;padding: 2px 7px 2px 7px;border: 1px solid;}
    div.pagination a:hover {text-decoration: none;background-color: #000;border-color:#ccc;}
    div.pagination span.current {font-weight: bold;background-color: #fff;border-color: #fff;color: #222;}
    div.pagination span.ellipsis {border: none;padding: 5px 0 3px 2px;}

    div.caption {position:relative;top:0;left:0;height:25px;width: 50px;}
    div.caption-container {position:relative;height:25px;width: 50px;}
    `
  • fretzl Administrator, Developer
    Like acrylian said you have to figure that out yourself, sorry.
    And yes, it will require some learning ;-)
  • halinab Member
    took some time to go through the css - but after i included all the js in the header of wordpress that zpgallerific used and then copied the code and the relevent css bits i got it going...still probably needs some tweeking but its pretty much there
Sign In or Register to comment.