3
Contributors
4
Replies
5
Views
8 Years
Discussion Span
Last Post by alexgv14
0

You can try this one...

<html>
<head>
<title>Converting Arrays</title>
<script type="text/javascript">
// 
var mygallery = { imagearray : [] }; 

/* This demo will inject new array's against your declared array's depending on the initial value, that you will need to provide in the ref arg. */

function convertToArrays( yourArray, imagePathOrFileNameOrAnyValue, ref, extention ) {

// Will be incremented for ref (ref: a numeric value that you will need to provide when you call this function) times.

   for ( var x = 0; x < ref; x++ ) {
// Injecting new values into declared arrays.

yourArray.push(( imagePathOrFileNameOrAnyValue + x + extention)); 
 } return yourArray;
}
</script>
</head>
<body>

<!-- Lets display the output and see if it works!
    The code below is for clarity, so you can easily understand how to work with them. 
    Modify this with caution to avoid crashes - 
-->

<div id="sampleOutput"></div>
<button onclick="javascript:void(function() { try{document.getElementById('sampleOutput').innerHTML= convertToArrays(mygallery.imagearray,( 'url' + 'images/featured/feature_connect_' ), 5, '.jpg')[3] + '<br>' + mygallery.imagearray[4];} catch(e) { alert('failed to convert array\'s'); } }());">Click</button>

</body>
</html>
0

Here is my complete code. I just want to make it so it grabs any image in that folder. Right now i have to declare what images for it to grab. In the code you will see that there three different galleries.

$(document).ready(function(){


	$('ul.slider-nav li a').click(function(){  
        
        $('ul.slider-nav li a').css('background-position', 'top');
        $(this).css('background-position', 'bottom');
        
        $('#holder ul li').fadeOut();
		
        
        var name = $(this).parent().attr('title');
		if(name == "new") {
			document.getElementById('new').style.display = 'block';
			document.getElementById('connect').style.display = 'none';
			document.getElementById('help').style.display = 'none';
		}else if(name == "connect") {
			document.getElementById('new').style.display = 'none';
			document.getElementById('connect').style.display = 'block';
			document.getElementById('help').style.display = 'none';
		}else if(name == "help") {
			document.getElementById('new').style.display = 'none';
			document.getElementById('connect').style.display = 'none';
			document.getElementById('help').style.display = 'block';
		}
        $('#holder ul li#'+name+'-holder').fadeIn();
				
		return false;
    });
    
    $('.slide').click(function(){
	var slideID = $(this).attr('id') + '-slider';
	
	if ( $(document).find(".slideDown[id!="+slideID+"]:visible").length >= 1 )
		$(".slideDown[id!="+slideID+"]:visible").slideUp("slow",function(){$("#" + slideID).slideToggle("slow");});
	else
		$("#" + slideID).slideToggle("slow");

	return false;
});
    
    
    

	$('ul#kwicks').kwicks({  
        max : 227,  
        spacing : 0  
    }); 
    
	
	
	$('#tabber > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } }); 
	var url = 'http://4.132.1.16/~ubcmiami/_ubcmiami/wp-content/themes/ubcmiami/';
	
	var mygallery = new simpleGallery({
 wrapperid: "connect", //ID of main gallery container,
 dimensions: [923, 330], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
 imagearray: [
  [url+"images/featured/feature_connect_1.jpg", "", ""],
  [url+"images/featured/feature_connect_2.jpg", "", ""],
  [url+"images/featured/feature_connect_3.jpg", "", ""]
 ],
 autoplay: true,
 persist: false,
 pause: 5000, //pause between slides (milliseconds)
 fadeduration: 500, //transition duration (milliseconds)
 oninit:function(){ //event that fires when gallery has initialized/ ready to run
 },
 onslide:function(curslide, i){ //event that fires after each slide is shown
  //curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
  //i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
 }
})

var mygallery2 = new simpleGallery({
 wrapperid: "help", //ID of main gallery container,
 dimensions: [923, 330], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
 imagearray: [
  [url+"images/featured/feature_help_1.jpg", "", ""],
  [url+"images/featured/feature_help_2.jpg", "", ""],
  [url+"images/featured/feature_help_3.jpg", "", ""]
 ],
 autoplay: true,
 persist: false,
 pause: 5000, //pause between slides (milliseconds)
 fadeduration: 500, //transition duration (milliseconds)
 oninit:function(){ //event that fires when gallery has initialized/ ready to run
 },
 onslide:function(curslide, i){ //event that fires after each slide is shown
  //curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
  //i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
 }
})
var mygallery3 = new simpleGallery({
 wrapperid: "new", //ID of main gallery container,
 dimensions: [923, 330], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
 imagearray: [
  [url+"images/featured/feature_new_1.jpg", "", ""],
  [url+"images/featured/feature_new_2.jpg", "", ""],
  [url+"images/featured/feature_new_3.jpg", "", ""]
 ],
 autoplay: true,
 persist: false,
 pause: 5000, //pause between slides (milliseconds)
 fadeduration: 500, //transition duration (milliseconds)
 oninit:function(){ //event that fires when gallery has initialized/ ready to run
 },
 onslide:function(curslide, i){ //event that fires after each slide is shown
  //curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
  //i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
 }
})

});
0

figured out a solution decided to use php to loop through the images.

<?
//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
?>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.