Simple Gallery

Question

alexgv14 0 Light Poster

15 Years Ago

I have this gallery that loops through images in a folder. But you have to set what images. Is there a way that I can make it loop though as many images that are in this folder maybe using a for loop or something.

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", "", ""]
 ],

here is what the part that gets the images looks like. Any help would be greatly appreciated.

Let me know if any other information is needed.
Thanks in advance.

javascript

3 Contributors
4 Replies
139 Views
5 Days Discussion Span
Latest Post 15 Years Ago Latest Post by alexgv14

essential 84 Posting Shark

15 Years Ago

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>

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Luckychap 68 Posting Pro in Training · Answer 1 · 2009-03-02T23:18:32+00:00

Are u trying to traverse the folder for all the images with javascript?

Explain ur query

alexgv14 0 Light Poster · Answer 2 · 2009-03-03T10:50:39+00:00

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

});

alexgv14 0 Light Poster · Answer 3 · 2009-03-04T10:57:23+00:00

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
?>