JavaScript - How To Implement Slideshow With Too Many Images

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));
}
}
}

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>

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

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, thanks for your time first of all-

secondly, I am at a loss for what to do next to get these slideshows functioning. You can see the current iteration he http://www.pauljameswilliams.com/portfolio.html

I am using hte plug in galleria, and I have got it working in a stand alone version with the same images and and folder structure. The difference may be that I have the content nested in these div tags? to create tabs. i really don't know.

Here is the structure within the portfolio tab, under the Identity heading: ( there will be more images once I get this working:

Code:

<div>
<div class="demo">
<ul class="gallery_demo galleria">
<li><img src="images/portfolio01.jpg" alt="Flowing Rock" title="Flowing Rock Caption"></li>
<li><img src="images/portfolio02.jpg" alt="Stones" title="Stones - from Aple images"></li>
<li><img src="images/portfolio03.jpg" alt="Grass Blades" title="Apple nature desktop images"></li>
</ul>
<div class="galleria_container"></div>
<p class="nav"><a href="#" onclick="$.galleria.prev(); return false;">previous</a> | <a href="#" onclick="$.galleria.next(); return false;">next</a></p>
</div>
</div>

I can give you more code if necesary, but I don't want to overwhelm anyone. thanks.

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.

I have a parent checkbox that when checked, I want it to validate whether 1 of the four child checkboxes are selected.

I've gotten it to work but I'd like to have one if condition as opposed to all the '&&'. Anyone know how to clean these up?

Code:

<script type="text/javascript">
function checkMe() {
	var mbe = document.getElementById('a10_Class01');	
	if (mbe.checked) {
		for (i=0; i<4; i++){
			if (document.getElementById('a10_ClassSub1').checked == false && document.getElementById('a10_ClassSub2').checked == false && document.getElementById('a10_ClassSub3').checked == false && document.getElementById('a10_ClassSub4').checked == false){
			alert('Choose a minority.');
			return false;
			}
		}
	}
}
</script>

I am trying to code a piece of JavaScript that queries the Internic for whois information (using either a domain or an IP address) and puts the results into a JSON object with separate fields for each piece of information.

I'm running into issues while trying to make some simple code to loop through and display different combinations of 3 colours.
I want to show 3 boxes on screen and then loop through/increment each possible combination of colours.

For simplicity's sake I'm trying to go from black to white in each box like this:

(box1rgb/box2rgb/box3rgb)

step 1: 000 000 000
step 2: 000 000 111
step 3: 000 000 222
.
.
.
step 256: 000 000 255255255
step 257: 000 111 000
step 258: 000 111 111
step 259: 000 111 222
.
.
.
step 512: 000 111 255255255
step 513: 000 222 000
step 514: 000 222 111
.
etc.

Yes, I know the thing will take a long time to complete!

The colour is being set by the statement
document.getElementById("box#").style.backgroundColor = "rgb(" + p1 + "," + p1 + "," + p1 + ")"; where p1 is the incrementing variable.

Firstly I tried to do it using nested "for" loops.
Code:

  for (p3=0;p3<=255;p3++) {

    document.getElementById("box03").style.backgroundColor  = "rgb(" + p3 + "," + p3 + "," + p3 + ")";
  
    for (p2=0;p2<=255;p2++) {

      document.getElementById("box02").style.backgroundColor  = "rgb(" + p2 + "," + p2 + "," + p2 + ")";
    
      for (p1=0;p1<=255;p1++) {
      
        document.getElementById("box01").style.backgroundColor  = "rgb(" + p1 + "," + p1 + "," + p1 + ")";
		
      }
    }
  }

But of course the code executes far too rapidly for each combination to be seen. It all chewed up lots of CPU and nothing was smooth.

To slow the process, I tried a single recursive loop using a timeout statement:
Code:

function loopandshow() {
  document.getElementById("box01").style.backgroundColor  = "rgb(" + currentcolour + "," + currentcolour + "," + currentcolour + ")";
  currentcolour += 1;
  if (currentcolour <= 255) window.setTimeout("loopandshow();", 20);
}

This worked smoothly for a single box but I couldn't work out how to nest this format 3 levels deep and have each level increment only when the deeper level had completed the cycle.

Any advice would be gratefully appreciated.

Thanks in advance.

I have a main window which produces a number of child windows when I press a button.

Users need to be able to switch between windows using Ctrl+Tab hot key.

I was trying to implement this by intercepting keyup/keydown events in one of the frames.

But the problem is that main window has several frames and I don't have access to all of them because some of them are in different domains.

As soon as a user clicks on a frame without my handler the hot key is not working anymore.

Any ideas how to implement it?

Maybe an ActiveX component? If ActiveX could help me - how does it work?

Are there any tutorials or examples how to write an activeX to intercepts hot keys in IE?

Thank you.

Hi, I got this two javascripts:
- Datepicker by Jason Moon (http://calendar.moonscript.com/dateinput.cfm) which can have multiple of this datepicker on a single form

- Dynamic Add/Remove rows from http://viralpatel.net/blogs/2009/03/...avascript.html

I would like to add rows of fields with each rows having it's individual datepicker.

Code:

	<table id="billcmp_7" width="320" border="0">
	  <tr>
	    <td width="200" align="center"><script>DateInput('billcmp7_cycle', true)</script></td>
	    <td width="10">&nbsp;</td>
	    <td width="100" align="center"><input name="billcmp7_name" type="text" /></td>
	    <td width="10"><INPUT type="checkbox" name="chk"/></td>
	  </tr>
	</table>
	<table width="320" border="0">
	  <tr>
	    <td colspan="4" align="center"><INPUT type="button" value="Add Row" onclick="addRow('billcmp_7')" /><INPUT type="button" value="Delete Row" onclick="deleteRow('billcmp_7')" /></td>
	  </tr>
	</table>

I just want this section
Code:

<script>DateInput('billcmp7_cycle', true)</script>

to work like
Code:

<script>DateInput('billcmp7_cycle_1', false)</script>
<script>DateInput('billcmp7_cycle_2', false)</script>

when click on the add button.

Here's what i meant? Link

cant get the time to be different as it is still read as single datepicker.

Any1 has any idea how or any alternative?

I have implemented timer for 10sec.It's displaying the message.Now After pressing OK button that is after first 10 sec I want the timer to restart again and run for 20 secs and then display other message.After pressing OK button,that is for 20 secs I want the timer to restart again for 60 secs and display a new third message.
Here is my code:
Can you help me?
===========================================================
<SCRIPT LANGUAGE = "JavaScript">
<!--
var secs
var timerID = null
var timerRunning = false
var delay = 1000

function InitializeTimer()
{
// Set the length of the timer, in seconds
if(secs = 10)
{
StopTheClock()
StartTheTimer()
secs++
}
else if(secs = 15)
{
StopTheClock()
StartTheTimer()
}
}

function StopTheClock()
{
if(timerRunning)
clearTimeout(timerID)
timerRunning = false
}

function StartTheTimer()
{
if (secs==0)
{
StopTheClock()
// Here's where you put something useful that's
// supposed to happen after the allotted time.
// For example, you could display a message:
alert("Would You Like to try again?")
}
else
{
self.status = secs
secs = secs - 1
timerRunning = true
timerID = self.setTimeout("StartTheTimer()", delay)
}
}
//-->
</SCRIPT>

Here is how I'm calling it:

<FORM>
<INPUT TYPE=BUTTON VALUE="Submit" onClick = "InitializeTimer()">
</FORM>


Please help!

We are using Volusion for our shopping cart, but I am trying to put a pop-up option in there for marketing.

Volusion operates using a template.htm and css files that I can access, and of course I cannot access the root file (default/index.htm).

The program I am tyring to use says to place the following line next to the <body> tag of the default page: <!-- POPUP --><script src=http://www.metalcloak.com/v/34.popup/script.js></script><!-- END -->

34.popup is a folder with the applicable script and graphics.

For whatever reason, if I put this line in the template file after this location: <body id="body" onload="if(typeof(store_init)=='function')store_init(event);" > It does not function.

Talking with the techies at Volusion, they have no recommendation other than using JavaScript to point this script to operate on the home page only.

Any help or direction of what I should do (even if it means scrapping a pre-packaged Popup Proogram as an option) is much appreciated.

Thank you.

Friends i'm in a dire situation only have wednesday to submit ..so heres the problem....i have a course work assigment where i have to hardwire Hardware items and their item codes description and prices and ask the user to input their name address the itemCode and quantity nad then creat an invoice which looks like this

HARDWARE ITEMS
CODE DESCRIPTION UNIT PRICE
K16 Wood screws, brass, 20mm, pack of 50 $ 7.75
D24 Wood glue, clear, 1 litre $ 5.50
M93 Sandpaper, medium grade, 100 sheets $10.25
M94 Sandpaper, fine grade, 100 sheets $14.75

PLACE YOUR ORDER!
NAME: Bill Silic
ADDRESS-1: Apt 23
ADDRESS-2: Building 8
ADDRESS-3: Winchester
POST CODE: 89763
ENTER CODE (XX to Stop):
CODE: D24
QUANTITY: 2
CODE: K16
QUANTITY: 1
CODE:XX


INVOICE FOR ORDER
Bill Silic
Apt 23
Building 8
Winchester POST CODE: 89763
D24 Wood glue, clear, 1 litre 2 @ $ 5.50 $ 11.00
K16 Wood screws, brass, 20mm, pack of 50 1 @ $ 7.75 $ 7.75
TOTAL: $ 18.75
Shipping: 2 items @ 1.00 2.00
TOTAL INCL. SHIPPING: 20.75
VAT at 20% 4.15
TOTAL TO PAY: 24.90

I HAVE ALREADY COMPLETED THIS BY MYSELF AND GOT IT WORKING WITH NO PROBLEM ..But my problem is that the teacher wants us to TEST FOR NULL ENTRY meaning if the user enters the wrong Itemcode or no ItemCode at all and give an sensible output for that case ..... she wants us to put it in a method after main and then call it in main using a do while loop so my method looks something like this


Code:

public static boolean isSomethingCorrect(String itemCode){
			if(itemCode.equals("")||itemCode.equals(null)){
				System.out.println("A sensible output");
				return true;
			}//close if
			return false;
		}
		
		
  }

// and i have to implement it where i ask the user for input using a Do while loop in this area


Code:

  //a do while loop to test null code entry
	                  do{
	                       System.out.println("Please select a code from the list");
	                       String itemCode= br.readLine();
						  
					   
						
	                       System.out.println("Please enter quantity of items " +itemCode);
	                       String itemQuantity= br.readLine();
	                       int quantity= Integer.parseInt(itemQuantity);

// I Will be forever grateful for any help on this program because i have tryed for hours upon hours and i just cant get it and i need to submit the day after tomorrow