Question

I am using jAlbum(with the lightflow skin) to create a photo gallery for my website. The gallery loads and is in a nice carousel format. I would like to add anchors that way I can link directly to a certain photo within the gallery. I tried to add an anchor in the HTML yet it does not work. I assume this is because when the page loads the gallery takes a few seconds to load and thus does not redirect to the anchor. I easily could be wrong and need some advice on what I should try to get anchors to work. Here is an example code for the anchor and the photo itself:

<div class="item">
    <a name="anchor3" id="anchor3"></a>
      <img class="content hidden" src="thumbs/tree-w-sun.jpg" alt="Gifts" />
            <div class="ref hidden">item8</div>
            <div class="caption"><h3>Gifts</h3></div>
            <div class="comment hidden"></div>
            <div class="author hidden"></div>
            <div class="params hidden"></div>
            <div class="info hidden"><div><p>Artist: UBhapE2</p></div></div>
            <div class="thumbWidth hidden">261</div>
            <div class="thumbHeight hidden">350</div>
            <a id="item8" class="lightwindow hidden" title="<h3>Gifts</h3>" 
               rel="gal[cat]" href="slides/tree-w-sun.jpg" ></a>
    </div>

I have tried linking to the anchor I inserted (anchor3) and to the id inserted by jAlbum (item8) and neither work.

There are a few scripts that control the gallery and will put them here:

Script 1 – “Lightflow JS”

var LightFlowGlobal = {};

function getParam( name ){
 name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
 var regexS = "[\\?&]"+name+"=([^&#]*)";
 var regex = new RegExp( regexS );
 var results = regex.exec( window.location.href );
 if( results == null )
   return "";
 else
   return results[1];
}

Script 2 – “ContentFlow JS” This JS is long and for sake of space I put the link directly to the JS file here

Script 3 – This script is in the page:

<script language="JavaScript" type="text/javascript">
var startItem = getParam('p');
if(startItem == "") startItem = "first";
if(startItem.isNaN) startItem = "'"+startItem+"'";

new ContentFlow('contentFlow', {
    reflectionColor: "#000000",
    maxItemHeight: 350,
    marginTop: 50,
    reflectionHeight: 0.25,
    endOpacity: 1,
    startItem: startItem,
    circularFlow: false,
    stretchThumbs: false
});


function lightWindowInit() {
    LightFlowGlobal.myLightWindow = new lightwindow({
            infoTabName : "More Info",
            rootPath: "res/lightwindow/",
            loadingTxt: "loading or ",
            cancelTxt: "cancel",
            playTxt: "start slideshow",
            stopTxt: "stop slideshow",
            slowerTxt: "slower by 1 second",
            fasterTxt: "faster by 1 second",
        downloadSlideTxt: "Download",
        downloadSlide: false,
            showSlideshow: false,
            slideshowDuration: 5000,
        circular: false,
        animationDuration: 0.25
        });
}
LightFlowGlobal.readyJS=true;
var rootPath = ".";

</script>

I am unsure what other scripts or css is needed. I link to the test-gallery I am working with here if you need to view the page. I will post additional info if requested.

So now how do I get anchors to work with this? I am not that great at javascript so please explain the answer vs “you need to add this function to the script” without explaining.

Thank Your for any and all assistance!

Answer 1

I figured out a way answer was provided by the Photo Gallery Creater:

It's not only the js. You'd need to pass a parameter to AddThis in order to 
identify the image. Without it, you wouldn't know which image has been clicked. 
The best would be to use LightFlow's query paramter p=index, where index is the 
number of the image of the current web page.
For example, the following link would focus the 4th image of the gallery 
(index begins at 0): http://your-domain.com/album/index.html?p=3