Buscador de imágenes con filtros y thumbnails, ¿php? (Al final javascript)

Question

Buscador de imágenes con filtros y thumbnails, ¿php? (Al final javascript)

Archivado

Takehiko 07 abr 2011 11:11 *

MegaAdicto!!!

922 mensajes
desde may 2006
en Madrid

Steam ID: T4k3hik0

Editado 1 vez. Última: 15/04/2011 - 17:17:58 por Takehiko.

*

Hola buenas eolianos, lo iba a poner en el rincón, pero bueno lo dejo en Miscelánea, y si no va aquí pues que lo muevan. :-|

A lo que iba

Estoy intentando hacer o buscar algo así para una web que estoy haciendo.

http://www.refin.it/product-finder-results-research/?product_finder=ambientazioni

La cuestión es seleccionar una serie de "filtros" y que al buscar aparezcan una serie de thumbnails con los que coincidan..

Después también esta lo siguiente

http://www.gardeniaorchidea.com/es/ricerca.php

O con desplegables, me daría igual, estoy buscando algún ejemplo o algo, pero no hay manera... [+furioso]

he encontrado esto - http://bsoftimagetheque.bsoftco.info/

pero no hace lo que quiero [+risas]

, ni creo que me sirva como base.. alguien me puede decir por donde puedo buscar algo parecido o ayudar, seria para integrar una búsqueda así a un diseño que tengo ya hecho..

Un Saludo y Gracias! [boing]

3 respuestas

Answer 1 · 2011-04-14T16:28:56+00:00

Finalmente encontré esto:
http://www.danieltulp.nl/work/quicksand-multiple.htm :-|

Que me puede servir, ahora bien, llevo varios días intentando añadir un campo más y no hay manera. :-?

Al menos por si alguien busca algo parecido, aquí lo tiene.

La descarga del ejemplo la podréis encontrar aquí
http://forum.jquery.com/topic/quicksand-plugin-using-multiple-filters

Un Saludo.. no se si alguien me puede echar un cable para añadir un campo más mirando el codigo, lo que hay que modificar es...

$('select').change(
               function() {
                  $(this).addClass('animate');
                  if ($($filterAlpha).val() == '0'){
                     if ($($filterBeta).val() == '0'){
                        if ($($filterGamma).val() == '0'){
                           //0-0-0
                           var $filteredData = $data.find('div');
                        } else {
                           //0-0-1
                           var $filteredData = $data.find('div[data-gamma=' + $($filterGamma).val() + ']' );
                        }
                     } else {
                        if ($($filterGamma).val() == '0'){
                           //0-1-0
                           var $filteredData = $data.find('div[data-beta=' + $($filterBeta).val() + ']' );
                        } else {
                           //0-1-1
                           var $filteredData = $data.find('div[data-beta=' + $($filterBeta).val() + ']' + 'div[data-gamma=' + $($filterGamma).val() + ']');
                        }
                     }
                  } else {
                     if ($($filterBeta).val() == '0'){
                        if ($($filterGamma).val() == '0'){
                           //1-0-0
                           var $filteredData = $data.find('div[data-alpha=' + $($filterAlpha).val() + ']' );
                        } else {
                           //1-0-1
                           var $filteredData = $data.find('div[data-alpha=' + $($filterAlpha).val() + ']' + 'div[data-gamma=' + $($filterGamma).val() + ']');
                        }
                     } else {
                        if ($($filterGamma).val() == '0'){
                           //1-1-0
                           var $filteredData = $data.find('div[data-alpha=' + $($filterAlpha).val() + ']' + 'div[data-beta=' + $($filterBeta).val() + ']');
                        } else {
                           //1-1-1
                           var $filteredData = $data.find('div[data-alpha=' + $($filterAlpha).val() + ']' + 'div[data-beta=' + $($filterBeta).val() + ']' + 'div[data-gamma=' + $($filterGamma).val() + ']');
                        }
                     }
                  }

ese es el filtro, que filtra "alpha", "beta" y "gamma", las opciones de a continuación.

<form id="filter">
         <select name="alpha">
            <option value="0">All items</option>
            <option value="1">Pepper</option>
            <option value="2">Apple</option>
         </select>
         <select name="beta">
            <option value="0">All colours</option>
            <option value="1">Red</option>
            <option value="2">Green</option>
         </select>
         <select name="gamma">
            <option value="0">All places</option>
            <option value="1">Couche</option>
            <option value="2">Table</option>
         </select>
      </form>

solo necesito un filtro más, "delta" [snif]

por cierto el javascript de quicksand que hay en la descarga no es bueno.

seria el siguiente:
https://github.com/razorjack/quicksand/raw/master/jquery.quicksand.js

Un Saludo! [Alaa!]

Edito:

He probado con algo así:

<script type="text/javascript">
         // DOMContentLoaded
         $(function() {
            // bind dropdowns in the form
            var $filterAlpha = $('#filter select[name="alpha"]');
            var $filterBeta = $('#filter select[name="beta"]');
            var $filterGamma = $('#filter select[name="gamma"]');
            var $filterDelta = $('#filter select[name="delta"]');

            // get the first collection
            var $applications = $('#applications');

            // clone applications to get a second collection
            var $data = $applications.clone();

            // attempt to call Quicksand on every form change
            $('select').change(
               function() {
                  $(this).addClass('animate');
                  if ($($filterAlpha).val() == '0'){
                     if ($($filterBeta).val() == '0'){
                        if ($($filterGamma).val() == '0'){
                           if ($($filterDelta).val() == '0'){
                           
                           
                           //0-0-0
                           var $filteredData = $data.find('div');
                        } else {
                           //0-0-1
                           var $filteredData = $data.find('div[data-gamma=' + $($filterGamma).val() + ']' );
                        }
                     } else {
                        if ($($filterGamma).val() == '0'){
                           //0-1-0
                           var $filteredData = $data.find('div[data-beta=' + $($filterBeta).val() + ']' );
                        } else {
                           //0-1-1
                           var $filteredData = $data.find('div[data-beta=' + $($filterBeta).val() + ']' + 'div[data-gamma=' + $($filterGamma).val() + ']');
                        }
                     }
                  } else {
                     if ($($filterBeta).val() == '0'){
                        if ($($filterGamma).val() == '0'){
                           //1-0-0
                           var $filteredData = $data.find('div[data-alpha=' + $($filterAlpha).val() + ']' );
                        } else {
                           //1-0-1
                           var $filteredData = $data.find('div[data-alpha=' + $($filterAlpha).val() + ']' + 'div[data-gamma=' + $($filterGamma).val() + ']');
                        }
                     } else {
                        if ($($filterGamma).val() == '0'){
                           //1-1-0
                           var $filteredData = $data.find('div[data-alpha=' + $($filterAlpha).val() + ']' + 'div[data-beta=' + $($filterBeta).val() + ']');
                        } else {
                           //1-1-1
                           var $filteredData = $data.find('div[data-alpha=' + $($filterAlpha).val() + ']' + 'div[data-beta=' + $($filterBeta).val() + ']' + 'div[data-gamma=' + $($filterGamma).val() + ']');
                        }
                        
                        
                        
                     }
                  }
               } else {
                  if ($($filterAlpha).val() == '0'){
                     if ($($filterBeta).val() == '0'){
                        if ($($filterGamma).val() == '0'){
                           //1-0-0-0
                           var $filteredData = $data.find('div[data-delta=' + $($filterdelta).val() + ']' );
                        } else {
                           //1-0-1
                           //1-0-0-1
                           var $filteredData = $data.find('div[data-alpha=' + $($filterAlpha).val() + ']' + 'div[data-delta=' + $($filterdelta).val() + ']');
                        }
                     } else {
                        if ($($filterGamma).val() == '0'){
                           //1-1-0
                           //1-0-1-0
                           var $filteredData = $data.find('div[data-alpha=' + $($filterAlpha).val() + ']' + 'div[data-gamma=' + $($filterGamma).val() + ']');
                        
                        } else {
                           //1-1-1
                           //1-0-1-1
                           var $filteredData = $data.find('div[data-alpha=' + $($filterAlpha).val() + ']' + 'div[data-gamma=' + $($filtergamma).val() + ']' + 'div[data-delta=' + $($filterdelta).val() + ']');
                        }
                     }
                        
                        
                        
                        } else {
                                                      
                           //1-0-1-1
                           //1-1-1-0
                           var $filteredData = $data.find('div[data-alpha=' + $($filterAlpha).val() + ']' + 'div[data-beta=' + $($filterbeta).val() + ']' + 'div[data-gamma=' + $($filtergamma).val() + ']');
                        
               
                        }
                        
                  
               
                        
                        } else {
                           //1-1-1-0
                           //1-1-1-1
                           var $filteredData = $data.find('div[data-alpha=' + $($filterAlpha).val() + ']' + 'div[data-beta=' + $($filterbeta).val() + ']' + 'div[data-gamma=' + $($filtergamma).val() + ']'+ 'div[data-delta=' + $($filterdelta).val() + ']');
                        
                        }
               
                  
                        
                        
                     }
                  }
                  // finally, call quicksand
                  $applications.quicksand($filteredData, {
                      duration: 1000,
                      easing: 'easeInOutQuad',
                     adjustHeight:     'auto'
               });
            });
         });
      
       </script>

Pero nada, no funciona, haber si consigo algo pronto... Un Saludo

Answer 2 · 2011-04-20T11:27:38+00:00

Bueno aquí dejo la solución a mi problema, por si alguien la necesita, aquí dejo el código.

Ya tiene 4 filtros, en vez de 3 filtro que tenia el ejemplo que encontré..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl" >
   <head>
      <title>Quicksand with multiple criteria</title>
      <meta http-equiv="content-type" content="text/html;charset=utf-8" />
      <!--load jqeury lib-->
      <script src="js/jquery-min.js" type="text/javascript"></script>
      <!--quicksand en easing laden, alleen nodig voor projectenpagina-->
      <script src="js/jquery.quicksand.min.js" type="text/javascript"></script>
      <script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
      <script type="text/javascript">
         // DOMContentLoaded
         $(function() {
            // bind dropdowns in the form
            var $filterAlpha = $('#filter select[name="alpha"]');
            var $filterBeta = $('#filter select[name="beta"]');
            var $filterGamma = $('#filter select[name="gamma"]');
            var $filterDelta = $('#filter select[name="delta"]');

            // get the first collection
            var $applications = $('#applications');

            // clone applications to get a second collection
            var $data = $applications.clone();

            // attempt to call Quicksand on every form change
            $('select').change(
               function() {
                  $(this).addClass('animate');
                  if ($($filterAlpha).val() == '0'){
                     if ($($filterBeta).val() == '0'){
                        if ($($filterGamma).val() == '0'){
                           if ($($filterDelta).val() == '0'){
                              //0-0-0-0
                              var $filteredData = $data.find('div');
                           } else {
                              //0-0-0-1
                              var $filteredData = $data.find('div[data-delta=' + $($filterDelta).val() + ']' );
                           }
                        } else {
                           if ($($filterDelta).val() == '0'){
                              //0-0-1-0
                              var $filteredData = $data.find('div[data-gamma=' + $($filterGamma).val() + ']' );
                           } else {
                              //0-0-1-1
                              var $filteredData = $data.find('div[data-gamma=' + $($filterGamma).val() + ']' + 'div[data-delta=' + $($filterDelta).val() + ']' );
                           }
                        }
                     } else {
                        if ($($filterGamma).val() == '0'){
                           if ($($filterDelta).val() == '0'){
                              //0-1-0-0
                              var $filteredData = $data.find('div[data-beta=' + $($filterBeta).val() + ']' );
                           } else {
                              //0-1-0-1
                              var $filteredData = $data.find('div[data-beta=' + $($filterBeta).val() + ']' + 'div[data-delta=' + $($filterDelta).val() + ']' );
                           }

                        } else {
                           if ($($filterDelta).val() == '0'){
                              //0-1-1-0
                              var $filteredData = $data.find('div[data-beta=' + $($filterBeta).val() + ']' + 'div[data-gamma=' + $($filterGamma).val() + ']' );
                           } else {
                              //0-1-1-1
                              var $filteredData = $data.find('div[data-beta=' + $($filterBeta).val() + ']' + 'div[data-gamma=' + $($filterGamma).val() + ']' + 'div[data-delta=' + $($filterDelta).val() + ']' );
                           }
                        }
                     }
                  } else {
                     if ($($filterBeta).val() == '0'){
                        if ($($filterGamma).val() == '0'){
                           if ($($filterDelta).val() == '0'){
                              //1-0-0-0
                              var $filteredData = $data.find('div[data-alpha=' + $($filterAlpha).val() + ']');
                           } else {
                              //1-0-0-1
                              var $filteredData = $data.find('div[data-alpha=' + $($filterAlpha).val() + ']' + 'div[data-delta=' + $($filterDelta).val() + ']' );
                           }
                        } else {
                           if ($($filterDelta).val() == '0'){
                              //1-0-1-0
                              var $filteredData = $data.find('div[data-alpha=' + $($filterAlpha).val() + ']' + 'div[data-gamma=' + $($filterGamma).val() + ']' );
                           } else {
                              //1-0-1-1
                              var $filteredData = $data.find('div[data-alpha=' + $($filterAlpha).val() + ']' + 'div[data-gamma=' + $($filterGamma).val() + ']' + 'div[data-delta=' + $($filterDelta).val() + ']' );
                           }
                        }
                     } else {
                        if ($($filterGamma).val() == '0'){
                           if ($($filterDelta).val() == '0'){
                              //1-1-0-0
                              var $filteredData = $data.find('div[data-alpha=' + $($filterAlpha).val() + ']' + 'div[data-beta=' + $($filterBeta).val() + ']' );
                           } else {
                              //1-1-0-1
                              var $filteredData = $data.find('div[data-alpha=' + $($filterAlpha).val() + ']' + 'div[data-beta=' + $($filterBeta).val() + ']' + 'div[data-delta=' + $($filterDelta).val() + ']' );
                           }

                        } else {
                           if ($($filterDelta).val() == '0'){
                              //1-1-1-0
                              var $filteredData = $data.find('div[data-alpha=' + $($filterAlpha).val() + ']' + 'div[data-beta=' + $($filterBeta).val() + ']' + 'div[data-gamma=' + $($filterGamma).val() + ']' );
                           } else {
                              //1-1-1-1
                              var $filteredData = $data.find('div[data-alpha=' + $($filterAlpha).val() + ']' + 'div[data-beta=' + $($filterBeta).val() + ']' + 'div[data-gamma=' + $($filterGamma).val() + ']' + 'div[data-delta=' + $($filterDelta).val() + ']' );
                           }
                        }
                     }
                  }
                  
                  // finally, call quicksand
                  $applications.quicksand($filteredData, {
                      duration: 1000,
                      easing: 'easeInOutQuad',
                     adjustHeight:     'auto'
               });
            });
         });
       </script>
  
      <style type="text/css">
         div.animate {float:left; padding:30px; display:block; border:1px dotted; margin:15px; text-align:left;}
      </style>
   </head>
   <body>
      <form id="filter">
         <select name="alpha">
            <option value="0">All items</option>
            <option value="1">Pepper</option>
            <option value="2">Apple</option>
         </select>
         <select name="beta">
            <option value="0">All colours</option>
            <option value="1">Red</option>
            <option value="2">Green</option>
         </select>
         <select name="gamma">
            <option value="0">All places</option>
            <option value="1">Couche</option>
            <option value="2">Table</option>
         </select>
         <select name="delta">
            <option value="0">Todas las formas</option>
            <option value="1">Redondo</option>
            <option value="2">Cuadrado</option>
         </select>
      </form>
        
            
      <div id="applications" class="image-grid">
         <div class="animate" data-id="id-1" data-alpha="2" data-beta="1" data-gamma="1" data-delta="1">
            Apple<br />Red<br />Couche<br />Redondo
         </div>
         <div class="animate" data-id="id-2" data-alpha="1" data-beta="1" data-gamma="2" data-delta="1">
            Pepper<br />Red<br />Table<br />Redondo
         </div>
         <div class="animate" data-id="id-3" data-alpha="1" data-beta="2" data-gamma="1" data-delta="2">
            Pepper<br />Green<br />Couche<br />Cuadrado
         </div>
         <div class="animate" data-id="id-4" data-alpha="2" data-beta="1" data-gamma="1" data-delta="2">
            Apple<br />Red<br />Couche<br />Cuadrado
         </div>
         <div class="animate" data-id="id-5" data-alpha="1" data-beta="2" data-gamma="2" data-delta="1">
            Pepper<br />Green<br />Table<br />Redondo
         </div>
         <div class="animate" data-id="id-6" data-alpha="1" data-beta="1" data-gamma="1" data-delta="2">
            Pepper<br />Red<br />Couche<br />Cuadrado
         </div>
         <div class="animate" data-id="id-7" data-alpha="1" data-beta="2" data-gamma="2" data-delta="1">
            Pepper<br />Green<br />Table<br />Redondo
         </div>
         <div class="animate" data-id="id-8" data-alpha="1" data-beta="2" data-gamma="1" data-delta="2">
            Pepper<br />Green<br />Couche<br />Cuadrado
         </div>
         <div class="animate" data-id="id-9" data-alpha="1" data-beta="1" data-gamma="2" data-delta="2">
            Pepper<br />Red<br />Table<br />Cuadrado
         </div>
         <div class="animate" data-id="id-10" data-alpha="2" data-beta="1" data-gamma="1" data-delta="1">
            Apple<br />Red<br />Couche<br />Redondo
         </div>
         <div class="animate" data-id="id-11" data-alpha="2" data-beta="2" data-gamma="2" data-delta="2">
            Apple<br />Green<br />Table<br />Cuadrado
         </div>
         <div class="animate" data-id="id-12" data-alpha="2" data-beta="2" data-gamma="2" data-delta="2">
            Apple<br />Green<br />Table<br />Cuadrado
         </div>
         <div class="animate" data-id="id-13" data-alpha="1" data-beta="1" data-gamma="2" data-delta="1">
            Pepper<br />Red<br />Table<br />Redondo
         </div>
      </div>
                    
   </body>
</html>

Ahora mi objetivo es paginar los resultados de este ejemplo http://dl.dropbox.com/u/4151695/html/pajinate-0.2/examples/example1.html
con este plugin - http://www.danieltulp.nl/work/quicksand-multiple.htm, aunque por ahora esta siendo un fracaso, no me pagina los divs. [snif]

Si a alguien se le ocurre alguna solución mejor que usar otro js, que me lo comente por aquí.. [boing]

Si consigo algo, lo posteare aquí por si alguien lo necesita en un futuro. [ginyo]

Un Saludo! [beer]

Answer 3 · 2011-04-28T10:04:28+00:00

Alguien puede ayudarme con el tema de la paginación, desde el día que lo postee lo estoy intentando de todas las maneras posibles que conozco, pero no hay manera [buuuaaaa]

, al ser un contenido "dinámico" se pierde.. no puedo ni poner un scroll lateral, ya que todas las imágenes están dentro de una tabla..

Un Saludo! [decaio]

Edito: He probado con esto http://theproc.es/page/demo_20100528_henning algo así me vendría perfecto también, pero no hay manera de hacerlo funcionar tampoco..

Nada no hay manera solo busco hacer algo así

http://www.vecteezy.com/browse

http://mootools.net/forge/browse