DM Design » Ajax http://www.dmdesign.ro Solutia completa pentru un site perfect | Web Design, Web Site, Intretinere Web, Optimizare SEO, Grafica, Wed, 28 Sep 2011 17:35:29 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Scaneaza directoarele cu PHP http://www.dmdesign.ro/ajax/scaneaza-directoarele-cu-php.dmdesign http://www.dmdesign.ro/ajax/scaneaza-directoarele-cu-php.dmdesign#comments Wed, 19 Nov 2008 13:26:43 +0000 ionut.mantescu http://ionutdesign.wordpress.com/?p=87 scaneaza-directoarele-cu-phpSa ne imaginam ca dorim sa avem o pagina in care sa vizualizam toate imaginile noastre.

O posibilitate este sa inseram imagine cu imagine in codul sursa. Ar fi o idee buna.. daca nu ar trebui ca de fiecare data cand vrem sa adaugam un element nou trebuie sa mai adaugam manual cateva linii de cod.

O alta metoda ar fi sa folosim o baza de date MySQL. Aceasta metoda este perfecta pentru majoritatea site-urilor.

Dar, de nenumarate ori cea mai buna solutie este sa utilizam PHP-ul pentru scanarea “portofoliului” tau si apoi sa creeze dinamic codul sursa pentru voi. Apoi daca vreti ca in pagina sa apara un nou preview, trebuie doar sa copiati imaginea si preview-ul ei in directorul prestabilit si sa lasati PHP-ul sa faca restul.

Sa punem pe foaie ce anume ne trebuie:

- folosirea PHP pentru a scana directorul cu imagini. Va scana fiecare imagine si o va afisa in pagina noastra.
- o sa folosim css pentru formatarea paginii.
- cand un utilizator da click pe un preview, vom folosi JQuery pentru a vizualiza imaginea intreaga.
- daca utilizatorul are Javascript dezactivat, el va fi automat directionat catre o pagina ce contine imaginea la dimensiunea normala.

Cum utilizam?

Adaugarea imaginilor la portofoliu este simpla. Imaginile trebuie sa aiba dimensiunea de 500x350px. Adaugati imaginile in directorul “images/featured”.
Preview-rile trebuie sa aiba dimensiunea 50x50px si adaugate in directoru “images/tn”.

Fisierul HTML

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  2. <html xmlns=“http://www.w3.org/1999/xhtml”>
  3. <head>
  4. <title>Scanning Directories with PHP</title>
  5. <script src=“js/jquery-1.2.6.pack.js” type=“text/javascript”></script>
  6. <script src=“js/scripts.js” type=“text/javascript”></script>
  7. <link href=“default.css” rel=“stylesheet” type=“text/css” />
  8. </head>
  9. <body>
  10. <div id=“container”>
  11. <h1>Some Portfolio</h1>
  12. <div id=“featured”>
  13. <?php
  14. $featured_dir = ‘images/featured/’;
  15. $scan = scandir($featured_dir);
  16. echo ‘<img src=”‘. $featured_dir . $scan[2] . ‘” alt=”image” />’;
  17. ?>
  18. </div>
  20. <ul id=“options”>
  21. <?php
  22. $dir = ‘images/tn/’;
  23. $scan = scandir($dir);
  25. for ($i=0; $i<count($scan); $i++) {
  26. if ($scan[$i] != ‘.’ && $scan[$i] != ‘..’) {
  27. echo ‘
  28. <li>
  29. <a href=”‘ . $featured_dir . $scan[$i] . ‘”>
  30. <img src=”‘. $dir . $scan[$i] . ‘” alt=”‘. $scan[$i] . ‘” />
  31. </a>
  32. </li>’;
  33. }
  34. }
  35. ?>
  36. </ul>
  37. </div>
  38. </body>
  39. </html>

Fisierul CSS

Puteti vizualiza fisierul css aici.

Pentru Internet Explorer 6 trebuie sa mai adaugam la fisierul css urmatorul cod

  1. ul#options {
  2. …misc styles…
  3. height: 1%;
  4. }

Codul Javascript complet (JQuery)

  1. $(function() {
  2. $.preloadImage = function(path) {
  3. $(“#featured img”).attr(“src”, path);
  4. }
  6. $(‘ul#options li img’).click(function() {
  7. $(‘ul li img’).removeClass(‘selected’);
  8. $(this).addClass(‘selected’);
  10. var imageName = $(this).attr(‘alt’);
  12. $.preloadImage(‘images/featured/’ + imageName);
  14. var chopped = imageName.split(‘.’);
  15. $(‘#featured h2′).remove();
  16. $(‘#featured’)
  17. .prepend(‘<h2 class=”description”>’ + chopped[0] + ‘</h2>’).children(‘h2′).fadeIn(500).fadeTo(200, .6);
  18. });
  20. $(‘ul#options li a’).click(function() {
  21. return false;
  22. });
  23. });

Puteti descarca codul sursa complet de aici.

]]> http://www.dmdesign.ro/ajax/scaneaza-directoarele-cu-php.dmdesign/feed 0 12 galerii de imagini in javascript http://www.dmdesign.ro/ajax/12-galerii-de-imagini-in-javascript.dmdesign http://www.dmdesign.ro/ajax/12-galerii-de-imagini-in-javascript.dmdesign#comments Wed, 19 Nov 2008 08:51:32 +0000 ionut.mantescu http://ionutdesign.wordpress.com/?p=24 Sunt un numar mare de galerii de imagini create in Flash, dar uneori flash-ul nu este adecvat sau nu poate fi folosit, deci trebuie sa ne indreptam catre Javascript si CSS. In continuare va prezint o lista cu cele mai bune solutii Javascript si Ajax pentru a crea astfel de galerii.

(E)2 Photo Gallery Made with Mootools – (E)2 Photo Gallery este un script de galerie open source creat cu libraria javascript Mootools. Creata pentru a va permite incarcarea pozelor dintr-un director favorit – doar selectati in ce director sa fie cautate imaginile iar scriptul le va incarca automat folosind PHP.

1191

jgGalViewIII – aici avem un alt script pentru galerie foto, exceptand faptul ca este inca in faza de concept.

jgGalViewIII

Zenphoto – Zenphoto este raspunsul la majoritatea intrebarilor legate de solutiile de galeriile online care merita folosite.

Zenphoto

Imago – Imago este o galerie de imaginii mica, simpla si usor de folosit. Are la baza javascript (mootools) si nu foloseste baza de date.

Imago

Modified Hoverbox Image Gallery – Aceasta este o versiune modificata a Nathan’s incredible Hoverbox Image Gallery. Aceasta versiune foloseste o singura imagine pentru a previzualizarea si vizualizarea imaginilor si suporta partial starile :active si :focus pentru utilizatorii care folosesc tastatura.

Modified Hoverbox Image Gallery

Spry – Galerie de imagini creata cu Spry

Spry

FrogJS Javascript Gallery – FrogJS este o galerie simplista, dar nu o alternativa la celelalte galerii (ex. Lightbox JS).

FrogJS Javascript Gallery

slideViewer – slideViewer este un mic plugin JQuery (1.5Kb) care va permite sa creati instant o galerie de imagini.

871

Photo Folder – Photo Folder scaneaza un director predefinit dupa imagini JPEG si genereaza automat pictograme pentru imagini.

Photo Folder

Pyxy – Pyxy Gallery este o galerie de imagini in format PHP cu Ajax si Javascript care otional foloseste Lightbox.js. Este creata pentru a fi de dimensiune mica.

Pyxy

JonDesign’s SmoothGallery – Folosind Mootools v1.11, aceasta galerie java are un efect de cross-fade al imaginilor.

JonDesign's SmoothGallery

Minishowcase – Minishowcase este o galerie php/javascript mica si simpla ce nu foloseste baze de date.

Minishowcase

]]> http://www.dmdesign.ro/ajax/12-galerii-de-imagini-in-javascript.dmdesign/feed 0 Cum sa creezi propriul script pentru Contact http://www.dmdesign.ro/ajax/cum-sa-creezi-propriul-script-pentru-contact.dmdesign http://www.dmdesign.ro/ajax/cum-sa-creezi-propriul-script-pentru-contact.dmdesign#comments Tue, 18 Nov 2008 11:43:05 +0000 ionut.mantescu http://ionutdesign.wordpress.com/?p=6 Ajax (Asynchronous Javascript and Xml) a devenit o unealta foarte populara in web design. Acest tutorial te va invata cum sa-ti creezi propriul script pentru Contact folosind PHP si JQuery.

Pasul 1 – HTML

Pentru inceput vom crea un nou fisier pe care il vom numi contact.html, in care o sa cream un formular html simplu, ca in exemplul urmator:

<div class="loader"></div>
<div class="bar"></div>
<div id="container">
  <form id="contactForm" method="" action="mail.php">
  <p>
    <label for="name">Name </label>
    <input id="name" name="name" />
  </p>
  <p>
    <label for="email">E-Mail </label>
    <input id="email" name="email" />
  </p>
  <p>
    <label for="message">Your Message </label>
    <textarea id="message" name="message" rows="4" cols="30" ></textarea>
  </p>
  <p>
    <input class="submit" type="submit" value="submit"/>
  </p>
  </form>
</div>

Acum am obtiunt un formular de contact care va trimite datele catre mail.php

Pasul 2 – PHP

Acum vom crea un fisier php numit mail.php – acesta va prelua datele din formularul nostru.

<?php
//declare our variables
$name = $_GET['name'];
$email = $_GET['email'];
$comment = $_GET['comment'];
//get todays date
$todayis = date("l, F j, Y, g:i a") ;
//set a title for the message
$subject = "A message";
$message = " Message: $comment \r \n From: $name  \r \n Reply to: $email";

//put your email address here
mail("email@address.com", $subject, $message);
?>
<!--Display a thankyou message in the callback -->
<h1><span>Thank you  <h10><?php echo $name ?></h10></span></h1>
<p>
  <span>Your message will be answered as soon as possible.</span>
</p>
<h3>Message sent on: </h3>
<p>
  <span><?php echo $todayis ?></span>
</p>

In aceasta pagina vom crea cateva variabile care vor prelua numele, adresa de email si mesajul din formular, apoi folosind functia php mail() va trimite acestea catre adresa specificata. Pentru acest tutorial am folosit adresa email@example.com, dar puteti folosi orice adresa doriti.
Dupa ce email-ul s-a trimis, script-ul va afisa un mesaj de multumire folosind informatiile colectate din formular.

Pasul 3 – JQuery

Acum urmeaza partea cea mai interesanta. Pentru a putea incepe trebuie sa includem scripul JQuery. Puteti descarca de pe site-ul jquery, apoi sa includeti in header-ul html urmatoarea linie:

<script type="text/javascript" src="yourDirectory/jquery.js">

Jquery este un script java creat pentru a face lucrul cu dvs mai usor si eficient. Daca este prima data cand va intalniti cu acest script puteti intra pe 15 Days of JQuery.
Dorim sa cream o functie care sa trimita formularul nostru fara sa ne mai trimita catre alta pagina. Putem face aceasta astfel:

//engage on the page load
$(function() {
  //trigger ajax on submit
  $('#contactForm').submit( function(){

    //hide the form
    $('#contactForm').hide();

    //show the loading bar
    $('.loader').append($('.bar'));
    $('.bar').css({display:'block'});

    //send the ajax request
    $.get('mail.php',{name:$('#name').val(),
                      email:$('#email').val(),
                      comment:$('#message').val()},

    //return the data
    function(data){
      //hide the graphic
      $('.bar').css({display:'none'});
      $('.loader').append(data);
    });

  //stay on the page
  return false;
  });
});

Acest cod va folosi un eveniment care va ascunde formularul si va afisa o bara de progres atunci cand formularul este trimis. $.get() este linia care face scriptul sa apeleze mail.php si sa trimita detaliile formularului folosind metoda GET. Odata ce scriptul este apelat corect rezultatul v-a fi afisat pe ecran.

Pasul 4 – CSS

Ultimul pas este sa adaugam formatarea css formularului nostru pentru a ne asigura ca acesta este afisat corect si estetic. Nu este necesar, dar face afisarea acestuia mult mai buna.

body {
  font-family:helvetica;
}

.loader {

}

.bar{
  display:none;
  background: url('ajax-loader.gif') no-repeat;
  margin-left:20px;
  margin-top:50px;
  height:20px;
  width: 230px;
}

#contactForm{
  float:left;
  position:relative;
  background-color: #fdfdfd;
  height: 200px;
}

#container {
  padding:20px;
  float:left;
  position:relative;
  height: 200px;
  width: 100px;
}

Pasul 5 – Finalizarea proiectului

Daca punem totul impreuna, atunci fisierul contact.html ar trebui sa arate asa:

<html>
<head>
<script type="text/javascript" src="../jquery.js"></script>

<script type="text/javascript">
//engage on the page load
$(function() {
  //trigger ajax on submit
  $('#contactForm').submit( function(){

  //hide the form
  $('#contactForm').hide();

  //show the loading bar
  $('.loader').append($('.bar'));
  $('.bar').css({display:'block'});

  //send the ajax request
  $.get('mail.php',{name:$('#name').val(),
                    email:$('#email').val(),
                    comment:$('#message').val()},

  //return the data
  function(data){
    //hide the graphic
    $('.bar').css({display:'none'});
    $('.loader').append(data);
  });

  //stay on the page
  return false;
  });
});
</script>
<style type="text/css">

body {
  font-family:helvetica;
}

.loader {

}

.bar{
  display:none;
  background: url('ajax-loader.gif') no-repeat;
  margin-left:20px;
  margin-top:50px;
  height:20px;
  width: 230px;
}

#contactForm{
  float:left;
  position:relative;
  background-color: #fdfdfd;
  height: 200px;
}

#container {
  padding:20px;
  float:left;
  position:relative;
  height: 200px;
  width: 100px;
}

</style>
</head>
<body>
<div class="loader"></div>
<div class="bar"></div>
<div id="container">
  <form id="contactForm" method="" action="mail.php">
  <p>
    <label for="name">Name </label>
    <input id="name" name="name" />
  </p>
  <p>
    <label for="email">E-Mail </label>
    <input id="email" name="email" />
  </p>
  <p>
    <label for="message">Your Message </label>
    <textarea id="message" name="message" rows="4" cols="30" ></textarea>
  </p>
  <p>
    <input class="submit" type="submit" value="submit"/>
  </p>
  </form>
</div>
</body>
</html>

Este asa de simplu. :)
Puteti descarca intregul script de aici.

]]> http://www.dmdesign.ro/ajax/cum-sa-creezi-propriul-script-pentru-contact.dmdesign/feed 3