JavaScript - Uggh: Images Won't Load Into Slideshow. I'm Out Of Ideas

Hi everybody, I have written a javascript slideshow with pause-play-next-previous buttons, but the images are too many and users have to wait too long especially with slower connections - i wonder if anybody can suggest a way to implement the script with fast preloading of the first few images, increment preloading or a similar trick. I will copy my code below but i also copy first this link:

http://www.javascriptkit.com/script/...entslide.shtml

which is an example of increment loading slideshow working fine! my problem is i am quite new to javascript and i wouldnt know how to customize it in order to take away the link function, that i dont need, and add captions and buttons etc.

Any advice in one of the two directions (working on my own script below or customizing the linked one above) would be very very appreciated!
Also alternative ideas (i.e. some solutions using pure CSS) are welcome!
I do know some jquery plugin could do but i am trying to go more into the code, even though i still need a lot of advices and tutorials, the goal is solving this specific problem but also learning! Thx a lot in advance.

Here my code (just 2 images here in the list to make it shorter for you, the complete list is more than 50 pics!):

Code:

<script language="JavaScript">
<!--
var interval = 8000;
var random_display = 0;
var imageDir = "portraits/";
var imageNum = 0;

didascalieArray = new Array();
imageArray = new Array();
didascalieArray[imageNum] = "caption1";
imageArray[imageNum++] = new imageItem(imageDir +
"image1.jpg");
didascalieArray[imageNum] = "caption2";
imageArray[imageNum++] = new imageItem(imageDir +
"image2.jpg");


var totalImages = imageArray.length;

function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}

function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}

function getNextImage() {
if (random_display) {
imageNum = randNum(0, totalImages-1);
}

else {
imageNum = (imageNum+1) % totalImages;
}
var new_image = get_ImageItemLocation(imageArray

[imageNum]);

document.getElementById("didascalia").innerHTML =

didascalieArray[imageNum];
return(new_image);
}

function getPrevImage() {
if(imageNum-1 < 0) {
imageNum = totalImages-1;
}
else
imageNum = (imageNum-1) % totalImages;
var new_image = get_ImageItemLocation(imageArray

[imageNum]);
document.getElementById("didascalia").innerHTML =

didascalieArray[imageNum];
return(new_image);
}

function prevImage(place) {
var new_image = getPrevImage();
document[place].src = new_image;
}

function switchImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "switchImage('"+place+"')";
timerID = setTimeout(recur_call, interval);
}

// -->

</script>

Hi, i have a slideshow that works.
I want to store my images in a folder images/slideshow/1.jpg for all my images up to 10.jpg.

I have tried to adjust the code so i can store the images in a folder but the code cant find the images.

Any help would be greatly appreciated, thank you.


I have this code in the head section:

<script type="text/javascript">
thisImg=1;
imgCt=10;
function newSlide(direction) {
thisImg = thisImg + direction;
if(thisImg <1) {thisImg = imgCt;}
if(thisImg > imgCt) {thisImg = 1;}
document.getElementById('slideshow').src=thisImg + '.jpg';
}
</script>




I have this code in the body section:

<form>
<img src="1.jpg" id="slideshow" alt="Photo slideshow" width="213" height="184" >
<p>
<input type="button" value="<-- Previous photo"
onClick="newSlide(-1)">
<input type="button" value="Next photo -->"
onClick="newSlide(1)" >
</p>
</form>

Hi

I have set an overall size for the Slideshow 2! div in the CSS file as follows:

.slideshow {
height:250px;
margin: 0 auto;
width:420px;
}

I would then like all the images I use in the slideshow to fit within this area (i.e. 420 x 250). The images will all have a height of 250px, but different widths. For widths less than 420px I would like the image to be positioned centrally in the div along the horizontal axis as in the following image:



for images wider than 420px I would like them to be positioned centrally in the div along the vertical axis as in the following image:



I wonder if it's possible to achieve this with Slideshow 2! and if not, whether another script will help me achieve this?

Thanks

Nick

Alrighty so here's what I have.
Live example:
http://www.thestrikeforum.com/ex/

It's a image slideshow that dynamically gets all the images (via php) in the current directory and puts them into the slideshow array. The array then randomly displays the images in the slideshow (via javascript).

There are 5 images in the folder rotateimage which also has the php script getimages.php in it.

Currently only the first image fades in however I want all the images to fade in as the first one does.

Codes:

Php script that gets all the images for the array:
PHP Code:
<?

//PHP SCRIPT: getimages.php

Header("content-type: application/x-javascript");



//This function gets the file names of all images in the current directory

//and ouputs them as a JavaScript array

function returnimages($dirname=".") {

$pattern="(\.jpg$)|(\.png$)|(\.jpeg$)|(\.gif$)"; //valid image extensions

$files = array();

$curimage=0;

if($handle = opendir($dirname)) {

while(false !== ($file = readdir($handle))){

if(eregi($pattern, $file)){ //if this file is a valid image

//Output it as a JavaScript array element

echo 'galleryarray['.$curimage.']="'.$file .'";';

$curimage++;

}

}



closedir($handle);

}

return($files);

}



echo 'var galleryarray=new Array();'; //Define array in JavaScript

returnimages() //Output the array elements containing the image file names

?>



Main html page with the javascript:


Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>



<script src="rotateimage/getimages.php"></script>



<script type="text/javascript">



var curimg=0

var max=galleryarray.length

var random=Math.floor(Math.random()*max)





function rotateimages(){

document.getElementById("slideshow").setAttribute("src", "rotateimage/"+galleryarray[random])

//curimg=(curimg<galleryarray.length-1)? curimg+1 : 0

random=Math.floor(Math.random()*max)

}



function initImage() {

  imageId = 'slideshow';

  image = document.getElementById(imageId);

  setOpacity(image, 0);

  image.style.visibility = 'visible';

  fadeIn(imageId,0);

}



function setOpacity(obj, opacity) {

  opacity = (opacity == 100)?99.999:opacity;

  

  // IE/Win

  obj.style.filter = "alpha(opacity:"+opacity+")";

  

  // Safari<1.2, Konqueror

  obj.style.KHTMLOpacity = opacity/100;

  

  // Older Mozilla and Firefox

  obj.style.MozOpacity = opacity/100;

  

  // Safari 1.2, newer Firefox and Mozilla, CSS3

  obj.style.opacity = opacity/100;

}



function fadeIn(objId,opacity) {

  if (document.getElementById) {

    obj = document.getElementById(objId);

    if (opacity <= 100) {

      setOpacity(obj, opacity);

      opacity += 10;

      window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);

    }

  }

}



window.onload=function(){

setInterval("rotateimages()", 2500)

initImage()

}



</script>



<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Test</title>



</head>



<body>
<img src="rotateimage/pic1.jpg" name="slideshow" width="350" height="350" id="slideshow"/>
</body>

</html>

If anyone could assist me in doing so or can help me find a better way to do the fading images for the slideshow feel free to share.. here's the main page code WITHOUT the fading code:




Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>



<script src="rotateimage/getimages.php"></script>



<script type="text/javascript">



var curimg=0

var max=galleryarray.length

var random=Math.floor(Math.random()*max)





function rotateimages(){

document.getElementById("slideshow").setAttribute("src", "rotateimage/"+galleryarray[random])

//curimg=(curimg<galleryarray.length-1)? curimg+1 : 0

random=Math.floor(Math.random()*max)

}






window.onload=function(){

setInterval("rotateimages()", 2500)

initImage()

}



</script>



<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Test</title>



</head>



<body>
<img src="rotateimage/pic1.jpg" name="slideshow" width="350" height="350" id="slideshow"/>
</body>

</html>

PLEASE! I NEED HELP!
I inherited this problem from a client who insists on keeping this template. I've got all of the images in the correct folder, the slideshow css is correct, but I'm not sure how to edit the Slideshow.js file to show the 2 additional images. The first 3 images work perfectly. I was able to swap custom images for the original images without a problem.
Here is the Slideshow.js code

Code:

 var $$ = $.fn;

$$.extend({
  SplitID : function()
  {
    return this.attr('id').split('-').pop();
  },

  Slideshow : {
    Ready : function()
    {
      $('div.tmpSlideshowControl')
        .hover(
          function() {
            $(this).addClass('tmpSlideshowControlOn');
          },
          function() {
            $(this).removeClass('tmpSlideshowControlOn');
          }
        )
        .click(
          function() {
            $$.Slideshow.Interrupted = true;

            $('div.tmpSlide').hide();
            $('div.tmpSlideshowControl').removeClass('tmpSlideshowControlActive');

            $('div#tmpSlide-' + $(this).SplitID()).show()
            $(this).addClass('tmpSlideshowControlActive');
          }
        );

      this.Counter = 1;
      this.Interrupted = false;

      this.Transition();
    },

    Transition : function()
    {
      if (this.Interrupted) {
        return;
      }

      this.Last = this.Counter - 1;

      if (this.Last < 1) {
        this.Last = 3;
      }

      $('div#tmpSlide-' + this.Last).fadeOut(
        'slow',
        function() {
          $('div#tmpSlideshowControl-' + $$.Slideshow.Last).removeClass('tmpSlideshowControlActive');
          $('div#tmpSlideshowControl-' + $$.Slideshow.Counter).addClass('tmpSlideshowControlActive');
          $('div#tmpSlide-' + $$.Slideshow.Counter).fadeIn('slow');

          $$.Slideshow.Counter++;

          if ($$.Slideshow.Counter > 3) {
            $$.Slideshow.Counter = 1;
          }

          setTimeout('$$.Slideshow.Transition();', 4000);
        }
      );
    }
  }
});

$(document).ready(
  function() {
    $$.Slideshow.Ready();
  }
);

The html code for the pages looks like this:
Code:

 <div id='tmpSlideshow'> 
              <div id='tmpSlide-1' class='tmpSlide'> 
                <div class="banner1"> 
                  <div class="clear"> 
                    <div class="banner_inner"> 
                      <div class="clear"> 
                        <p>Care for the whole family</p>
                      </div>
                      <div class="clear"><img src="images/specer.gif" width="1" height="20" alt="" /></div>
                      <div class="clear"> 
                        <ul>
                          <li>Newborn Care</li>
                          <li>Children</li>
                          <li>Teenagers</li>
                          <li>Young Adults</li>
                          <li>Seniors</li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div id='tmpSlide-2' class='tmpSlide'> 
                <div class="banner2"> 
                  <div class="clear"> 
                    <div class="banner_inner"> 
                      <div class="clear"> 
                        <p>Care for the whole family</p>
                      </div>
                      <div class="clear"><img src="images/specer.gif" width="1" height="20" alt="" /></div>
                      <div class="clear"> 
                        <ul>
                          <li>Newborn Care</li>
                          <li>Children</li>
                          <li>Teenagers</li>
                          <li>Young Adults</li>
                          <li>Seniors</li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div id='tmpSlide-3' class='tmpSlide'> 
                <div class="banner3"> 
                  <div class="clear"> 
                    <div class="banner_inner"> 
                      <div class="clear"> 
                        <p>Care for the whole family</p>
                      </div>
                      <div class="clear"><img src="images/specer.gif" width="1" height="20" alt="" /></div>
                      <div class="clear"> 
                        <ul>
                          <li>Newborn Care</li>
                          <li>Children</li>
                          <li>Teenagers</li>
                          <li>Young Adults</li>
                          <li>Seniors</li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div id='tmpSlide-4' class='tmpSlide'> 
                <div class="banner4"> 
                  <div class="banner"> 
                    <div class="banner_inner"> 
                      <div class="clear"> 
                        <p>Care for the whole family</p>
                      </div>
                      <div class="clear"><img src="images/specer.gif" width="1" height="20" alt="" /></div>
                      <div class="clear"> 
                        <ul>
                          <li>Newborn Care</li>
                          <li>Children</li>
                          <li>Teenagers</li>
                          <li>Young Adults</li>
                          <li>Seniors</li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
                    </div>
                    <div class="clear"><img src="images/specer.gif" width="1" height="31" alt="" /></div>
                </div>
          </div>
		   <div id='tmpSlide-5' class='tmpSlide'> 
                <div class="banner5"> 
                  <div class="clear"> 
                    <div class="banner_inner"> 
                      <div class="clear"> 
                        <p>Care for the whole family</p>
                      </div>
                      <div class="clear"><img src="images/specer.gif" width="1" height="20" alt="" /></div>
                      <div class="clear"> 
                        <ul>
                          <li>Weight Loss</li>
                          <li>Fit for Life</li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

Hi people, I am using a drupal module, views slideshow, it displays images on my site, the landscape sized images are showing fine, however the portrait images are not centered but aligned left and they look cramped over to one side, I have tried css and its not working for sure, this is the script, Im sorry but I no absolutely no javascript so if anyone can figure this one out I will owe you one. I guess it will need to check for the largest width in the slideshow and then half this for the centre. the link to the file is here aswell http://www.2shared.com/document/3kyc...slideshow.html

// $Id: views_slideshow.js,v 1.1.2.1.2.39 2010/07/01 03:29:08 redndahead Exp $

/**
* @file
* A simple jQuery SingleFrame Div Slideshow Rotator.
*/

/**
* This will set our initial behavior, by starting up each individual slideshow.
*/
Drupal.behaviors.viewsSlideshowSingleFrame = function (context) {
$('.views_slideshow_singleframe_main:not(.viewsSlideshowSingleFrame-processed)', context).addClass('viewsSlideshowSingleFrame-processed').each(function() {
var fullId = '#' + $(this).attr('id');
var settings = Drupal.settings.viewsSlideshowSingleFrame[fullId];
settings.targetId = '#' + $(fullId + " :first").attr('id');
settings.paused = false;

settings.opts = {
speed:settings.speed,
timeoutarseInt(settings.timeout),
delayarseInt(settings.delay),
sync:settings.sync==1,
random:settings.random==1,
pause:false,
allowPagerClickBubblesettings.pager_hover==1 || settings.pager_click_to_page),
prevsettings.controls > 0)?'#views_slideshow_singleframe_prev_' + settings.vss_id:null,
nextsettings.controls > 0)?'#views_slideshow_singleframe_next_' + settings.vss_id:null,
pagersettings.pager > 0)?'#views_slideshow_singleframe_pager_' + settings.vss_id:null,
nowraparseInt(settings.nowrap),
pagerAnchorBuilder: function(idx, slide) {
var classes = 'pager-item pager-num-' + (idx+1);
if (idx == 0) {
classes += ' first';
}
if ($(slide).siblings().length == idx) {
classes += ' last';
}

if (idx % 2) {
classes += ' odd';
}
else {
classes += ' even';
}

var theme = 'viewsSlideshowPager' + settings.pager_type;
return Drupal.theme.prototype[theme] ? Drupal.theme(theme, classes, idx, slide, settings) : '';
},
after:function(curr, next, opts) {
// Used for Image Counter.
if (settings.image_count) {
$('#views_slideshow_singleframe_image_count_' + settings.vss_id + ' span.num').html(opts.currSlide + 1);
$('#views_slideshow_singleframe_image_count_' + settings.vss_id + ' span.total').html(opts.slideCount);
}
},
befo function(curr, next, opts) {
// Remember last slide.
if (settings.remember_slide) {
createCookie(settings.vss_id, opts.currSlide + 1, settings.remember_slide_days);
}

// Make variable height.
if (settings.fixed_height == 0) {
//get the height of the current slide
var $ht = $(this).height();
//set the container's height to that of the current slide
$(this).parent().animate({height: $ht});
}
},
cleartypesettings.ie.cleartype == 'true')? true : false,
cleartypeNoBgsettings.ie.cleartypenobg == 'true')? true : false
}

// Set the starting slide if we are supposed to remember the slide
if (settings.remember_slide) {
var startSlide = readCookie(settings.vss_id);
if (startSlide == null) {
startSlide = 0;
}
settings.opts.startingSlide = startSlide;
}

if (settings.pager_hover == 1) {
settings.opts.pagerEvent = 'mouseover';
settings.opts.pauseOnPagerHover = true;
}

if (settings.effect == 'none') {
settings.opts.speed = 1;
}
else {
settings.opts.fx = settings.effect;
}

// Pause on hover.
if (settings.pause == 1) {
$('#views_slideshow_singleframe_teaser_section_' + settings.vss_id).hover(function() {
$(settings.targetId).cycle('pause');
}, function() {
if (settings.paused == false) {
$(settings.targetId).cycle('resume');
}
});
}

// Pause on clicking of the slide.
if (settings.pause_on_click == 1) {
$('#views_slideshow_singleframe_teaser_section_' + settings.vss_id).click(function() {
viewsSlideshowSingleFramePause(settings);
});
}

// Add additional settings.
if (settings.advanced != "\n") {
var advanced = settings.advanced.split("\n");
for (i=0; i<advanced.length; i++) {
var prop = '';
var value = '';
var property = advanced[i].split(":");
for (j=0; j<property.length; j++) {
if (j == 0) {
prop = property[j];
}
else if (j == 1) {
value = property[j];
}
else {
value += ":" + property[j];
}
}

// Need to evaluate so true, false and numerics aren't a string.
if (value == 'true' || value == 'false' || IsNumeric(value)) {
value = eval(value);
}
else {
// Parse strings into functions.
var func = value.match(/function\s*\((.*?)\)\s*\{(.*)\}/i);
if (func) {
value = new Function(func[1].match(/(\w+)/g), func[2]);
}
}

// Call both functions if prop was set previously.
if (typeof(value) == "function" && prop in settings.opts) {
var callboth = function(before_func, new_func) {
return function() {
before_func.apply(null, arguments);
new_func.apply(null, arguments);
};
};
settings.opts[prop] = callboth(settings.opts[prop], value);
}
else {
settings.opts[prop] = value;
}
}
}

$(settings.targetId).cycle(settings.opts);

// Start Paused
if (settings.start_paused) {
viewsSlideshowSingleFramePause(settings);
}

// Pause if hidden.
if (settings.pause_when_hidden) {
var checkPause = function(settings) {
// If the slideshow is visible and it is paused then resume.
// otherwise if the slideshow is not visible and it is not paused then
// pause it.
var visible = viewsSlideshowSingleFrameIsVisible(settings.targetId, settings.pause_when_hidden_type, settings.amount_allowed_visible);
if (visible && settings.paused) {
viewsSlideshowSingleFrameResume(settings);
}
else if (!visible && !settings.paused) {
viewsSlideshowSingleFramePause(settings);
}
}

// Check when scrolled.
$(window).scroll(function() {
checkPause(settings);
});

// Check when the window is resized.
$(window).resize(function() {
checkPause(settings);
});
}

// Show image count for people who have js enabled.
$('#views_slideshow_singleframe_image_count_' + settings.vss_id).show();

if (settings.controls > 0) {
// Show controls for people who have js enabled browsers.
$('#views_slideshow_singleframe_controls_' + settings.vss_id).show();

$('#views_slideshow_singleframe_playpause_' + settings.vss_id).click(function(e) {
if (settings.paused) {
viewsSlideshowSingleFrameResume(settings);
}
else {
viewsSlideshowSingleFramePause(settings);
}
e.preventDefault();
});
}
});
}

// Pause the slideshow
viewsSlideshowSingleFramePause = function (settings) {
//make Resume translatable
var resume = Drupal.t('Resume');

$(settings.targetId).cycle('pause');
if (settings.controls > 0) {
$('#views_slideshow_singleframe_playpause_' + settings.vss_id)
.addClass('views_slideshow_singleframe_play')
.addClass('views_slideshow_play')
.removeClass('views_slideshow_singleframe_pause')
.removeClass('views_slideshow_pause')
.text(resume);
}
settings.paused = true;
}

// Resume the slideshow
viewsSlideshowSingleFrameResume = function (settings) {
$(settings.targetId).cycle('resume');
if (settings.controls > 0) {
$('#views_slideshow_singleframe_playpause_' + settings.vss_id)
.addClass('views_slideshow_singleframe_pause')
.addClass('views_slideshow_pause')
.removeClass('views_slideshow_singleframe_play')
.removeClass('views_slideshow_play')
.text('Pause');
}
settings.paused = false;
}

Drupal.theme.prototype.viewsSlideshowPagerThumbnails = function (classes, idx, slide, settings) {
var href = '#';
if (settings.pager_click_to_page) {
href = $(slide).find('a').attr('href');
}
return '<div class="' + classes + '"><a href="' + href + '"><img src="' + $(slide).find('img').attr('src') + '" /></a></div>';
}

Drupal.theme.prototype.viewsSlideshowPagerNumbered = function (classes, idx, slide, settings) {
var href = '#';
if (settings.pager_click_to_page) {
href = $(slide).find('a').attr('href');
}
return '<div class="' + classes + '"><a href="' + href + '">' + (idx+1) + '</a></div>';
}

// Verify that the value is a number.
function IsNumeric(sText) {
var ValidChars = "0123456789";
var IsNumber=true;
var Char;

for (var i=0; i < sText.length && IsNumber == true; i++) {
Char = sText.charAt(i);
if (ValidChars.indexOf(Char) == -1) {
IsNumber = false;
}
}
return IsNumber;
}

/**
* Cookie Handling Functions
*/
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else {
var expires = "";
}
document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) {
return c.substring(nameEQ.length,c.length);
}
}
return null;
}

function eraseCookie(name) {
createCookie(name,"",-1);
}

/**
* Checks to see if the slide is visible enough.
* elem = element to check.
* type = The way to calculate how much is visible.
* amountVisible = amount that should be visible. Either in percent or px. If
* it's not defined then all of the slide must be visible.
*
* Returns true or false
*/
function viewsSlideshowSingleFrameIsVisible(elem, type, amountVisible) {
// Get the top and bottom of the window;
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var docViewLeft = $(window).scrollLeft();
var docViewRight = docViewLeft + $(window).width();

// Get the top, bottom, and height of the slide;
var elemTop = $(elem).offset().top;
var elemHeight = $(elem).height();
var elemBottom = elemTop + elemHeight;
var elemLeft = $(elem).offset().left;
var elemWidth = $(elem).width();
var elemRight = elemLeft + elemWidth;
var elemArea = elemHeight * elemWidth;

// Calculate what's hiding in the slide.
var missingLeft = 0;
var missingRight = 0;
var missingTop = 0;
var missingBottom = 0;

// Find out how much of the slide is missing from the left.
if (elemLeft < docViewLeft) {
missingLeft = docViewLeft - elemLeft;
}

// Find out how much of the slide is missing from the right.
if (elemRight > docViewRight) {
missingRight = elemRight - docViewRight;
}

// Find out how much of the slide is missing from the top.
if (elemTop < docViewTop) {
missingTop = docViewTop - elemTop;
}

// Find out how much of the slide is missing from the bottom.
if (elemBottom > docViewBottom) {
missingBottom = elemBottom - docViewBottom;
}

// If there is no amountVisible defined then check to see if the whole slide
// is visible.
if (type == 'full') {
return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)
&& (elemBottom <= docViewBottom) && (elemTop >= docViewTop)
&& (elemLeft >= docViewLeft) && (elemRight <= docViewRight)
&& (elemLeft <= docViewRight) && (elemRight >= docViewLeft));
}
else if(type == 'vertical') {
var verticalShowing = elemHeight - missingTop - missingBottom;

// If user specified a percentage then find out if the current shown percent
// is larger than the allowed percent.
// Otherwise check to see if the amount of px shown is larger than the
// allotted amount.
if (amountVisible.indexOf('%')) {
return (((verticalShowing/elemHeight)*100) >= parseInt(amountVisible));
}
else {
return (verticalShowing >= parseInt(amountVisible));
}
}
else if(type == 'horizontal') {
var horizontalShowing = elemWidth - missingLeft - missingRight;

// If user specified a percentage then find out if the current shown percent
// is larger than the allowed percent.
// Otherwise check to see if the amount of px shown is larger than the
// allotted amount.
if (amountVisible.indexOf('%')) {
return (((horizontalShowing/elemWidth)*100) >= parseInt(amountVisible));
}
else {
return (horizontalShowing >= parseInt(amountVisible));
}
}
else if(type == 'area') {
var areaShowing = (elemWidth - missingLeft - missingRight) * (elemHeight - missingTop - missingBottom);

// If user specified a percentage then find out if the current shown percent
// is larger than the allowed percent.
// Otherwise check to see if the amount of px shown is larger than the
// allotted amount.
if (amountVisible.indexOf('%')) {
return (((areaShowing/elemArea)*100) >= parseInt(amountVisible));
}
else {
return (areaShowing >= parseInt(amountVisible));
}
}
}

Ok, I am in a small pickle here.

I created a sidebar gadget for work originally with only 4 images that needed to cycle though it. Easy enough script done.

Now they have 6 images that need to rotate through.
Easy enough again, script done.

The issue I have is now I have to re-push this updated html file to all 1000 PC's on my network. Plus every time a change is made I will have to do it again. And we change the images multiple times a month.

So what I need help doing if its possible is to modify the html file i am listing below to have a second IF parameter that not only steps the image but also checks to see if the file is even there.
This is the spot I need help at.
Code:

function slideit(){
			if (!document.images)
			return
			document.images.slide.src=eval("image"+step+".src")
			whichimage=step
			if (step<10)
			step++
			else
			step=1

I wanted to add another part to the IF statement like maybe.
Code:

If (step<10 && file_exists("http://www.akronlibrary.org/Gadget/Gadget Pic 1.bmp"))

Basically a step that checks to see if I have at that moment a file named gadet pic 1. (I would do or statements for all of the file names)


The point is to make this whole thing dynamic, so that I change image 1 on the server and every gadget on every PC looking for image 1 now see the new image. This way I just change the image file name when I want a different image to display. Same thing with the var for the slidelink function. points to a static named html file on my web server and I just change the redirect in the static named html file to go where i want it.

I am by NO means a programmer, I am actually a network admin that came up with this idea and I am trying to fumble through it. Thanks in advance!

Code:

<html>
	<head>
		<meta hrrp-equiv="Content-Type" content="text/html; charset=Unicode" />
		<style type="text/css">
			body{
					margin: 0px;
					width: 405px;
					height: 205px;
					font-family; Georgia;
			}		
		</style>
			
		<script type="text/javascript">

			var image1=new Image()
			image1.src="http://www.akronlibrary.org/Gadget/Gadget Pic 1.bmp"
			var image2=new Image()
			image2.src="http://www.akronlibrary.org/Gadget/Gadget Pic 2.bmp"
			var image3=new Image()
			image3.src="http://www.akronlibrary.org/Gadget/Gadget Pic 3.bmp"
			var image4=new Image()
			image4.src="http://www.akronlibrary.org/Gadget/Gadget Pic 4.bmp"
			var image5=new Image()
			image5.src="http://www.akronlibrary.org/Gadget/Gadget Pic 5.bmp"
			var image6=new Image()
			image6.src="http://www.akronlibrary.org/Gadget/Gadget Pic 6.bmp"
			var image7=new Image()
			image7.src="http://www.akronlibrary.org/Gadget/Gadget Pic 7.bmp"
			var image8=new Image()
			image8.src="http://www.akronlibrary.org/Gadget/Gadget Pic 8.bmp"
			var image9=new Image()
			image9.src="http://www.akronlibrary.org/Gadget/Gadget Pic 9.bmp"
			var image10=new Image()
			image10.src="http://www.akronlibrary.org/Gadget/Gadget Pic 10.bmp"
			
		</script>
			
	</head>
	
	<body>

		<a href="javascript:slidelink()"><img title="Akron-Summit County Public Library" name="slide" /></a>

		<script type="text/javascript">
			
			var step=1
			var whichimage=1
			function slideit(){
			if (!document.images)
			return
			document.images.slide.src=eval("image"+step+".src")
			whichimage=step
			if (step<10)
			step++
			else
			step=1
			setTimeout("slideit()",6000)
			}
			slideit()
			function slidelink(){
			if (whichimage==1)
			window.location="http://www.akronlibrary.org/Gadget/Gadget Image 1 Link.html"
			else if (whichimage==2)
			window.location="http://www.akronlibrary.org/Gadget/Gadget Image 2 Link.html"
			else if (whichimage==3)
			window.location="http://www.akronlibrary.org/Gadget/Gadget Image 3 Link.html"
			else if (whichimage==4)
			window.location="http://www.akronlibrary.org/Gadget/Gadget Image 4 Link.html"
			else if (whichimage==5)
			window.location="http://www.akronlibrary.org/Gadget/Gadget Image 5 Link.html"
			else if (whichimage==6)
			window.location="http://www.akronlibrary.org/Gadget/Gadget Image 6 Link.html"
			else if (whichimage==7)
			window.location="http://www.akronlibrary.org/Gadget/Gadget Image 7 Link.html"
			else if (whichimage==8)
			window.location="http://www.akronlibrary.org/Gadget/Gadget Image 8 Link.html"
			else if (whichimage==9)
			window.location="http://www.akronlibrary.org/Gadget/Gadget Image 9 Link.html"
			else if (whichimage==10)
			window.location="http://www.akronlibrary.org/Gadget/Gadget Image 10 Link.html"
			}	
		</script>
	</body>
</html>

Hey guys I'm need to put a photo slideshow on my website with a lot of images. I don't want all the images to download as you come to the website as this would take forever. Are there any pretty simple slideshows that load images just before they are about to come in the view?





Reply With Quote




01-25-2015, 01:07 PM #2
Philip M View Profile View Forum Posts

Supreme Master coder! Join Date Jun 2002 Location London, England Posts 18,371 Thanks 204 Thanked 2,573 Times in 2,551 Posts

How will the program know which image is "about" to come into view? Or are they viewed sequentially? If so there is no need for preloading images to take "forever". Preload the first (say) 5 and then preload the rest while the user is viewing the first ones. Or when each "next" image is selected for viewing preload the next following one.

Hello everyone!
This is my first post. I know some html and css, but not much about javascript, and I have an existential problem with a portfolio i'm helping to design:

The portfolio itself is for a night photographer that covers different events. For each event there is a page where the photos from that event are displayed.
The thing is i don't want to write html code for each and every event, so i've been investigating how to automate this process and i've been answered: javascript.

I want a horizontal layout page for each event, where all the images from its folder are displayed, with a horizontal scrollbar and no vertical scrollbar. I've managed to cover this with a combination between css and javascript code.

The javascript code i'm using:

<script src="../../docs/js/jquery-1.2.6.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">

$(function(){
$("#page-wrap").wrapInner("<table cellspacing='30'><tr>");
$(".post").wrap("<td>");
});
</script>

Then i call for each image in the body of the html page:

<div id="page-wrap">
<div class="post">
<img src="../../images/baobab04.02.11/1.jpg" width="720" height="480" border="0" />
</div>

<div class="post">
<img src="../../images/baobab04.02.11/2.jpg" width="720" height="480" border="0" />
</div>

</div>

I've read about this function to loop for each image in a directory:

foreach(string fileName f in Directory.GetFiles("SomeDirectory"))
{
...
}

But i'm lost as to how to implement it and make a new <div class="post"> for each file in the directory.

Thank you all in advance

I have an image gallery with about 10 images. Its a very simple image gallery, basically you have "A" "B" "C" "D" etc, and for each letter you click on, JavaScript changes the relative image from hidden to block.

The problem I have is that all of the 10 images load in the background, despite the user not clicking on the corresponding letter, which wastes a ton of bandwidth.

I have isolated and placed the image gallery code into a HTML file and included 3 pics so you can see it working:
http://www.maxsurl.com/link.php?ref=rk925Lzd48

I don't know much about JavaScript, but I hope this code I just made up gives you can idea of what I am trying to achieve:

Code:

<SCRIPT type="text/javascript">
	function pic1() {
		load.pic('src="pic1.png"')
	}
	function pic2() {
		load.pic('src="pic2.png"')
	}
	function pic3() {
		load.pic('src="pic3.png"')
	}
</SCRIPT>

<SPAN onclick="return pic1()">PIC 1</SPAN>
<SPAN onclick="return pic2()">PIC 2</SPAN>
<SPAN onclick="return pic2()">PIC 3</SPAN>

<IMG id="pic">

Does anyone have a suggestion on how I could achieve what I would like to do? If so, could you please show me a basic example of code so I can make sense of it (I am a visual learner).

Hi,
well I have like 1000 images on the same page, unfortunately I can't use sprites on them, as the number of images increases continuously. So you can imagine it sends 1000 http requests, so it takes lots of time for the images to load plus it's not good experience for the visitors.
I have seen one of the scripts named as Lazy Load, but I was thinking if there is more SMARTER WAY of loading images (good regarding SEO, loads images faster and is good for user experience).
So, I was wondering if there is a way out to loading images in a better way?

Hi all

Is there a way to get the image(s) to load into the table after the page has loaded instead of the way I have it now?

I have 4 tabs, but I would like the imgs in tabs 2,3,4 to load after page load.

Example of how the tabs look.

Code:

    	  <div class="tabbertab">
            <h2>Australia_____</h2>
                      <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFCC">
                       <caption class="highlight_Red">澳洲&nbsp; Australia
                       </caption>
  <tr>
    <td><a href="pages/promotion.html#aus_ACE" rel="nofollow" target="_blank"><img src="pages/images/Pics/AUS/ace.jpg" alt="ACE / ATTC" width="110" height="69" border="0" align="left" class="ozimg_L"/> ...a few more images etc

the other tabs look the same.

LT

This script displays a link to a registration/login form that loads in a light box for Joomla.
I've been goin nuts trying to figure out how to get this to load on page load with a delay.
Anyone know how to get this done?
PHP Code:
<?php
JHTML::_('behavior.mootools');
$document = JFactory::getDocument();
$document->addStyleSheet(JURI::base() . 'media/system/css/modal.css');
$document->addScript(JURI::base() . 'media/system/js/modal.js');
$document->addScriptDeclaration("window.addEvent('domready', function() {SqueezeBox.initialize({});});");
$user = & JFactory::getUser();

$uri = JFactory::getURI();
$url = $uri->toString();
$return = base64_encode($url);

?>
<div id="lbframeid" style="position:absolute;top:1px;left:1px;height:0px;width:0px;overflow:hidden">
<a href="http://www.wowjoomla.com/"><h1>Joomla Login LightBox powered by WowJoomla.com</h1> </a>
</div>
<?php if ($user->get('guest')) :?>
   <a href="<?php echo JRoute::_('index.php?option=com_loginbox')?>" 
      onclick="SqueezeBox.fromElement(this); return false;"  
      rel="{handler: 'iframe', size: {x: 660, y: 500}}"><?php echo JText::_('SIGNUP_LOGIN')?></a>
   <?php else: ?>
<?php echo JText::sprintf( 'HINAME', $user->get('name') ); ?>
<br>
   <a href="javascript:void(0);" onclick="LB_onLogout(); return false;"><?php echo JText::_('LOGOUT')?></a>
<?php endif; ?>
<script type="text/javascript">
function LB_onLogout() {
   var form = new Element('form');
   form.setProperty('method', 'POST');
   form.setProperty('target', '_self');
   form.setProperty('action', 'index.php');
   
   var input = new Element('input');
   input.setProperty('type', 'hidden');
   input.setProperty('name', 'option');
   input.setProperty('value', 'com_user');
   form.appendChild(input);
   
   var input = new Element('input');
   input.setProperty('type', 'hidden');
   input.setProperty('name', 'task');
   input.setProperty('value', 'logout');
   form.appendChild(input);
   
   var input = new Element('input');
   input.setProperty('type', 'hidden');
   input.setProperty('name', 'return');
   input.setProperty('value', '<?php echo $return; ?>');
   form.appendChild(input);
   
   $E('body').appendChild(form);
   form.submit();
}
</script>

Does anyone have any ideas for what i should work on next. I've made a music player where you can select the song you want. I've made a calculator. I'm relatively new to javascript so.

Hi all,

I was wondering if anyone knew were I can get a javascript that will adjust the background image dependant on the users screen resolution like whats used on this site http://gregorywood.co.uk/journal/chilli-babies

Thanks in advance!!
Kyle