Вставка якорей в фотогалерею Javascript - не работает? - PullRequest
Новая
       17

Вставка якорей в фотогалерею Javascript - не работает?

1 голос
/ 04 октября 2011

Я использую jAlbum (со скином lightflow ) для создания фотогалереи для моего сайта.Галерея загружается и находится в хорошем формате карусели.Я хотел бы добавить якоря таким образом, чтобы я мог напрямую связываться с определенной фотографией в галерее.Я пытался добавить якорь в HTML, но он не работает.Я предполагаю, что это потому, что при загрузке страницы галерея занимает несколько секунд для загрузки и, следовательно, не перенаправляет на якорь.Я легко могу ошибаться, и мне нужен совет о том, что я должен пытаться заставить работать якоря.Вот пример кода для якоря и самой фотографии: 

<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>

Я попытался установить ссылку на якорь, который я вставил (anchor3), и на идентификатор, вставленный jAlbum (item8), и ниРабота.

Есть несколько скриптов, которые управляют галереей и разместят их здесь:

Скрипт 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];
}

Скрипт 2 - "ContentFlow JS"Этот JS длинный и ради пространства я поместил ссылку непосредственно на файл JS здесь

Скрипт 3 - Этот скрипт находится на странице: 

<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>

Я не уверен, какие другие сценарии или CSS необходимы.Я ссылаюсь на тестовую галерею, с которой я работаю , если вам необходимо просмотреть страницу.Я опубликую дополнительную информацию, если потребуется.

Итак, как мне заставить якоря работать с этим?Я не очень хорош в javascript, поэтому, пожалуйста, объясните ответ против «вам нужно добавить эту функцию в сценарий», не объясняя.

Спасибо за любую помощь!

Ответы [ 2 ]

1 голос
/ 05 октября 2011

На сайте ContentFlow в разделе Документация -> элементы в виде ссылок разработчик специально заявляет, что «ни один элемент в элементе не может содержать якорей».может быть, кто-то может предложить способ обойти это ограничение.

0 голосов
/ 26 октября 2011

Я выяснил, каким образом создатель фотогалереи дал ответ: 

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
...