Back Home

Open Designs

Community. Driven.

    • CommentAuthor4evrblu
    • CommentTimeJan 22nd 2007
     
    Check out this page:

    http://www.freep.com/apps/pbcs.dll/article?AID=/20061227/NEWS04/612270379

    Notice the mini-photo gallery at the top right portion of the page? Click the image/thumbnail. Use the mouse to move the image around. Use the arrows to move forward and back in the image gallery.

    That is some COOL stuff. At least I think so.

    What powers it is a combination of css and SSI. I am unable to see the SSI, but the css is here:

    http://www.freep.com/assets/css/highslide.css

    Anyone game for reverse engineering this?

    I am trying!

    I would like to have that powering some tutorials on my site.

    bakie
    • CommentAuthorkystorms
    • CommentTimeJan 22nd 2007
     
    This is really cool, how can we learn about this?
    • CommentAuthor4evrblu
    • CommentTimeJan 22nd 2007
     
    I wrote the webmaster, but so far no response. Perhaps he is tightlipped about it, not wanting the code to get out.

    But I was digging and digging and so far came up with part of what seems to be powering it, and so far that is all I have.
    • CommentAuthorbigcortex
    • CommentTimeJan 22nd 2007
     
    There you go:

    http://vikjavev.no/highslide/
    • CommentAuthor4evrblu
    • CommentTimeJan 22nd 2007
     
    Thanks so much....this will be FUN!crazy
    •  
      CommentAuthoricyone
    • CommentTimeJan 23rd 2007 edited by icyone on the 23rd January 2007 at 03:43:55 EST
     
    there is also a Wordpress HighSlide JS Plugin clickyclick here although I have not tried it.
    • CommentAuthoroleman
    • CommentTimeJan 23rd 2007
     
    and a google search of 'highslide' turns up a quick link to ...
    http://vikjavev.no/highslide/
    •  
      CommentAuthorarwen54
    • CommentTimeJan 23rd 2007
     
    @icyone, thanks for the WP plugin link. I've bookmarked it smile
    • CommentAuthorJesseHeap
    • CommentTimeJan 23rd 2007
     
    Highslide JS is one of my favorite scripts. We use it for my wife's boutique wedding cake business.

    I released the Wordpress Highslide JS Plugin that you guys mentioned. It does help ease the process of inserting the proper javascript for highslide. Remember though that Highslide JS requires $30 for commercial use.

    Also the plugin *should* be compatible with Wordpress 2.1 - let me know if any of you are able to test it successfully with that version. I'm not upgrading for the next few days.
    •  
      CommentAuthoricyone
    • CommentTimeJan 23rd 2007
     
    Your welcome Karen, good job on the plugin JesseHeap and good to see you here.bakie
    • CommentAuthor4evrblu
    • CommentTimeJan 23rd 2007
     
    Posted By: JesseHeapHighslide JS is one of my favorite scripts. We use it for my wife'sboutique wedding cakebusiness.

    I released theWordpress Highslide JS Pluginthat you guys mentioned. It does help ease the process of inserting the proper javascript for highslide.Remember though that Highslide JS requires $30 for commercial use.

    Also the plugin*should*be compatible with Wordpress 2.1 - let me know if any of you are able to test it successfully with that version. I'm not upgrading for the next few days.


    I ran into several problems with the plugin unfortunatly.

    For example, I noticed that the QuickTag edit button was a broken image whenever I tried to edit a newly created post. The image button would work fine when creating a new post, but after saving that post and then re-opening it to make changes, the Highslide button was gone, leaving a gaping hole in the tool bar where it use to be :) Odd.

    Also, I noticed that the thumbnail had no style attributes. No mouseover/hover effects. And when the thumbnail was clicked, the large image opened in a new browser window. Wild.

    Hmmm.
    •  
      CommentAuthorREDiPixel
    • CommentTimeJan 23rd 2007
     
    Damn that is an awesome JS.
    • CommentAuthor4evrblu
    • CommentTimeJan 23rd 2007 edited by 4evrblu on the 23rd January 2007 at 14:21:46 EST
     
    It really is cool. I am playing with the original version. The plugin gave me some problems in that it was not working consitently.
    • CommentAuthorJesseHeap
    • CommentTimeJan 23rd 2007
     
    4evrblu,

    See responses below:

    I ran into several problems with the plugin unfortunatly.

    For example, I noticed that the QuickTag edit button was a broken image whenever I tried to edit a newly created post. The image button would work fine when creating a new post, but after saving that post and then re-opening it to make changes, the Highslide button was gone, leaving a gaping hole in the tool bar where it use to be :) Odd.


    What version of wordpress are you using? Hopefully you are using 2.1. It's interesting that you say the Quicktag button shows up as a "broken image". Since the quicktag buttons only show up in the non-visual editor mode (at least in 2.0), you shouldn't see a "broken image". Even if it wasn't showing up properly, it should just be blank without any broken image placeholder.

    Also, I noticed that the thumbnail had no style attributes. No mouseover/hover effects. And when the thumbnail was clicked, the large image opened in a new browser window. Wild.

    Hmmm.


    I didn't include any style attributes for the thumbnails. Those can be easily added through the highslide.css that's included with the plugin. For example, to add a white border on hover to the img add the following to highslide.css:

    .highslide:hover img {

    border: 2px solid white;
    }


    More information on styling is available at http://vikjavev.no/highslide/
    • CommentAuthor4evrblu
    • CommentTimeJan 23rd 2007 edited by 4evrblu on the 23rd January 2007 at 19:49:20 EST
     
    Jesse, thanks. I owe a small apology. The terms "broken image" are not correct. I chose them because I could not think of a better way to characterize it.

    When I say broken image, I meant that the "button" is not there, leaving a 1.5 inch blank space when in edit mode. New Posts, the Highslide "button" is there. In edit mode, it is gone, leaving a gap. I suppose a screen shot is in order.

    I am using 2.07

    As for thumb styles, I decided to try creating an external css of my own, using the above attributes you mentioned, and for some reason the thumbnails did not assume the attributes.

    <link rel="stylesheet" href="http://totalphysiqueonline.com/wordpress/wp-content/highslide/highslide-roundedwhite.css" type="text/css" /> was the line of code I used in the header template. It has allof the attributes found in the rounded-white outline format.

    I still had no success. I am certain I am doing something boneheaded.
    • CommentAuthorDeanStev
    • CommentTimeJan 24th 2007
     
    I have to say I love this gallery, as well as the one here: http://slideshow.triptracker.net/

    Does anyone know any others?