Менять клик, чтобы пропустить галерею на скользящую фотогалерею? - PullRequest
Новая
       1

Менять клик, чтобы пропустить галерею на скользящую фотогалерею?

1 голос
/ 04 сентября 2010

Я только что купил шаблон Joomla от шаблона монстра.На главной странице есть фотогалерея, которая переходит к фотографиям, нажимая на них.

Мне нужна самодвижущаяся фотогалерея, вы понимаете, что я имею в виду, автоматически пропуская фотографии через заданный интервал.http://www.mirelmuhendislik.com/home-tr/index.php это домашняя страница.

Я пытался сделать это 

function clicker() {
document.getElementById('photo2').click();
}
setInterval("clicker()",5000);

, но это не сработало.я не знаю, почему это не сработало, это из-за вариантов встраивания javascript в Joomla или потому, что мой код javascript ??и как я могу решить эту проблему?Я был бы рад увидеть некоторые предложения, пожалуйста, помогите: /

Ответы [ 4 ]

1 голос
/ 04 сентября 2010

В этом сценарии вы можете использовать .bind() и .trigger() 

$(function() {
   setInterval(function() {
      $('#slider').trigger('slide');  //triggers 'slide'
   },2000);  //Performs sliding every 2 seconds
});

$('#slider').bind('slide', function() {
   //write your slide methods
});

Редактировать : код и демонстрационная страница:http://jsbin.com/efoje4

HTML : 

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Hello world !!</title>
  <style type="text/css">
    div {margin:0px auto;padding:0px; width:300px;height:200px; overflow:hidden; }
    ul { margin :0px; padding:0px; list-style:none; width:1200px;height:200px;}
    li{float : left;margin:0px padding:0px; width:300px;height:200px; }
    img { margin:0px padding:0px; width:300px;height:200px; }    
  </style>

</head>
<body>
  <div>
    <ul id="slider">
      <li>
          <img src="http://mystuffspace.com/graphic/adorable-puppies.jpg"/>
      </li>
      <li>
          <img src="http://2.bp.blogspot.com/_TP5pGCYHvfg/SyMRSFukqJI/AAAAAAAAA0Y/yIP62DYXOP8/s400/Puppies.jpg"/>
      </li>
      <li>
          <img src="http://temunot.files.wordpress.com/2008/11/4-cute-puppies-wallpaper-640x480.jpg" />
      </li>
      <li>
          <img src="http://mystuffspace.com/graphic/puppies-2.jpg" />
      </li>
    </ul>
  </div>
</body>
</html>

JavaScript : 

var margin  = 0, slider = $('#slider'), width = 300;

$(document).ready(function() {
  setInterval(function() {
      slider.trigger('slide');
  },2000);
});

 slider.bind('slide',function() {
  if(margin <= slider.width() *(-1) + width) {
      margin = 0;
  }else if(margin <= slider.width()) {
    margin -= width;  
  }
   slider.animate({marginLeft : margin},500);
});
0 голосов
/ 04 сентября 2010

да, есть проблема с доступом к сайту с www.префикс ок, проблема решена, я только что отредактировал код jquery galleriffic и заменил 

if(this.autoStart) {
this.play();
}

на 

this.play();

Вы можете спросить, почему я просто не установил autoStart = 1, хорошо, я попробовал, но это не сработалоя не знаю почему

0 голосов
/ 04 сентября 2010

похоже в этом шаблоне они использовали библиотеку jquery galleriffic может быть, мы можем настроить его на автоматическое скольжение в настройках ниже. 

var defaults = {
    delay:                     3000,
    numThumbs:                 20,
    preloadAhead:              40, // Set to -1 to preload all images
    enableTopPager:            false,
    enableBottomPager:         true,
    maxPagesToShow:            7,
    imageContainerSel:         '',
    captionContainerSel:       '',
    controlsContainerSel:      '',
    loadingContainerSel:       '',
    renderSSControls:          true,
    renderNavControls:         true,
    playLinkText:              'Play',
    pauseLinkText:             'Pause',
    prevLinkText:              'Previous',
    nextLinkText:              'Next',
    nextPageLinkText:          'Next &rsaquo;',
    prevPageLinkText:          '&lsaquo; Prev',
    enableHistory:             false,
    enableKeyboardNavigation:  true,
    autoStart:                 false,
    syncTransitions:           false,
    defaultTransitionDuration: 1000,
    onSlideChange:             undefined, // accepts a delegate like such: function(prevIndex, nextIndex) { ... }
    onTransitionOut:           undefined, // accepts a delegate like such: function(slide, caption, isSync, callback) { ... }
    onTransitionIn:            undefined, // accepts a delegate like such: function(slide, caption, isSync) { ... }
    onPageTransitionOut:       undefined, // accepts a delegate like such: function(callback) { ... }
    onPageTransitionIn:        undefined, // accepts a delegate like such: function() { ... }
    onImageAdded:              undefined, // accepts a delegate like such: function(imageData, $li) { ... }
    onImageRemoved:            undefined  // accepts a delegate like such: function(imageData, $li) { ... }
};
0 голосов
/ 04 сентября 2010 
<div class="extra_wrapper">
<div id="gallery" class="content">
<div class="slideshow-container">
<div id="loading" class="loader"></div>
<div id="slideshow" class="slideshow"></div>
</div>
</div>
<div id="thumbs" class="navigation">
<ul id="slider" class="thumbs noscript">
<li> <a class="thumb" name="leaf" href="images/stories/big_pic1.png"> <img src="images/stories/gallery_pic1.jpg" /></a></li>
<li> <a class="thumb" name="leaf" href="images/stories/big_pic2.png"> <img src="images/stories/gallery_pic2.jpg" /></a></li>
<li> <a class="thumb" name="leaf" href="images/stories/big_pic3.png"> <img src="images/stories/gallery_pic3.jpg" /></a></li>
<li> <a class="thumb" name="leaf" href="images/stories/big_pic4.png"> <img src="images/stories/gallery_pic4.jpg" /></a></li>
<li class="last"> <a class="thumb" name="leaf" href="images/stories/big_pic5.png"> <img src="images/stories/gallery_pic5.jpg" /></a></li>
</ul>
</div>
</div>

это скрипт модуля, который запускает фотогалерею на моем сайте http://mirelmuhendislik.com/home-tr/ здесь, когда я добавляю ваш скрипт, он перемещал всю фотогалерею, а не только большие фотографии, которые, как предполагается, пропускаютЯ хочу, чтобы маленькие фотографии ниже оставались неподвижными

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...