WordPress.org

Ready to get started?Download WordPress

Forums

add rotation to WP logo-slider plugin (2 posts)

  1. calex3710
    Member
    Posted 3 years ago #

    Newbie with JQuery, and I'm trying to rig the Word Press Logo-Slider plugin (which you can find here) to infinitely rotate in a loop. Right now it comes to the end of the images and stops with this code:

    `var displayWaitMessage=true; // Display a please wait message while images are loading?

    var activeImage = false;
    var imageGalleryLeftPos = true;
    var imageGalleryWidth = false;
    var imageGalleryObj = false;
    var maxGalleryXPos = false;
    var slideSpeed = -1;
    var imageGalleryCaptions = new Array();
    function startSlide(e)
    {
    if(document.all)e = event;
    var id = this.id;
    if(this.id=='arrow_right'){
    slideSpeedMultiply = Math.floor((e.clientX - this.offsetLeft) / 5);
    slideSpeed = -1*slideSpeedMultiply;
    slideSpeed = Math.max(-10,slideSpeed);
    }else{
    slideSpeedMultiply = 10 - Math.floor((e.clientX - this.offsetLeft) / 5);
    slideSpeed = 1*slideSpeedMultiply;
    slideSpeed = Math.min(10,slideSpeed);
    if(slideSpeed<0)slideSpeed=10;
    }
    }

    function releaseSlide()
    {
    var id = this.id;
    slideSpeed=-1;
    }

    function gallerySlide()
    {
    if(slideSpeed!=0){
    var leftPos = imageGalleryObj.offsetLeft;
    leftPos = leftPos/1 + slideSpeed;
    if(leftPos>maxGalleryXPos){
    leftPos = maxGalleryXPos;
    slideSpeed = 0;

    }
    if(leftPos<minGalleryXPos){
    leftPos = minGalleryXPos;
    slideSpeed=0;
    }

    imageGalleryObj.style.left = leftPos + 'px';
    }
    setTimeout('gallerySlide()',50);

    }

    function showImage()
    {
    if(activeImage){
    activeImage.style.filter = 'alpha(opacity=100)';
    activeImage.style.opacity = 1;
    }
    this.style.filter = 'alpha(opacity=50)';
    this.style.opacity = .5;
    activeImage = this;
    }

    function initSlideShow()
    {
    document.getElementById('arrow_left').onmousemove = startSlide;
    document.getElementById('arrow_left').onmouseout = releaseSlide;
    document.getElementById('arrow_right').onmousemove = startSlide;
    document.getElementById('arrow_right').onmouseout = releaseSlide;

    imageGalleryObj = document.getElementById('theImages');
    imageGalleryLeftPos = imageGalleryObj.offsetLeft;
    imageGalleryWidth = document.getElementById('galleryContainer').offsetWidth - 0;
    maxGalleryXPos = imageGalleryObj.offsetLeft;
    minGalleryXPos = imageGalleryWidth - document.getElementById('slideEnd').offsetLeft;
    var slideshowImages = imageGalleryObj.getElementsByTagName('IMG');
    for(var no=0;no<slideshowImages.length;no++){
    slideshowImages[no].onmouseover = showImage;
    }

    var divs = imageGalleryObj.getElementsByTagName('DIV');
    for(var no=0;no<divs.length;no++){
    if(divs[no].className=='imageCaption')imageGalleryCaptions[imageGalleryCaptions.length] = divs[no].innerHTML;
    }
    gallerySlide();
    }

    function showPreview(imagePath,imageIndex){
    var subImages = document.getElementById('previewPane').getElementsByTagName('IMG');
    if(subImages.length==0){
    var img = document.createElement('IMG');
    document.getElementById('previewPane').appendChild(img);
    }else img = subImages[0];

    if(displayWaitMessage){
    document.getElementById('waitMessage').style.display='inline';
    }
    document.getElementById('largeImageCaption').style.display='none';
    img.onload = function() { hideWaitMessageAndShowCaption(imageIndex-1); };
    img.src = imagePath;

    }
    function hideWaitMessageAndShowCaption(imageIndex)
    {
    document.getElementById('waitMessage').style.display='none';
    document.getElementById('largeImageCaption').innerHTML = imageGalleryCaptions[imageIndex];
    document.getElementById('largeImageCaption').style.display='block';

    }
    window.onload = initSlideShow;`

    It seems like I can get it to "bounce" (not a true rotation) from side to side by doing this:

    function gallerySlide()
    	{
    		if(slideSpeed!=0){
    			var leftPos = imageGalleryObj.offsetLeft;
    			leftPos = leftPos/1 + slideSpeed;
    			if(leftPos>maxGalleryXPos){
    				leftPos = maxGalleryXPos;
    				slideSpeed = -1;
    
    			}
    			if(leftPos<minGalleryXPos){
    				leftPos = minGalleryXPos;
    				slideSpeed=1;
    			}

    But that's not a true rotation. Anyone have any ideas for how to do this? Or any suggestions for a good infinite rotating slider plugin?

  2. Sanjeev Mishra
    Member
    Posted 3 years ago #

    Apart from the infinite loop, if you are looking for smooth scrolling rather than steps then you should take a look at Placid Slider WordPress plugin available on Slidervilla.com. That is especially developed for Logos and products slideshow. The infinite loop in steps is also possible with another slider named Roster Slider on SliderVilla.

Topic Closed

This topic has been closed to new replies.

About this Topic