JavaScript - 🔴★ Looking For A Photo Slideshow That Doesn't Download All Images At Once

I recently installed a dynamic slideshow on my server and tried eliminating the background from "black" to "none" in the fadeslideshow.js so I could use transparent images to reveal the blue background on my site, but for some reason slide 1 stays on screen when switching to slide 2... not sure what to do, would appreciate any help. Thanks, Josh.

please visit to view slideshow error
http://www.scannmarketing.com

Okay, so I've been trying to pick up JavaScript and JQuery. And I have a few questions, would be very grateful for answers:

-If I'm making a sliding image gallery with JQuery, how do I store my images in an array? I take it this is the best way? I've made a JQuery gallery by assigning each image an ID, and hiding the ones that aren't required. This looks like bad practice though.

I take it it should work with a standard JavaScript array, then reference the position of the image I've loaded? like [0][1][2] etc, but something must be amiss in my code.

So basically, I've animated my image in, and there's a next button that I want to take me to the next image in the sequence. Can anyone give me a tip?

Thanks a lot.

I recently installed a dynamic slideshow on my server and tried eliminating the background from "black" to "none" in the fadeslideshow.js so I could use transparent images to reveal the blue background on my site, but for some reason slide 1 stays on screen when switching to slide 2... not sure what to do, would appreciate any help. Thanks, Josh.

please visit to view slideshow error
http://www.scannmarketing.com

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 guys. This is a tricky one.

I'm have some images on a site that I want a user to download to their sdcard.
i have urls for the images (e.g. http://eg.com/image1.jpg) and i have a webpage with a button.

when the user clicks the button, i want it to download those images to an sdcard in their pc (hopefully they can select where using a windows open file type box).

i think this may be quite difficult due to security with browsers and Iv looked into activex object (but cant get it to save to my filesystem).

if this cant be done, perhaps i could do it on the server-side using php and have the user use filezilla to download the images. obviously this is not a very elagant solution.

any ideas on how i might approach this problem?

thanks you
Jen

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

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>

Code:

function move_user_img(str) {
				var step = 25;
				// change this to different step value
				switch(str) {
				case "down":
					var x = document.getElementById('imageUser').offsetTop;
					x = x + step;
					document.getElementById('imageUser').style.top = x + "px";
					break;

				case "up":
					var x = document.getElementById('imageUser').offsetTop;
					x = x - step;
					document.getElementById('imageUser').style.top = x + "px";
					break;

				case "left":
					var y = document.getElementById('imageUser').offsetLeft;
					y = y - step;
					document.getElementById('imageUser').style.left = y + "px";
					break;

				case "right":
					var y = document.getElementById('imageUser').offsetLeft;
					y = y + step;
					document.getElementById('imageUser').style.left = y + "px";
					break;
				}
			}
			function move_report_img(str) {
				var step = 25;
				// change this to different step value
				switch(str) {
				case "down":
					var x = document.getElementById('imageReport').offsetTop;
					x = x + step;
					document.getElementById('imageReport').style.top = x + "px";
					break;

				case "up":
					var x = document.getElementById('imageReport').offsetTop;
					x = x - step;
					document.getElementById('imageReport').style.top = x + "px";
					break;

				case "left":
					var y = document.getElementById('imageReport').offsetLeft;
					y = y - step;
					document.getElementById('imageReport').style.left = y + "px";
					break;

				case "right":
					var y = document.getElementById('imageReport').offsetLeft;
					y = y + step;
					document.getElementById('imageReport').style.left = y + "px";
					break;
				}
			}

Code:

<div id ="display" style="width:640px; height:480px; overflow:hidden;">

			<div>
				<img src ="
				<?php
				echo UPLOADPATH . $userImage;
				?>
				" style = "position:absolute;" id="imageUser"/>
			</div>
			<div id ="imageReport">
				<img src = "
				<?php
				echo $reportImage;
				?>
				" style = "opacity:0.25;height:700px; width:450px;" />
			</div>
		</div>
		<div style="position:absolute; top:550px; left:100px;">
			<p>Control User Image</p>
			<input type=button onClick=move_user_img('up') value='Up'>
			<input type=button onClick=move_user_img('left') value='Left'>
			<input type=button onClick=move_user_img('right') value='right'>
			<input type=button onClick=move_user_img('down') value='down'>
		</div>
		<div style="position:absolute; top:650px; left:100px;">
			<p>Control Report Image</p>
			<input type=button onClick=move_report_img('up') value='Up'>
			<input type=button onClick=move_report_img('left') value='Left'>
			<input type=button onClick=move_report_img('right') value='right'>
			<input type=button onClick=move_report_img('down') value='down'>
		</div>

Plz i want to make a photo gallery of many images... i want it to be enlarged with an effect..


i have a thumbnails images and large images i want the thumbnails to be enlarged with any effect and to be displayed on the same page ..

can anyone send for me a new photo gallery effect?

I am designing a custom wordpress blog for a client. He had asked for four sections to have a picture gallery fitting the format of the rest of the site with the simple functions of next and back. I found a gallery online ( http://www.web1marketing.com/photoviewer/ ) that had the elements I needed, customized the sizes. I made a working test version in the site that works great.

http://californiaisaplace.com/cali/test/

When I added the same code into the full site the URL address is changing but the photos are not ?

http://californiaisaplace.com/cali/c...os/#cannonball

Not knowing Javascript I am having trouble troubleshooting the issues. Can any one give me any advice on this?