|
JavaScript - Js Slideshow Problem: Need To Show More Images
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>
Similar Tutorialshttp://visualslideshow.com/ I want the code for the pictures slideshow that is used in the above link. Help me out! 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 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>
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 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. 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>
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>
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 several 'galleries' for each artist on my website. Clicking on each thumbnail opens a popup window with a larger image and details. It works fine on all the browsers except IE. What do I need to add/subtract/alter so that it works in IE? Tried to find the solution with the other threads, but without success. Here's the website: http://artsenses.co.uk I will be eternally thankful for any help! Hey guys, I'm new to the forums, so if i post anything wrong let me know. I'm trying to use links to hide all the images, and show just ones from a certain category. I've used the img name attribute to group them and tried to do a function that shows only one img. here's the script... <script language="javascript"> function showone(x) { document.getElementByName('a').style.display='none'; document.getElementByName('b').style.display='none'; document.getElementByName('c').style.display='none'; document.getElementByName(x).style.display='block'; } </script> and the code... <a href="#" onClick="showone('a'); ">show CAT. A</a><br> <a href="#" onClick="showone('b'); ">show CAT. B</a><br> <a href="#" onClick="showone('c'); ">show CAT. C</a><br> <a href="#">show all cats</a><br> <br> <img name="a" src="imgs/a1.jpg" /><br> <img name="b" src="imgs/b1.jpg" /><br> <img name="a" src="imgs/a2.jpg" /><br> <img name="a" src="imgs/a3.jpg" /><br> <img name="b" src="imgs/b2.jpg" /><br> <img name="c" src="imgs/c1.jpg" /> Here's what it looks like... http://mattfalcone.com/tests/showhide.html except the links don't work like they should, and I can't figure out why. I'm an idiot with javascript, so if feel free to make fun of me, and if anyone knows how to get this simple function to work, please let me know and I'de appreciate it. Hi All, I accidentally damaged my slide show today and cant work out how to fix it. If you go to www.myav.com.au its on the home page. I had only links showing so I added the <ul id="slideshow"> tag and now I have the box coming up but its just blank. Any ideas? Thanks so much! hi everybody, I need a help about making a slideshow script which could work with IE and Firefox, the code I have for it is work only on the IE, so hope if any one could help me in this issue.
Currently working on a slideshow for this website, and I've used the same code in the past but because I am now working with a wordpress template I'm having some problems. Link to slideshow The next image is loading underneath the current image and then moving up, which I need them images to stay in place of course. Code: <div id="lookbook">
<a href="http://www.axandapple.com/store/?cat=71" target="_self"><ul class="ppt">
<li><img src="http://axandapple.com/store/wp-content/themes/eCommerce/images/AxAndApple_WitchingHour_Elza-1.jpg" ALT="Ax+Apple Presents The Witching Hour Collection"></li>
<li><img src="http://axandapple.com/store/wp-content/themes/eCommerce/images/AxAndApple_WitchingHour_Elza-2.jpg" ALT="Ax+Apple Nyx & Orion Necklaces"></li>
<li><img src="http://axandapple.com/store/wp-content/themes/eCommerce/images/AxAndApple_WitchingHour_Elza-3.jpg" ALT="Ax+Apple Odessa & Oracle Necklaces"></img></li>
<li><img src="http://axandapple.com/store/wp-content/themes/eCommerce/images/AxAndApple_WitchingHour_Elza-4.jpg" ALT="Ax+Apple Jupiter & Naja Necklaces"></img></li>
<li><img src="http://axandapple.com/store/wp-content/themes/eCommerce/images/AxAndApple_WitchingHour_Elza-5.jpg" ALT="Ax+Apple Nyx & Orion Necklaces"></img></li>
<li><img src="http://axandapple.com/store/wp-content/themes/eCommerce/images/AxAndApple_WitchingHour_Elza-6.jpg" ALT="Ax+Apple Odessa & Oracle Necklaces and Snake Charmer Bracelet"></img></li>
<li><img src="http://axandapple.com/store/wp-content/themes/eCommerce/images/AxAndApple_WitchingHour_Elza-7.jpg" ALT="Ax+Apple Jupiter & Naja Necklaces and Asteria Earrings"></img></li>
</ul></a>
<p style="text-align:center;"><button type="button" id="back">Back</button>
<button type="button" id="stop">Pause</button>
<button type="button" id="play">Play</button>
<button type="button" id="fwd">Forward</button></p>
</div>
<p>2011 Ax+Apple</p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$('.ppt li:gt(0)').hide();
$('.ppt li:last').addClass('last');
$('.ppt li:first').addClass('first');
$('#play').hide();
var cur = $('.ppt li:first');
var interval;
$('#fwd').click( function() {
goFwd();
showPause();
} );
$('#back').click( function() {
goBack();
showPause();
} );
$('#stop').click( function() {
stop();
showPlay();
} );
$('#play').click( function() {
start();
showPause();
} );
function goFwd() {
stop();
forward();
start();
}
function goBack() {
stop();
back();
start();
}
function back() {
cur.fadeOut( 1000 );
if ( cur.attr('class') == 'first' )
cur = $('.ppt li:last');
else
cur = cur.prev();
cur.fadeIn( 1000 );
}
function forward() {
cur.fadeOut( 1000 );
if ( cur.attr('class') == 'last' )
cur = $('.ppt li:first');
else
cur = cur.next();
cur.fadeIn( 1000 );
}
function showPause() {
$('#play').hide();
$('#stop').show();
}
function showPlay() {
$('#stop').hide();
$('#play').show();
}
function start() {
interval = setInterval( "forward()", 3000 );
}
function stop() {
clearInterval( interval );
}
$(function() {
start();
} );
</script>
Code: #lookbook{
position:relative;
}
ul.ppt{
position:absolute;
height:699px;
}
.ppt li{
list-style-type:none;
position:absolute;
top:0px;
left:0px;
height:699px;
}
.ppt img{
background-color:#FFF;
padding:5px;
top:0px;
position:absolute;
}
#lookbook p{
text-align:center;
z-index:99;
}
#lookbook button{
background-color:#FFF;
border:0;
padding:0 3px 0 3px;
color:#000;
font:12px "Courier", "Courier New", Courier, monospace;
}
Hi there, I am currently creating my first ever website and I am attempting to put in some javascript but I am having trouble, would it be possible for someone to guide me. I am trying to implement a slideshow but at the moment all I am getting is the first picture only, here is the code... Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Lyons Design and Print</title>
<style type="text/css" media="all">
body
{
background-image:url('background.jpg');
}
.header {
font-size: 24pt;
font-weight: bold;
padding: 20px;
border-bottom: 1px solid #000;
text-align:center;
}
#nav {
margin:0;
padding:0;
float:left;
width:100%;
border:1px solid #42432d
border-width:1px 0;
text-align: center;
}
#nav li {
display:inline-block;
padding:0;
margin:0;
}
* html #nav li { display: inline; }
*+html #nav li { display: inline; }
#nav a:link,
#nav a:visited {
color:#000;
background:#0033CC;
padding:20px 40px 4px 10px;
float:left;
width:auto;
border-right:1px solid #42432d;
text-decoration:none;
font:bold 1em/1em Arial, Helvetica, sans-serif;
text-shadow: 2px 2px 2px #555;
}
#nav a:hover,
#nav a:focus {
color:#fff;
background:#0033CC;
}
#nav li:first-child a {
border-left:1px solid #42432d;
}
#home #nav-home a,
#large format printing #nav-large format printing a,
#scanning #nav-scanning a,
#thermal inkjet printing and plotting #nav-thermal inkjet printing and plotting a,
#large format photo copying #nav-large format photo copying a,
#contacts #nav-contacts a,
#about us #nav-about us a {
background:#e35a00;
color:#fff;
text-shadow:none;
}
#home #nav-home a:hover,
#large format printing #nav-large format printing a:hover,
#scanning #nav-scanning a:hover,
#thermal inkjet printing and plotting #nav-thermal inkjet printing and plotting a:hover,
#large format photo copying #nav-large format photo copying a:hover,
#contacts #nav-contacts a:hover,
#about us #nav-about us a:hover {
background:#e35a00;
}
#nav a:active {
background:#e35a00;
color:#fff;
}
p{
font-family: Verdana, Geneva, sans-serif;
font-style: oblique;
font-weight: normal;
font-size: 16px;
letter-spacing: normal;
line-height: normal;
text-transform: none;
text-decoration: none;
text-align: center;
}
p{
font-family: Verdana, Geneva, sans-serif;
font-style: oblique;
font-weight: normal;
font-size: 16px;
letter-spacing: normal;
line-height: normal;
text-transform: none;
text-decoration: none;
text-align: center;
}
<script type="text/javascript">
<!--
var image1=new Image()
image1.src="DesignPrinter.jpg"
var image2=new Image()
image2.src="print-design.jpg"
var image3=new Image()
image3.src="printingpress.jpg"
var image4=new Image()
image4.src="thermal.jpg"
//-->
</script>
<script>
<!--
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}
slideit()
//-->
</script>
</style>
</head>
<body>
<div class="header"><img src="logo.jpg"></div>
<ul id="nav">
<li id="nav-Home"><a href="Home.html">Home</a></li>
<li id="nav-Large Format Printing"><a href="Large Format Printing.html">Large Format Printing</a></li>
<li id="nav-Scanning"><a href="Scanning.html">Scanning</a></li>
<li id="nav-Thermal Inkjet Printing and Plotting"><a href="Thermal Inkjet Printing and Plotting.html">Thermal Inkjet Printing and Plotting</a></li>
<li id="nav-Large Format Photo Copying"><a href="Large Format Photo Copying.html">Large Format Photo Copying</a></li>
<li id="nav-Contacts"><a href="#">Contacts</a></li>
<li id="nav-About Us"><a href="#">About Us</a></li></ul>
<table border="0" cellpadding="0" cellspacing="0" height="300"><tr><td id="maincontent" valign="top">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a. </p>
<p align="center"><img src="DesignPrinter.jpg" name="slide" width=300 height=300></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate </p>
<embed src="beatles.mid" width="144" height="60">
</body>
I'm not sure whether this is a javascript or CSS related problem so sorry if I've posted this in the wrong place. I'm modifying a slideshow plugin to fit my website and have changed some of the dimensions of the slides. Now the next slide is coming in from the wrong position on the right hand side. I'm not sure how to fix this, can someone please help? http://ah.mjtippet.com/ |
|||||||