Devam Ediyor

jquery slideshow dynamically reference images

See slide show at www.gittings.com. Original code below.

Goal is to:

1. use existing basic structure -- jquery

2. dynamically reference images in a folder rather than having to hard code each image into script

3. if possible have alt tags associated with images

4. initially display a specific image before jquery script - for systems/connects that delay while images load, I want an image to display quickly.

5. accomodate images with various pixel dimensions/proportions, but only fill the current 450x600 window.

6. NO PHP NO FLASH PLEASE

Current jquery being used is attached.

**********CURRENT CODE**************

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url removed, login to view]">

<html xmlns="[url removed, login to view]">

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

<script type="text/javascript" src="/Portals/83927/jquery/[url removed, login to view]"></script>

<script type="text/javascript">

/***

Simple jQuery Slideshow Script

Released by Jon Raasch ([url removed, login to view]) under FreeBSD license: free to use or modify, not responsible for anything, etc. Please link out to me if you like it :)

***/

function slideSwitch() {

var $active = $('#slideshow [url removed, login to view]');

if ( $[url removed, login to view] == 0 ) $active = $('#slideshow IMG:last');

// use this to pull the images in the order they appear in the markup

// var $next = $[url removed, login to view]().length ? $[url removed, login to view]()

// : $('#slideshow IMG:first');

// uncomment the 3 lines below to pull the images in random order

var $sibs = $[url removed, login to view]();

var rndNum = [url removed, login to view]([url removed, login to view]() * $[url removed, login to view] );

var $next = $( $sibs[ rndNum ] );

$[url removed, login to view]('last-active');

$[url removed, login to view]({opacity: 0.0})

.addClass('active')

.animate({opacity: 1.0}, 1000, function() {

$[url removed, login to view]('active last-active');

});

}

$(function() {

setInterval( "slideSwitch()", 4000 );

});

</script>

<style type="text/css">

/*** set the width and height to match your images **/

#slideshow {

position:relative;

height:450px;

}

#slideshow IMG {

position:absolute;

top:0;

left:0;

z-index:8;

opacity:0.0;

}

#slideshow [url removed, login to view] {

z-index:10;

opacity:1.0;

}

#slideshow IMG.last-active {

z-index:9;

}

</style>

</head>

<body style="font-family: Arial, Sans-serif, sans;">

<!-- this will work with any number of images -->

<!-- set the active class on whichever image you want to show up as the default

(otherwise this will be the last image) -->

<div id="slideshow">

<img src="/Portals/83927/galleries/home/[url removed, login to view]" alt="children-portrait-card" />

<img src="/Portals/83927/galleries/home/[url removed, login to view]" alt="teen-portrait-environmental" />

<!-- **********image references continue ************ -->

</div>

</body>

</html>

<br>

Beceriler: jQuery / Prototype

Daha fazlasını görün: work reference, text markup, style head, prototype reference, link jquery, jquery 2, html img position, html doctype, height length, flash slide show html, family id, css img html, css height jquery, animate html, jquery reference image, jquery w3c, jon n, no jquery, jquery link, doctype html, slideshow, reference , portrait work, pixel type, math basic

İşveren Hakkında:
( 4 değerlendirme ) Houston, United States

Proje NO: #699297

Seçilen:

Manuilov

hello, please, check pmb

1 gün içinde 50$ USD
(4 Değerlendirme)
2.4

4 freelancer bu iş için ortalamada 60$ teklif veriyor

urmi1

let's start please see PMB for more details...

1 gün içinde 100$ USD
(15 Değerlendirme)
4.5
roonex

Please view PMB. Thanks

in 0 gün içinde50$ USD
(8 Değerlendirme)
3.4
umar482

please check pmb

in 2 gün içinde40$ USD
(1 Değerlendirme)
1.6