![\"\"](\"http:\/\/nathalielawhead.com\/noodles\/codeshare\/demo.png\")
<\/p>\n
This image gallery lists a bunch of thumbnails. If you click on a thumbnail there’s a small CSS fade transition, and the larger image shows.
\nIt works on mobile and all the browsers (including IE).
\nVisitors can even save or share images posted there. If you look at the code there’s an option for making sharing and saving images harder (by setting backgroundImage to the fullscreen image, instead of it being in it’s own image element)…
\nThere’s also space for your own header or footer (optional).
\nThere’s also optional image and thumbnail captions…
\nI mean, that’s it! Super simple.<\/p>\n
* Download it on github here.<\/a> You are absolutely free to use any and all code from it!<\/p>\n …So that’s one thing.<\/p>\n The other project I’ve been working on is a desktop Electron App. It does a bunch of fun things. It’s a bit of a web-app too… I’m really proud of it and can’t wait to actually show the finished thing.<\/p>\n In the meantime here’s some code that I decided to share because I feel like these are oddly specific things where it would be great if people google for it and find an easy copy-paste solution for themselves, without having to extend too much effort in making their own.<\/p>\n — — — — — — — <\/p>\n Javascript and PHP countdown timer (by server time)<\/strong><\/p>\n The first one is a countdown timer that counts down based on server time. It pings the server every 5 minutes (or you can set that to less if you want), to update the countdown. The thing about countdown timers is that you (sometimes) don’t really want to use whatever javascript solution, and (in this case) PHP was the easiest solution, because people can set their system clock forward or backward and that kinda is cheating… In cases where you want something to terminate after a set amount of time.<\/p>\n So here it is! Use whatever you want from it…<\/p>\n * You can download the code here<\/a> The javascript: <\/p>\n –<\/p>\n And the PHP file: <\/p>\n –<\/p>\n Note that you need to upload these and access them from your server in order for them to work.<\/p>\n — — — — — — — <\/p>\n
\n* Read the documentation for how to customize it here.<\/a>
\n* Live demo of it here.<\/a><\/p>\n
\nThe countdown clock also rounds down the numbers by days (if there are more), then if you get closer to the end date it rounds by hours, and then minutes…<\/p>\n
\n* Here’s a small demo<\/a><\/p>\n
\n–<\/p>\n\/\/from eventinfo .php<\/span>\r\nvar<\/span> eventExpiration;\r\nvar<\/span> serverDate;\r\nvar<\/span> int_timer;\r\n\r\nvar<\/span> url_to_phpFile =<\/span> \"countdown.php\"<\/span>;\r\n\r\nfunction<\/span> calculateTimeLeft(boolShouldRefresh){\r\n\t\r\n\t\/\/for the interval, refresh serverDate from php<\/span>\r\n\t\/\/set to false if called outside of the interval<\/span>\r\n\tif<\/span>(boolShouldRefresh){\r\n\t\t\/\/get time from server again (update time)<\/span>\r\n\t\tloadServerTimePHP(false<\/span>);\r\n\t}\r\n\t\r\n\t\/\/<\/span>\r\n\tvar<\/span> num_currentTime =<\/span> new<\/span> Date<\/span>(Date<\/span>.parse(serverDate));\r\n\t\/\/will expire at midnight that day<\/span>\r\n\tvar<\/span> num_targetDate =<\/span> new<\/span> Date<\/span>(eventExpiration);\r\n\t\r\n\t\/\/parse it for calculating<\/span>\r\n\tvar<\/span> distance =<\/span> num_targetDate -<\/span> num_currentTime;\r\n\t\/\/Time calculations for days, hours, minutes and seconds<\/span>\r\n\t\/\/values calculated for the timer<\/span>\r\n\t\/\/math...<\/span>\r\n\tvar<\/span> seconds=<\/span>Math<\/span>.floor(distance\/<\/span>1000<\/span>);\r\n\tvar<\/span> minutes=<\/span>Math<\/span>.floor(seconds\/<\/span>60<\/span>);\r\n\tvar<\/span> hours=<\/span>Math<\/span>.floor(minutes\/<\/span>60<\/span>);\r\n\tvar<\/span> days=<\/span>Math<\/span>.floor(hours\/<\/span>24<\/span>);\r\n\t\/\/<\/span>\r\n\t\/\/math...<\/span>\r\n\tseconds%=<\/span>60<\/span>;\r\n\tminutes%=<\/span>60<\/span>;\r\n\thours%=<\/span>24<\/span>;\r\n\t\/\/<\/span>\r\n\t\/\/numbers to strings <\/span>\r\n\tsec =<\/span> String<\/span>(seconds);\r\n\tmin =<\/span> String<\/span>(minutes);\r\n\thrs =<\/span> String<\/span>(hours);\r\n\t\/\/<\/span>\r\n\td =<\/span> String<\/span>(days);\r\n\t\/\/if single digit \"0\" infront<\/span>\r\n\tif<\/span> (sec.length<<\/span>2<\/span>) {\r\n\t\tsec=<\/span>\"0\"<\/span>+<\/span>sec;\r\n\t}\r\n\tif<\/span> (min.length<<\/span>2<\/span>) {\r\n\t\tmin=<\/span>\"0\"<\/span>+<\/span>min;\r\n\t}\r\n\tif<\/span> (hrs.length<<\/span>2<\/span>) {\r\n\t\thrs=<\/span>\"0\"<\/span>+<\/span>hrs;\r\n\t}\r\n\t\/\/the above formatted<\/span>\r\n\tt =<\/span> String<\/span>(hrs) +<\/span> \" hours, \"<\/span> +<\/span> String<\/span>(min) +<\/span> \" minutes.\"<\/span>;\r\n\t\/\/format days to hide, be plural, or singular...<\/span>\r\n\tif<\/span>(String<\/span>(days)<<\/span>1<\/span>){\r\n\t\td =<\/span> \"\"<\/span>;\r\n\t}else<\/span> if<\/span>(String<\/span>(days)<<\/span>2<\/span>){\r\n\t\td =<\/span> days +<\/span> \" Day, \"<\/span>;\r\n\t}else<\/span>{\r\n\t\td =<\/span> days +<\/span> \" Days\"<\/span>;\r\n\t\tt =<\/span> \"\"<\/span>; \/\/hide the time because there are too many days<\/span>\r\n\t}\r\n\t\/\/atesat set asfasd<\/span>\r\n\tvar<\/span> str_formatted_time =<\/span> d +<\/span> t;\/\/ + \":\" + String(sec);<\/span>\r\n\t\/\/<\/span>\r\n\t\r\n\tdocument<\/span>.getElementById(\"_countdown\"<\/span>).innerHTML =<\/span> \"\"<\/span> +<\/span> \"Event time left: \"<\/span> +<\/span> \"<\/span>\"<\/span> +<\/span> \"\"<\/span> +<\/span> str_formatted_time +<\/span> \"<\/span>
\"<\/span>;\r\n\t\r\n\t\/\/start or stop the app here, hide ALL UI, throw error!<\/span>\r\n\t\r\n\tif<\/span> (num_currentTime>=<\/span>num_targetDate) {\r\n\t\t\/\/event is over<\/span>\r\n\t\tconsole.log(\"The event is over\"<\/span>);\r\n\t\treturn<\/span> false<\/span>;\r\n\t}else<\/span>{\r\n\t\tconsole.log(\"The event is still ongoing\"<\/span>);\r\n\t\treturn<\/span> true<\/span>;\r\n\t}\r\n\t\r\n\tconsole.log(str_formatted_time);\r\n}\r\n\r\nfunction<\/span> start_timer(){\r\n\t\/\/timer fires off every 5 minutes<\/span>\r\n\t\/\/timer is therefore updated every five minutes<\/span>\r\n\t\/\/this keeps the server from getting flooded with requests to check the time every second<\/span>\r\n\tclearInterval(int_timer);\r\n\tint_timer =<\/span> setInterval(calculateTimeLeft, 300000<\/span>, [true<\/span>]);\r\n}\r\n\r\n\/\/LOAD THE PHP<\/span>\r\n\/\/load the date information<\/span>\r\n\/\/date is taken from server to prevent cheating<\/span>\r\n\/\/server time is permanent<\/span>\r\nfunction<\/span> loadServerTimePHP(){\r\n\t\/\/load the event info php and get all values from that array<\/span>\r\n\t\/\/set the download locations too<\/span>\r\n\t\/\/<\/span>\r\n\tvar<\/span> req =<\/span> new<\/span> XMLHttpRequest();\r\n\t\/\/listeners...<\/span>\r\n\treq.onload =<\/span> function<\/span>() {\r\n\t\t\r\n\t\t\/\/get the array values, set vars...<\/span>\r\n\t\tvar<\/span> arr =<\/span> JSON.parse(this<\/span>.responseText);\r\n\t\t\/\/<\/span>\r\n\t\teventExpiration =<\/span> arr[0<\/span>];\r\n\t\tserverDate =<\/span> arr[1<\/span>];\r\n\t\t\/\/<\/span>\r\n\t\tconsole.log(\"eventExpiration: \"<\/span> +<\/span> eventExpiration);\r\n\t\tconsole.log(\"serverDate: \"<\/span> +<\/span> serverDate);\r\n\t\t\/\/for debug pruposes show time and expiration...<\/span>\r\n\t\tdocument<\/span>.getElementById(\"_currTime\"<\/span>).innerHTML =<\/span> \"Event expiration: \"<\/span> +<\/span> eventExpiration +<\/span> \"
Current Server Time: \"<\/span> +<\/span> serverDate;\r\n\t\t\r\n\t\tcalculateTimeLeft(false<\/span>);\/\/call on first run to populate text field<\/span>\r\n\t\t\/\/successfully loaded, start the timer<\/span>\r\n\t\tstart_timer();\r\n\t\t\r\n\t\t\r\n\t};\r\n\t\r\n\treq.loadend =<\/span> function<\/span>() {\r\n\t\tconsole.log(\"load ended\"<\/span>);\r\n\t}\t\r\n\t\/\/on errors, call again...<\/span>\r\n\treq.onerror =<\/span> function<\/span>(){\r\n\t\tconsole.log(\"error loading php\"<\/span>);\r\n\t}\r\n\treq.ontimeout =<\/span> function<\/span>(){\r\n\t\tconsole.log(\"timeout loading php\"<\/span>);\r\n\t}\r\n\t\r\n\t\/\/start...<\/span>\r\n\treq.open(\"get\"<\/span>, url_to_phpFile, true<\/span>);\r\n\treq.send();\r\n\t\r\n}\r\n\r\n\/\/CALL loadServerTimePHP() to start<\/span>\r\n<\/pre>\n<\/div>\n
\n–<\/p>\n \r\n\/\/set event to your desired timezone<\/span>\r\n\/\/see: https:\/\/www.php.net\/manual\/en\/function.date-default-timezone-set.php<\/span>\r\ndate_default_timezone_set<\/span>('America\/Los_Angeles'<\/span>);\r\n\r\n\/\/CHANGE THIS VALUE TO SET TO DESIRED EVENT EXPIRATION<\/span>\r\n\/\/the format is imporant<\/span>\r\n\/\/month should be spelled out, day and year must be numbers<\/span>\r\n\/\/MONTH DAY YEAR<\/span>\r\n$eventExpiration<\/span> =<\/span> \"September 20 2030\"<\/span>;\r\n\r\n\/\/DO NOT change these...<\/span>\r\n$serverdate<\/span> =<\/span> date<\/span>('D M d Y H:i:s O'<\/span>);\r\n$arr<\/span> =<\/span> array<\/span>($eventExpiration<\/span>, $serverdate<\/span>);\r\n\r\n\/\/send as array<\/span>\r\n\/\/echo( json_encode($arr) );<\/span>\r\necho<\/span> json_encode<\/span>($arr<\/span>);\r\n\r\n?><\/span>\r\n<\/pre>\n<\/div>\n