更改点击以跳过图库滑动照片库？

我刚刚从模板怪兽买了一个joomla模板。在主页上有照片库，通过点击它们跳到照片。更改点击以跳过图库滑动照片库？

我需要的是自动滑动照片库，您知道我的意思是自动跳过预设间隔中的照片。 http://www.mirelmuhendislik.com/home-tr/index.php 这是首页。

我试图通过

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

做到这一点，但它没有工作。我不知道为什么它没有工作是因为JavaScript嵌入joomla选项还是因为我的JavaScript代码？，我该如何解决这个问题？我很高兴地看到一些建议请帮助：/

来源

2010-09-04 Ahmet Yildirim

在这种情况下，你可以使用.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); 
});

来源

2010-09-04 08:59:33

感谢伟大的代码，但：/我的问题是非常不同的 – 2010-09-04 10:43:46

<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/ 这里当我添加脚本它移动了整个照相馆不仅大照片假设是跳过。我想下面的小照片保持静止

来源

2010-09-04 10:45:15

btw该ID =“滑块”没有在脚本默认我只是忘记删除抱歉 – 2010-09-04 10:46:29

当我访问您的网站时，我无法访问该页面，好像您仍在安装joomla，认为自动slideShow已经足够了=）。我会修改代码:) – 2010-09-04 11:08:05

它似乎在这个模板中，他们使用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) { ... } 
};

来源

2010-09-04 10:53:47

是啊有访问与www网站的问题。前缀确定问题解决我刚才编辑的jQuery galleriffic代码和更换

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

与

this.play();

你可能会问为什么我不只是设置自动启动= 1 以及我尝试过，但它没有工作我不知道为什么

来源

2010-09-04 11:26:31

更改点击以跳过图库滑动照片库？

回答

相关问题