If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 1 of 1
  1. #1
    Junior Member
    Join Date
    Feb 2012
    Member #
    Ive been driven mad trying to figure this out..I'm trying to use highslide as a way to show my images. But for whatever reason, whenever i choose to use one of my images instead of the ones that came with it, the image wont load and the loading.. .gif will infinatly show. Can any1 tell me what I'm doing wrong? I thought all my file paths were correct, maybe I'm wrong!

    (this is being done for my portfolio website. The folder i linked is located in a folder called Portfolio Website, the image thats mine is rainbow.jpg)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Highslide JS</title>

    1 ) Reference to the files containing the JavaScript and CSS.
    These files must be located on your server.

    <script type="text/javascript" src="highslide/highslide/highslide-with-gallery.js"></script>
    <link rel="stylesheet" type="text/css" href="highslide/highslide/highslide.css" />

    2) Optionally override the settings defined at the top
    of the highslide.js file. The parameter hs.graphicsDir is important!

    <script type="text/javascript">
    hs.graphicsDir = 'highslide/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




    3) Put the thumbnails inside a div for styling
    <div class="highslide-gallery">
    4) This is how you mark up the thumbnail image with an anchor tag around it.
    The anchor's href attribute defines the URL of the full-size image.
    <a id="thumb1" href="highslide/images/gallery1.jpg" class="highslide" onclick="return hs.expand(this)">
    <img src="highslide/images/gallery1.thumb.jpg" alt="Highslide JS"
    title="Click to enlarge" />

    5 (optional). This is how you mark up the caption. The correct class name is important.

    <div class="highslide-caption">

    Caption for the first image. This caption can be styled using CSS.

    6) Put the subsequent thumbnails in a hidden container. The thumbnailId parameter ensures
    these thumbnails zoom back out to the right thumbnail when closed.
    <div class="hidden-container">
    <a href="highslide/images/rainbow.jpg" class="highslide" onclick="return hs.expand(this, { thumbnailId: 'thumb1' })"></a>
    <div class="highslide-caption">
    Caption for the second image.

    <a href="highslide/images/gallery3.jpg" class="highslide" onclick="return hs.expand(this, { thumbnailId: 'thumb1' })"></a>

    <div class="highslide-caption">
    Caption for the third image.



Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts

Search tags for this page

highslide expand gallery from image


highslide js not working server

Click on a term to search for related topics.
All times are GMT -6. The time now is 11:51 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: