i'm new to PHP and jQuery but i would like to do the following things to a portfolio that i'm developing using easySlider and Lightbox plugin:
Display a limit of six images or six div images per "li" tag and close it from a directory.
If there is more than six images on the directory, create a new "li" tag and show six more images, till all the images from that directory are loaded.
If an image has a name with a number after -> display: Hidden. For example: beta1 but i only want to show the first one "beta"
Sort images by name.
Don't let anyone access to the images on that directory, if it isn't the code itself.
The code for portfolio is the following:
<div id="portfolio_hold">
<ul>
<li>
<div class="portfolio_pic_hold">
<a href="large.jpg" rel="lightbox[]" >
<img src="thumb.jpg"/>
</a>
</div>
</li>
</ul>
</div>
This is my html example of what i want to show.
This might do the trick
$thumbsPath = "trabalhos/design/thumbs/";
$imagespath = "trabalhos/design/images/";
$file_display = array('jpg', 'jpeg', 'png', 'gif');
if (file_exists($thumbsPath) == false)
{
echo 'Directory \'', $thumbsPath, '\' not found.';
}
else
{
$thumbs = glob($thumbsPath."*.[".implode($file_display,"|")."]");
if (file_exists($imagesPath) == false){
echo 'Directory \'', $imagesPath, '\' not found.';
} else
{
$counter = 0;
$filesPerPage = 6;
foreach ($thumbs as $file)
{
if($counter % $filesPerPage) echo "<li>";
$counter++;
$info = pathinfo($file);
$sFile = basename($file,'.'.$info['extension']);
$aFiles = glob($images.$sFile."[0-9]+.[".implode($file_display,"|")."]"); //Este array tem todas as imagens relativas ao thumbnail que estás a ver
echo "<div><img /></div>";
if($counter == $filesPerPage) echo "</li>";
}
}
}
Related
I got a script that gets images from a folder and puts them inside a lightgallery. All is working fine, except when I add more than 7 images (or any new images for that matter). There are 7 images in the folder when I add 8.jpg it shows nothing, not in the gallery and not in the source code. What could be the cause of this?
My script:
<div id="lightgallery">
<a href="<? echo $imagesmall; ?>">
<img class="fullnieuwsimg" src="<? echo $imagesmall; ?>">
</a>
<?
function scan_dir($dir) {
$ignored = array('.', '..', '.svn', '.htaccess','index.html');
$files = array();
foreach (scandir($dir) as $file) {
if (in_array($file, $ignored)) continue;
$files[$file] = filemtime($dir . '/' . $file);
}
ksort($files,SORT_NATURAL);
$files = array_keys($files);
return ($files) ? $files : false;
}
if(is_dir($_SERVER['DOCUMENT_ROOT'].'/_intern/web/cms/images/Projecten/'.$contentcr[0]['alias'].'/') != FALSE){
foreach(scan_dir($_SERVER['DOCUMENT_ROOT'].'/_intern/web/cms/images/Projecten/'.$contentcr[0]['alias'].'/') as $entry) {
$gallery .= '
<a href="/_intern/SNM/cms/images/Projecten/'.$contentcr[0]['alias'].'/'.$entry.'">
<img class="galleryimgs" title="'.$contentcr[0]['alias'].'" alt="'.$contentcr[0]['alias'].'" src="/_intern/web/cms/images/Projecten/'.$contentcr[0]['alias'].'/'.$entry.'" />
</a>';
}
}else{
echo '';
}
echo $gallery;
?>
</div>
The pictures are in the folder like this (barebone joomla cms) :
All work, except 8.jpg or any other new images I add.
With another coder's help, I have PHP code that creates a photo gallery with auto-created thumbnail images of any image files in the directory. (It's open source, so anyone else is free to use and modify as they desire.)
I use it as a stock photo library and the file names include the keywords for that image. For example, one might be businessman-tie-suit-briefcase-office-meeting.jpg.
I've been trying to add a keyword search input that looks at the file names, but cannot figure out how to proceed. I've built keyword searches for a database, but this directory file name search is new to me.
Here's the relevant code of the page:
<?
$gallery = $_GET["gallery"];
$dir = $dir.$gallery."/";
//Put files into an array
// create a handler to the directory
$dirhandler = opendir($dir);
// read all the files from directory
$nofiles=0;
while ($file = readdir($dirhandler)) {
// if $file isn't this directory or its parent
//add to the $files array
if ($file != '.' && $file != '..')
{
$nofiles++;
$files[$nofiles]=$file;
}
}
//close the handler
closedir($dirhandler);
//Back button to appear at the top of each page to go to the previous directory if not on the main page
if ($gallery !="" or $keyword !="")
{
echo "<div><a href='javascript:history.go(-1)'><img src='images/up.png' border='0'></a></div>";
}
// BEGINNING ADD FOR KEYWORD SEARCH
// KEYWORD SEARCH BOX- create text box to search entire directory for that keyword and display page in grid pattern with results
?>
<div style='position:relative; left:10px;'>
<form action='index_search.php?keyword=$keyword' method='get' name='search'>
<input type='text' name='keyword' size='25'>
<input type='submit' value='Search Keyword'>
</form>
</div>
<?
//*************************************************************************//
// PERFORM KEYWORD SEARCH
if ($keyword !="")
{
echo "<div class='keytext'>Keyword search: <b>" . $keyword . "</b><br/></div>";
/*********************************************************************************************************/
/* ***** THIS IS WHERE THE SEARCH OF DIRECTORY FILES NEEDS TO OCCUR AND OUTPUT RESULTS AS $files */
/* get results where $file LIKE %$keyword%; */
/*********************************************************************************************************/
//Show images
foreach ($files as $file)
{
if ($file!="."&&$file!="..")
{
$extention = explode('.', $file);
if ($extention[1] != "")
{
echo "<div class='imgwrapper'>";
echo"<a class='fancybox' rel='group'' href='$dir$file' return false' title='$filename'>";
echo "<img src='timthumb.php?src=$dir$file&h=$height&w=$width' alt='$extention[0]' width='$width' height='$height'/>";
echo"</a><br/>";
$file_name = current(explode('.', $file));
echo substr($file_name,0,21);
echo "</div>";
}
}
}
}
else { // starts the split from keyword or no keyword
//***********************************************************************//
// sort folder names alphabetically, ignore case
natcasesort($files);
//Show the folders
foreach ($files as $file){
if ($file!="."&&$file!="..")
{
sort($files); //Sorts the array (file names) alphabetically -- not the directory/folder names
$extention = explode('.', $file);
if ($extention[1] == "")
{
echo "<div class='imgwrapper'>";
echo "<a href='?gallery=$gallery/$file'>";
echo "<img src='images/folder.jpg' border='0'>";
echo "<div class='folder'>";
echo current(explode('.', $file));
echo "</a>";
echo "</div>";
echo "</div>";
}
}
}
?>
<div style="clear:both"></div>
<?
//Show images
foreach ($files as $file){
if ($file!="."&&$file!="..")
{
$extention = explode('.', $file);
if ($extention[1] != "")
{
echo "<div class='imgwrapper'>";
echo"<a class='fancybox' rel='group'' href='$dir$file' return false' title='$filename'>";
echo "<img src='timthumb.php?src=$dir$file&h=$height&w=$width' alt='$extention[0]' width='$width' height='$height'/>";
echo"</a><br/>";
echo "<div class='title'>";
$file_name = current(explode('.', $file));
echo substr($file_name,0,125);
echo "</div>";
echo "</div>";
}
}
}
}
?>
I have the area commented out where I believe the search string would be executed, as the display code is already there. I've tried a few things that didn't work, so didn't bother listing any of it.
Any ideas if I'm going about this the wrong way?
Thanks in advance.
if ($extention[1] != "")
{
if(stripos($file, $keyword) !== false)
{...
}
}
See (stripos() manual)
I was able to get this resolved from some outside help.
if ($file!="."&&$file!="..")
{
sort($files); //Sorts the array (file names) alphabetically -- not the directory/folder names
$extention = explode('.', $file);
if ($extention[1] == "")
{
$dir = "pics/";
$dir = $dir.$file."/";
$dirhandler = opendir($dir);
// read all the files from directory
$nofiles=0;
$files2=array();
while ($file2 = readdir($dirhandler)) {
if ($file2 != '.' && $file2 != '..')
{
$nofiles++;
$files2[$nofiles]=$file2;
}
}
closedir($dirhandler);
sort($files2); //Sorts the array (file names) alphabetically -- not the directory/folder names
//Show images
foreach ($files2 as $file2){
if ($file2!="."&&$file2!="..")
{
$extention = explode('.', $file2);
if ($extention[1] != "" && stripos($file2,$keyword)!==false)
{
echo "<div class='imgwrapper'>";
echo"<a class='fancybox' rel='group'' href='$dir$file2' return false' title='$filename'>";
echo "<img src='timthumb.php?src=$dir$file2&h=$height&w=$width' alt='$extention[0]' width='$width' height='$height'/>";
echo"</a><br/>";
echo "<div class='title'>";
$file2_name = current(explode('.', $file2));
echo substr($file2_name,0,125);
echo "</div>";
echo "</div>";
}
}
}
}
I've used php to open and list the files in the folder, but I'd like to somehow turn it into an if else statement so that if its from the 'dark' background folder a white logo will be displayed and if its from a 'light' background folder a black logo will be displayed.
<?php
//path to directory to open
$directory = "backgrounds/dark";
$dir_handle = #opendir($directory) or die("Unable to open folder");
while(false !== ($file = readdir($dir_handle)))
{
if($file != '.' && $file != '..')
{
echo "{image : 'http://occa-art.com/backgrounds/dark/".$file."'}, ";
}
}
closedir($dir_handle);
?>
The {image: 'http://' } format is used because the images are listed within the Supersized background script.
---EDIT---
Maybe something like this (untested) to determine which folder the background image is from:
<?php
$doc = new DOMDocument();
$doc->loadHTML($htmlAsString);
$xpath = new DOMXPath($doc);
$nodeList = $xpath->query('//img[#class="bg"]/#src');
for ($i = 0; $i < $nodeList->length; $i++) {
# Xpath query for attributes gives a NodeList containing DOMAttr objects.
# http://php.net/manual/en/class.domattr.php
echo $nodeList->item($i)->value . "<br/>\n";
}
$bg_url = $nodeList->item($i)->value; // not sure about this?
$parent = dirname("$bg_url");
if ($parent == 'dark') { ?>
<img src="<?php bloginfo('template_url'); ?>/images/OCCAIndexHeaderwhite.png" alt="OCCA logo" />
<?php } else { ?>
<img src="<?php bloginfo('template_url'); ?>/images/OCCAIndexHeaderblack.png" alt="OCCA logo" />
<?php } ?>
used code found here and here
I have this drupal slideshow which pulls images from a folder sequentially by image title (01_title.jpg, 02_title.jpg, etc..)
I was wondering if there is an easy way to randomize the images, so it starts with a different image every time you refresh the page?
you can view the slideshow here http://www.rubensteinpr.com/
Thanks!
<div id ="index">
<?php
// Note that !== did not exist until 4.0.0-RC2
$desired_extension = 'jpg'; //extension we're looking for
$banner_imgs_array = array(); // array of banner images
$banner_imgs = ''; // sting of banner images names comma dileneated
if ($handle = opendir(file_directory_path().'/banner_imgs')) {
/* This is the correct way to loop over the directory. */
while (false !== ($file = readdir($handle))) {
if(($file != ".") and ($file != "..")) {
$fileChunks = explode(".", $file);
if($fileChunks[1] == $desired_extension) //interested in second chunk only
{
$banner_imgs_array[] = $file;
}
}
}
closedir($handle);
$banner_imgs = implode(',', $banner_imgs_array);
}
?>
<div id="banner"><img src="<?php print file_directory_path(); ?>/temp_banner.jpg" width="702" height="310" border="0"></div>
<div id="bannerText">media relations • strategic planning • digital communications • crisis management</div>
<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("<?php print file_directory_path(); ?>/banner.swf", "ban", "702", "310", "8", "#ffffff");
so.addParam('menu', 'false');
so.addParam("wmode", "transparent");
so.addParam("base", "<?php print file_directory_path(); ?>");
so.addVariable("banner_imgs", "<?php print $banner_imgs; ?>");
so.write("banner");
// ]]>
</script>
</div>
adding
shuffle($banner_imgs_array);
line just before
$banner_imgs = implode(',', $banner_imgs_array);
should do the trick.
array_rand will return one or more random array keys. If you want to shuffle the array itself, use shuffle.
Ok, so I'm loading a list of images by directory using PHP:
<?php
# fetch image details
$images = getImages("marc/img/livingrooms/");
# display on page
foreach($images as $img) {
echo "<li><img src=\"{$img['file']}\" title=\"\" alt=\"\"></li>\n";
}
?>
Then I'm using the Galleria JQuery plugin to style those items into a gallery:
$(document).ready(function(){
$('.dynolist').addClass('gallery_group'); // adds new class name to maintain degradability
$('ul.gallery_group').galleria({
history : true, // activates the history object for bookmarking, back-button etc.
clickNext : true, // helper for making the image clickable
insert : '#main_image', // the containing selector for our main image
onImage : function(image,caption,thumb) { // let's add some image effects for demonstration purposes
// fade in the image & caption
image.css('display','none').fadeIn(1000);
caption.css('display','none').fadeIn(1000);
// fetch the thumbnail container
var _li = thumb.parents('li');
// fade out inactive thumbnail
_li.siblings().children('img.selected').fadeTo(500,0.3);
// fade in active thumbnail
thumb.fadeTo('fast',1).addClass('selected');
// add a title for the clickable image
image.attr('title','Next image >>');
},
onThumb : function(thumb) { // thumbnail effects goes here
// fetch the thumbnail container
var _li = thumb.parents('li');
// if thumbnail is active, fade all the way.
var _fadeTo = _li.is('.active') ? '1' : '0.3';
// fade in the thumbnail when finnished loading
thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);
// hover effects
thumb.hover(
function() { thumb.fadeTo('fast',1); },
function() { _li.not('.active').children('img').fadeTo('fast',0.3); } // don't fade out if the parent is active
)
}
});
});
The issue is that I need to give the first item pulled from that list a class of "active", so the first image will be loaded into the slideshow. Everything else works right now, other than getting that first image loaded.
Any suggestions?
$('selector:first').addClass('active');
Maybe?
Or what about
# display on page
$class = 'class="active" ';
foreach($images as $img) {
echo "<li><img ".$class."src=\"{$img['file']}\" title=\"\" alt=\"\"></li>\n";
$class="";
}
Try this:
# display on page
$counter = 0;
foreach($images as $img) {
if ($counter == 0) { // first
echo "<li class=\"active\"><img src=\"{$img['file']}\" title=\"\" alt=\"\"></li>\n";
}
else
{
echo "<li><img src=\"{$img['file']}\" title=\"\" alt=\"\"></li>\n";
}
$counter++;
}
If you want to do that on the PHP side, you could count, in your foreach loop, how many images have been displayed -- and if 0 have been displayed, add a class="active" to the one you are currently echoing.
For instance, something like this should do the trick :
$counter = 0;
foreach($images as $img) {
echo "<li><img src=\"{$img['file']}\" ";
if ($counter === 0) {
echo 'class="active"';
}
echo " title=\"\" alt=\"\"></li>\n";
$counter++;
}
The first time you'll loop, $counter will be 0, and class="active" will be echoed ; next times, it won't be 0 anymore, and no addtionnal active class will be added.
In jquery:
$(".gallery_group li:first-child").addClass("active");
In php:
# display on page
$first = true;
foreach($images as $img) {
echo "<li " . ($first ? "class='active'" : "") . "><img src=\"{$img['file']}\" title=\"\" alt=\"\"></li>\n";
$first = false;
}