I made a scrolling slideshow script, the problem is that although I move my pictures 1px a time I get some occasional "hiccups" in the images while they scroll. Here's the script:
<script type="text/javascript">
var i;
var k;
var speed=40;
var status=1;
var slides=new Array;
var position=new Array; .....
How to make the slideshow run smoother?
i used setTimeout() function in my image gallery to scroll images , i used setTimeout("myfunction()",1) in my script. Now my image gallery is working properly but problem is that the speed of scrolling images if normal in firefox, but in internet explorer it is slow, and in google chrome it is very fast , Sir how to resolve this problem
[Code]...
I am trying scrolling of images as like: [url]. I do want to set border for the images with border property as "2px solid #000" and i do want gap between the images so that the horizontal gap value is 20px.
I tried even with image border propoerty and image style properties both border and padding as 0 20px. Both not working properly. The style padding property is working fine in firefox and google chrome. But it is working in IE 6.0
I'll paste my code for your reference.
I have to do a slideshow with images of different widths... am using cycle plugin, which I like very much... I have a little test slideshow here, http:[url]....it's not centering imgs in containing div (I made div width of widest image.. this will work for my situation, in which imgs will be hard-coded..)if you inspect img element in firebug (#slideshow img), it shows that the plugin adds a style of position: absolute; top: 0px; left: 0px .to the img; why does the plugin do this.. how can I center the images in containing div...
View 1 Replies View RelatedIīve just launch my website-portfolio, well itīs not yet the final version but it is almost and despite I am satisfied with the final result Iīve detected a really strange bug that only happens sometimes. The thing is when the first introduction Slide appears (the one with the hand-made drawings), sometimes the images shrink from the normal size to small tiny images. This doesnīt happen always and if you refresh the page it disappears.
Follow the link to the page were the bug happens - [url]. I'm using jquery cycle plugin, check it out.
I'm using jcarousel to build a scrolling slideshow and need to make some customizations. There is a callback function that is referenced whenever an item becomes the last visible item in the carousel.
[Code]...
I have some code that executes two animations when the user clicks on an area. I want both animations to go off at the exact same time, however from time to time it seems as if one will be triggered first and then after a slight delay the second one will be triggered. This, of course, is noticeable and a problem. How can I ensure that they will go off together?
This is a watered down version of my code:
$('#container).click(function(){
$('#circle').animate({left:'500px'},1000);
$('#square').animate({left:'200px'},1000);
});
I'm looking desperatle for a javascript that allow me to show a few
small images scrolling horizzontaly on the screen from right to left.
I'm sure I've seen a lot of time such a script, but now I can't find
it again.
I want to achieve a similar effect using jquery and in div's not tables,[URL]
View 2 Replies View RelatedI'm using a jquery image sliding plugin from this site It scrolls smoothly and continuously which is great. But I'm wanting to add a "click to pause" feature to it, so when you click any of the images the whole thing pauses, and when you click again it restarts. I'm not great with javascript though and I can't figure out how to do that, if it's even possible. code...
View 2 Replies View Related My Javascript abilities are sub-par so I normally try to follow tutorials or examples to implement java for now. Although I digress. To the point... I'm coding a web site for a photographer and need a natural looking picture selecting menu.
For example...
Now you kinda grasp what I'm attempting to do here.. anyone know of a good tutorial or example showing how to do this? I've seen several auto scrolling menus but that's not what I'm looking for. I just want an intuitive nav bar for pics...
I'm trying to put a Continuous Horizontal Image Scroller into a web site I'm doing. my computer crashed and I lost the script. I just want a group of photo's to continuously scroll (in a loop) along the top of the home page - no links or anything.I've also forgotten completely how I got it all up and working once I had the script.
View 14 Replies View RelatedI have a jquery slideshow on a webpage. It works fine. No problem. how I could load the images by an XML file?
The code is:
<html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
[Code].....
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:
[URL]
which is an example of increment loading slideshow working fine! 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.
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!):
<script language="JavaScript">
<!--
var interval = 8000;
var random_display = 0;
var imageDir = "portraits/";
[Code].....
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.
only 4 changes to make and your ready to go! Faster than naming all your pictures one by one in an array. You just need to name your pictures 001.jpg, 002.jpg and so on...
<!-------------- Begin Slideshow ------------------->
<!-- change the path and name of your first image -->
<!-- if your images don't all have the same size, just leave out the width and height-->
<img src="../images/005.jpg" width="640" height="480" name="photoslider">
<form method="POST" name="rotater">
<H6 ALIGN="center">
<script language="JavaScript1.1">
//from 005.jpg to 018.jpg, change to yours.
var begin=5
var end = 18
var which = begin;
function geturl(n){
n = String(༼' + n);
//change "../images/" to your path
return '../images/' + (n).substring(n.length - 3, n.length) + '.jpg'
}
//do not edit after this point
function backward(){
if (which>begin){
window.status=''
which--
document.images.photoslider.src=geturl(which);
}
}
function forward(){
if (which<end){
which++
document.images.photoslider.src=geturl(which);
}
else window.status='End of gallery'
}
</script>
<input type="button" value="<< Backward" name="B2"
onClick="backward()"> <input type="button" value="Forward >>" name="B1"
onClick="forward()"><br>
<a href="#" onClick="which=begin+1; backward();return false>Start over</a></h6><br>
</form>
<!---------------------------- End of slideshow ----------------------->
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.
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;}
[Code]...
I am at a loss for what to do next to get these slideshows functioning. You can see the current iteration here[url]...
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]...
Using Scriptaculous, I've got a horizontally scrolling list of images that works almost exactly how I want it to - except the images don't loop. If you scroll left at the beginning or right past the end of the list, you just get empty space:
[URL]
Code:
<div id="arrow_left"><a href="#" id="move_demo" onclick="new Effect.Move('logos', { x: 170, y: 0 }); return false;"><img src="_images/arrow_left.png" width="40" height="155" id="left_arrow"></a></div>
[Code]....
Is there a way to automatically reorder the list to create an infinite loop of the logos?
I have preloaded the images i want to use into an array and want to cycle thruindefinitely each image in the array, and use the each function on the array. The array isvar imgs = [];
I have a div such as this
<div id="mydiv"></div>
& with current styling such as this -
#mydiv{
background-image: url(myimg.jpg);
[Code]....
only the last image shows up... I am going around the bend ( turning green, red, and face rgb (255,255,255)
I know that Picasa does give the facility of exporting images as a slideshow, but their version contains user controls which we don't want and it is also in Flash - our IT dept don't really support Flash!
Anyway, the slideshow I would like to use and the image gallery display using Picasa images that I have already done can be seen on this test page [URL].
The gallery pulls the images from Picasa using the API in the page body:
<script src="http://picasaweb.google.com/data/feed/api/user/cycletheyorkshiredales/album/CycletheDales1?authkey=Gv1sRgCKuzudmF-bC5aA&kind=photo&alt=json-in-script&callback=output&access=all">
</script>
[Code].....
- so that the slideshow can be called using the images from the array called fadeimages.
Alrighty so here's what I have. Live example: [URL] 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.
[Code]...
I created a slideshow that displays the 5 images randomly. It is for a college project for a class I am in.
Here is the HTML for the area that holds the images
And here is the external .js file for it
I had the slideshow working completely fine... then when i finished the rest of the site and added more pages, it is now not working for me. It just sits at the original image that is loaded when they site loads.
At my whits end with trying to get jquery cycle to play nice with IE and pngs. I know its the opacity issue but I just can't tweak it.Can someone please suggest a better solution for my slideshow? Check the link below to see what I have now. i would like something similar that is also clean.http://vismarkgroup.com/dev/vision/
View 3 Replies View RelatedI 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: wonder if it's possible to achieve this with Slideshow 2! and if not, whether another script will help me achieve this?
If I were to using single images, I would use CSS 'float left' to have my text appear on the right side of the image, but with JS I cannot seem to do this.
My text drops below the slideshow and then I have this ugly white area to the right of my slideshow. I have tried MANY scripts and just cannot figure this one out.
The script I am using now has the main scripting in the <head> section, but this is what I have going on in the <body>:
<script LANGUAGE="JavaScript">
SlideShow();
</script>
Can someone help me?