smordue

No errors, it hangs at downloading, i guess the page refresh.

I am using the following code for themeswitching, it woks great in everything but IE 6, <?php $files2 = scandir('../testsitestyles'); sort($files2); foreach($files2 as $file2) { if ($file2 == '.' || $file2 == '..') { continue; } $file_x2 = substr($file2, 0, -4); $file_y2 = explode("-", $file_x2); $thelist2 .= '<div onclick="$.fn.fancybox.close(); window.location.reload()" class="picks"><a href="style-switcher.php?style='.$file_x2.'"><img src="/images/tn/tn_'.$file_y2[1].'.jpg"/></a><br/>'.$file_x2.'</div>'; } ?> <div style="width:425px"> <?php echo $thelist2; ?> </div> Here is the styleswitcher.php: <?php $style = $_GET['style']; setcookie("style", $style, time()+604800); if(isset($_GET['js'])) { echo $style; } else { header("Location: ".$_SERVER['HTTP_REFERER']); } ?> It appears okay, but when you select, it does not seem to make the change. Works fine in ie7 up Any ideas?

I have an include file that needs javascript enabled that I want to use as a default, I have an alternate include file that does not require js. How would I have: <?php include('pickerbarjs.php'); ?> replaced with: <?php include('pickerbar.php'); ?> if javascript is not detected? I have been reading about <noscript> but everything I see just disables the element without providing the alternative. Or I just don't understand...which is more likely. Steve

I figured it out

A little background, you guys helped me out earlier with an image switcher. basically I had a list of images and a dropdown where a user could select another image like so: My picture-switcher.php: <?php $picture = $_GET['picture']; setcookie("picture", $picture, time()+604800); if(isset($_GET['js'])) { echo $picture; } else { header("Location: ".$_SERVER['HTTP_REFERER']); } ?> The head section in my page: <?php if(!empty($_COOKIE['picture'])) $picture = $_COOKIE['picture']; else $picture = 'Business-Worldwide'; ?> The picture section: <div id="banner"><img class="resize" src="../images/siteimgs/<?php echo $picture ?>.jpg" name="pictures"/> </div> The dropdown select code: <?php $cur_group = ''; $files = scandir('images/siteimgs'); sort($files); $thelist .= '<option selected="selected"'; $thelist .= '>Select Site Image</option>'; foreach($files as $file) { if ($file == '.' || $file == '..') { continue; } $file_x = substr($file, 0, -4); $file_y = explode("-", $file_x); $group = substr($file, 0, strpos($file, '-')); if(empty($cur_group)) { $thelist .= '<optgroup label="'.$group.'">'; $cur_group = $group; } if($group != $cur_group) { $thelist .= '</optgroup>'; $thelist .= '<optgroup label="'.$group.'">'; $cur_group = $group; } $thelist .= '<option value="picture-switcher.php?picture='.$file_x.'">'.$file_y[1].'</option>'; } ?><select onchange="window.location.href=this.options[this.selectedIndex].value"> <?php echo $thelist; ?> </select> This worked fine until I had too many images, my users complained that they had to click each one to see what they looked like and that was not very efficient. So I am trying to make a popup box with thumbnails where when a thumbnail is clicked it does the same thing as selecting an item from the dropdown did before, which is to immediately change the image without a reload. Oh, and close the popup. I am fiddling around with jquery and fancybox. Here is where I am now: My picture-switcher.php is unchanged from above My head now has: <?php if(!empty($_COOKIE['picture'])) $picture = $_COOKIE['picture']; else $picture = 'Business-Worldwide'; ?> <link rel="stylesheet" type="text/css" href="../fancybox/jquery.fancybox-1.2.6.css" media="screen"/> <script type="text/javascript" src="../scripts/jquery.js"></script> <script type="text/javascript" src="../fancybox/jquery.fancybox-1.2.6.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("a.pop_up").fancybox({ 'hideOnOverlayClick':true }); }); </script> Note: I have also tried 'hideOnContentClick" above with the same result. My picture section is unchanged from above. I created this new file imagepick.php for the popup: <?php $files = scandir('../images/siteimgs'); sort($files); foreach($files as $file) { if ($file == '.' || $file == '..') { continue; } $file_x = substr($file, 0, -4); $file_y = explode("_", $file_x); $file_z = explode("-", $file_y); $thelist .= '<li class="picks"><a href="picture-switcher.php?picture='.$file_x.'"><img src="/images/tn/tn_'.$file_x.'.jpg"/></a><br/>'.$file_y[1].'</li>'; } ?> <ul onclick="window.location.href=this.options[this.selectedIndex].value" style="width:415px"> <?php echo $thelist; ?> </ul> Note: I have tried moving the "onclick" to the <li> instead of the <ul>, no difference. And this is the link to call the fancybox popup: <a class="pop_up iframe" href="pickimage.php">Image Picker</a> This almost works... but there are two problems, this displays a listing of thumbnails. When clicking a thumbnail it changes the picture but requires a reload to display it, also the popup does not close when you select an image, you have to x-out. Any ideas, again the first code above functioned correctly with the dropdown. Sorry if this is in the wrong forum... was not sure where is should go. Steve

Thanks for you replies jonsjava, but I don't know if javascript will do what I need. I am trying to create a popup thumbnail gallery as an image switching source. Right now I am using a dropdown list, but I have so many images it is too cumbersome for my users to have to select each one by name to see what the images are. I was trying to convert this to a popup of thumbnails that when selected, instead of showing a full-size image, it would activate the image-switcher.php ( that functions fine with the dropdown), and change the image. I am messing around with the "highslide" jquery plugin, but I am not sure if that will get me where I am trying to go. The code above grabs whatever images are in the folder so I don't have to keep updating some list of images. Is there a better way to accomplish this? Or have you seen this done on a site anywhere that I can go dissect? Steve

I am using this code to pull from a flatfile: <? $lines = file('basedata.txt'); $l5n = ( $lines[36] ); $l5 = ( $lines[37] ); $lines[36] = preg_replace("#[\r\n]+$#", '', $lines[36]); $lines[37] = preg_replace("#[\r\n]+$#", '', $lines[37]); if(!empty($lines[36])) { echo "<li><a href='$l5'>$l5n</a></li>"; } ?> Occasionally a user will enter a name in line 36 with an apostrophe and when I pull it with the above I get "Bill\'s Bar". Where would I put "stripslashes" in the above for line 36 only, or can it be added to the preg_replace statement? Line 37 is a url so I don't want that messed with? Thanks for your help! Steve

I am working on a new idea with highslide, I am wanting to create a popup box of thumbnails that when clicked, instead of opening a full sized image, I want them to run my pic-switcher. basically I need to create a list of files like: <a class='highslide' href='../images/thumbstrip11.jpg' onclick="return hs.expand(this)"> <img src='../images/thumbstrip11.thumb.png' alt='Two cabins'/></a> I have quite a few and was trying this: <?php $files = scandir('../images/siteimgs'); sort($files); foreach($files as $file) { if ($file == '.' || $file == '..') { continue; } $file_x = substr($file, 0, -4); $file_y = explode("-", $file_x); $thelist .= '<a class='highslide' href='.file.' onclick='picture-switcher.php?picture='.$file_x.''><img src='.$file.'</a>'; } ?> <?php echo $thelist; ?> With no luck. I am not sure if the onclick will even work.

I am using this on one of my urls: $files = scandir('images/siteimgs'); On another url I was trying to use this: $files = scandir('http://www.myotherurl.com/images/siteimgs'); It does not work, is this possible? Trying to avoid duplication.

Awesome, thanks buddski

I am using the following code, which you guys helped me with last week. <?php $cur_group = ''; $files = scandir('images/siteimgs'); sort($files); $thelist .= '<option selected="selected"'; $thelist .= '>Select Site Image</option>'; foreach($files as $file) { if ($file == '.' || $file == '..') { continue; } $file_x = substr($file, 0, -4); $file_y = explode("-", $file_x); $group = substr($file, 0, strpos($file, '-')); if(empty($cur_group)) { $thelist .= '<optgroup label="'.$group.'">'; $cur_group = $group; } if($group != $cur_group) { $thelist .= '</optgroup>'; $thelist .= '<optgroup label="'.$group.'">'; $cur_group = $group; } $thelist .= '<option value="picture-switcher.php?picture='.$file_x.'">'.$file_y[1].'</option>'; } ?><select onchange="window.location.href=this.options[this.selectedIndex].value"> <?php echo $thelist; ?> </select> It is working great, but I have a new need and that is to on another page, filter the results to only show images with a certain prefix. My images are like so: Finance-Money.jpg Legal-Gavel.jpg etc. I would like to add something to the above code so that it only shows the images that start with "Legal-" for example. Thanks for your help, I could not do this without you guys! Steve

No, that worked great, this is a different issue. Maybe it can be solved the same way?

I would like to be able to sort the pics alphabetically in this jquery script, anybody know where to add this functionality? /** * Galleria (http://monc.se/kitchen) * * Galleria is a javascript image gallery written in jQuery. * It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. * It will create thumbnails for you if you choose so, scaled or unscaled, * centered and cropped inside a fixed thumbnail box defined by CSS. * * The core of Galleria lies in it's smart preloading behaviour, snappiness and the fresh absence * of obtrusive design elements. Use it as a foundation for your custom styled image gallery. * * MAJOR CHANGES v.FROM 0.9 * Galleria now features a useful history extension, enabling back button and bookmarking for each image. * The main image is no longer stored inside each list item, instead it is placed inside a container * onImage and onThumb functions lets you customize the behaviours of the images on the site * * Tested in Safari 3, Firefox 2, MSIE 6, MSIE 7, Opera 9 * * Version 1.0 * Februari 21, 2008 * * Copyright (c) 2008 David Hellsing (http://monc.se) * Licensed under the GPL licenses. * http://www.gnu.org/licenses/gpl.txt **/ ;(function($){ var $$; /** * * @desc Convert images from a simple html <ul> into a thumbnail gallery * @author David Hellsing * @version 1.0 * * @name Galleria * @type jQuery * * @cat plugins/Media * * @example $('ul.gallery').galleria({options}); * @desc Create a a gallery from an unordered list of images with thumbnails * @options * insert: (selector string) by default, Galleria will create a container div before your ul that holds the image. * You can, however, specify a selector where the image will be placed instead (f.ex '#main_img') * history: Boolean for setting the history object in action with enabled back button, bookmarking etc. * onImage: (function) a function that gets fired when the image is displayed and brings the jQuery image object. * You can use it to add click functionality and effects. * f.ex onImage(image) { image.css('display','none').fadeIn(); } will fadeIn each image that is displayed * onThumb: (function) a function that gets fired when the thumbnail is displayed and brings the jQuery thumb object. * Works the same as onImage except it targets the thumbnail after it's loaded. * **/ $$ = $.fn.galleria = function($options) { // check for basic CSS support if (!$$.hasCSS()) { return false; } // init the modified history object $.historyInit($$.onPageLoad); // set default options var $defaults = { insert : '.galleria_container', history : true, clickNext : true, onImage : function(image,caption,thumb) {}, onThumb : function(thumb) {} }; // extend the options var $opts = $.extend($defaults, $options); // bring the options to the galleria object for (var i in $opts) { $.galleria[i] = $opts[i]; } // if no insert selector, create a new division and insert it before the ul var _insert = ( $($opts.insert).is($opts.insert) ) ? $($opts.insert) : jQuery(document.createElement('div')).insertBefore(this); // create a wrapping div for the image var _div = $(document.createElement('div')).addClass('galleria_wrapper'); // create a caption span var _span = $(document.createElement('span')).addClass('caption'); // inject the wrapper in in the insert selector _insert.addClass('galleria_container').append(_div).append(_span); //------------- return this.each(function(){ // add the Galleria class $(this).addClass('galleria'); // loop through list $(this).children('li').each(function(i) { // bring the scope var _container = $(this); // build element specific options var _o = $.meta ? $.extend({}, $opts, _container.data()) : $opts; // remove the clickNext if image is only child _o.clickNext = $(this).is(':only-child') ? false : _o.clickNext; // try to fetch an anchor var _a = $(this).find('a').is('a') ? $(this).find('a') : false; // reference the original image as a variable and hide it var _img = $(this).children('img').css('display','none'); // extract the original source var _src = _a ? _a.attr('href') : _img.attr('src'); // find a title var _title = _a ? _a.attr('title') : _img.attr('title'); // create loader image var _loader = new Image(); // check url and activate container if match if (_o.history && (window.location.hash && window.location.hash.replace(/\#/,'') == _src)) { _container.siblings('.active').removeClass('active'); _container.addClass('active'); } // begin loader $(_loader).load(function () { // try to bring the alt $(this).attr('alt',_img.attr('alt')); //----------------------------------------------------------------- // the image is loaded, let's create the thumbnail var _thumb = _a ? _a.find('img').addClass('thumb noscale').css('display','none') : _img.clone(true).addClass('thumb').css('display','none'); if (_a) { _a.replaceWith(_thumb); } if (!_thumb.hasClass('noscale')) { // scaled tumbnails! var w = Math.ceil( _img.width() / _img.height() * _container.height() ); var h = Math.ceil( _img.height() / _img.width() * _container.width() ); if (w < h) { _thumb.css({ height: 'auto', width: _container.width(), marginTop: -(h-_container.height())/2 }); } else { _thumb.css({ width: 'auto', height: _container.height(), marginLeft: -(w-_container.width())/2 }); } } else { // Center thumbnails. // a tiny timer fixed the width/height window.setTimeout(function() { _thumb.css({ marginLeft: -( _thumb.width() - _container.width() )/2, marginTop: -( _thumb.height() - _container.height() )/2 }); }, 1); } // add the rel attribute _thumb.attr('rel',_src); // add the title attribute _thumb.attr('title',_title); // add the click functionality to the _thumb _thumb.click(function() { $.galleria.activate(_src); }); // hover classes for IE6 _thumb.hover( function() { $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); } ); _container.hover( function() { _container.addClass('hover'); }, function() { _container.removeClass('hover'); } ); // prepend the thumbnail in the container _container.prepend(_thumb); // show the thumbnail _thumb.css('display','block'); // call the onThumb function _o.onThumb(jQuery(_thumb)); // check active class and activate image if match if (_container.hasClass('active')) { $.galleria.activate(_src); //_span.text(_title); } //----------------------------------------------------------------- // finally delete the original image _img.remove(); }).error(function () { // Error handling _container.html('<span class="error" style="color:red">Error loading image: '+_src+'</span>'); }).attr('src', _src); }); }); }; /** * * @name NextSelector * * @desc Returns the sibling sibling, or the first one * **/ $$.nextSelector = function(selector) { return $(selector).is(':last-child') ? $(selector).siblings(':first-child') : $(selector).next(); }; /** * * @name previousSelector * * @desc Returns the previous sibling, or the last one * **/ $$.previousSelector = function(selector) { return $(selector).is(':first-child') ? $(selector).siblings(':last-child') : $(selector).prev(); }; /** * * @name hasCSS * * @desc Checks for CSS support and returns a boolean value * **/ $$.hasCSS = function() { $('body').append( $(document.createElement('div')).attr('id','css_test') .css({ width:'1px', height:'1px', display:'none' }) ); var _v = ($('#css_test').width() != 1) ? false : true; $('#css_test').remove(); return _v; }; /** * * @name onPageLoad * * @desc The function that displays the image and alters the active classes * * Note: This function gets called when: * 1. after calling $.historyInit(); * 2. after calling $.historyLoad(); * 3. after pushing "Go Back" button of a browser * **/ $$.onPageLoad = function(_src) { // get the wrapper var _wrapper = $('.galleria_wrapper'); // get the thumb var _thumb = $('.galleria img[@rel="'+_src+'"]'); if (_src) { // new hash location if ($.galleria.history) { window.location = window.location.href.replace(/\#.*/,'') + '#' + _src; } // alter the active classes _thumb.parents('li').siblings('.active').removeClass('active'); _thumb.parents('li').addClass('active'); // define a new image var _img = $(new Image()).attr('src',_src).addClass('replaced'); // empty the wrapper and insert the new image _wrapper.empty().append(_img); // insert the caption _wrapper.siblings('.caption').text(_thumb.attr('title')); // fire the onImage function to customize the loaded image's features $.galleria.onImage(_img,_wrapper.siblings('.caption'),_thumb); // add clickable image helper if($.galleria.clickNext) { _img.css('cursor','pointer').click(function() { $.galleria.next(); }) } } else { // clean up the container if none are active _wrapper.siblings().andSelf().empty(); // remove active classes $('.galleria li.active').removeClass('active'); } // place the source in the galleria.current variable $.galleria.current = _src; } /** * * @name jQuery.galleria * * @desc The global galleria object holds four constant variables and four public methods: * $.galleria.history = a boolean for setting the history object in action with named URLs * $.galleria.current = is the current source that's being viewed. * $.galleria.clickNext = boolean helper for adding a clickable image that leads to the next one in line * $.galleria.next() = displays the next image in line, returns to first image after the last. * $.galleria.prev() = displays the previous image in line, returns to last image after the first. * $.galleria.activate(_src) = displays an image from _src in the galleria container. * $.galleria.onImage(image,caption) = gets fired when the image is displayed. * **/ $.extend({galleria : { current : '', onImage : function(){}, activate : function(_src) { if ($.galleria.history) { $.historyLoad(_src); } else { $$.onPageLoad(_src); } }, next : function() { var _next = $($$.nextSelector($('.galleria img[@rel="'+$.galleria.current+'"]').parents('li'))).find('img').attr('rel'); $.galleria.activate(_next); }, prev : function() { var _prev = $($$.previousSelector($('.galleria img[@rel="'+$.galleria.current+'"]').parents('li'))).find('img').attr('rel'); $.galleria.activate(_prev); } } }); })(jQuery); /** * * Packed history extension for jQuery * Credits to http://www.mikage.to/ * **/ jQuery.extend({historyCurrentHash:undefined,historyCallback:undefined,historyInit:function(callback){jQuery.historyCallback=callback;var current_hash=location.hash;jQuery.historyCurrentHash=current_hash;if(jQuery.browser.msie){if(jQuery.historyCurrentHash==''){jQuery.historyCurrentHash='#'}$("body").prepend('<iframe id="jQuery_history" style="display: none;"></iframe>');var ihistory=$("#jQuery_history")[0];var iframe=ihistory.contentWindow.document;iframe.open();iframe.close();iframe.location.hash=current_hash}else if($.browser.safari){jQuery.historyBackStack=[];jQuery.historyBackStack.length=history.length;jQuery.historyForwardStack=[];jQuery.isFirst=true}jQuery.historyCallback(current_hash.replace(/^#/,''));setInterval(jQuery.historyCheck,100)},historyAddHistory:function(hash){jQuery.historyBackStack.push(hash);jQuery.historyForwardStack.length=0;this.isFirst=true},historyCheck:function(){if(jQuery.browser.msie){var ihistory=$("#jQuery_history")[0];var iframe=ihistory.contentDocument||ihistory.contentWindow.document;var current_hash=iframe.location.hash;if(current_hash!=jQuery.historyCurrentHash){location.hash=current_hash;jQuery.historyCurrentHash=current_hash;jQuery.historyCallback(current_hash.replace(/^#/,''))}}else if($.browser.safari){if(!jQuery.dontCheck){var historyDelta=history.length-jQuery.historyBackStack.length;if(historyDelta){jQuery.isFirst=false;if(historyDelta<0){for(var i=0;i<Math.abs(historyDelta);i++)jQuery.historyForwardStack.unshift(jQuery.historyBackStack.pop())}else{for(var i=0;i<historyDelta;i++)jQuery.historyBackStack.push(jQuery.historyForwardStack.shift())}var cachedHash=jQuery.historyBackStack[jQuery.historyBackStack.length-1];if(cachedHash!=undefined){jQuery.historyCurrentHash=location.hash;jQuery.historyCallback(cachedHash)}}else if(jQuery.historyBackStack[jQuery.historyBackStack.length-1]==undefined&&!jQuery.isFirst){if(document.URL.indexOf('#')>=0){jQuery.historyCallback(document.URL.split('#')[1])}else{var current_hash=location.hash;jQuery.historyCallback('')}jQuery.isFirst=true}}}else{var current_hash=location.hash;if(current_hash!=jQuery.historyCurrentHash){jQuery.historyCurrentHash=current_hash;jQuery.historyCallback(current_hash.replace(/^#/,''))}}},historyLoad:function(hash){var newhash;if(jQuery.browser.safari){newhash=hash}else{newhash='#'+hash;location.hash=newhash}jQuery.historyCurrentHash=newhash;if(jQuery.browser.msie){var ihistory=$("#jQuery_history")[0];var iframe=ihistory.contentWindow.document;iframe.open();iframe.close();iframe.location.hash=newhash;jQuery.historyCallback(hash)}else if(jQuery.browser.safari){jQuery.dontCheck=true;this.historyAddHistory(hash);var fn=function(){jQuery.dontCheck=false};window.setTimeout(fn,200);jQuery.historyCallback(hash);location.hash=newhash}else{jQuery.historyCallback(hash)}}}); Thanks! Steve

This is a part of a jquery photo gallery script, so I am not sure how much messing I can do to it without breaking the result. I just thought it would be nice if the photos displayed in order. Where might I add this glob() function?

What and where do I add to sort the output of this alphabetically? <?php if ($handle = opendir('img')) { while (false !== ($pics = readdir($handle))) { if ($pics != "." && $pics != "..") { $picfile_x = substr($pics, 0, -4); $piclist .= '<li><img src="img/'.$pics.'" title="'.$picfile_x.'" alt="'.$picfile_x.'"/></li>'; } } closedir($handle); } ?> Thanks! Steve