Bildergallerie mit Ajax, php und MySql

djnijo

Mitglied
Hi zusammen, nach meiner 4 Jährigen Programmierpause wollte ich mal wieder loslegen, doch ich merke bin ziemlich eingerostet.
PhP hab ich noch ziemlich gut drauf, aber mit ajax hab ich noch nie groß gearbeitet. Meine frage zu folgendem Script, der auf dieser Seite getestet wird http://blackwolve.de/2015/#pics , wie könnte ich diesen umbauen damit ich die Vorschaubilder als Galerie vorschau nutzen kann, und beim klicken die Bilder dieser Galerie angezeigt werden.


Code:
<div class="container">
                <div class="row">
               
                    <div class="sec-title text-center">
                        <h2>Pics</h2>
                       
                    </div>
                   
                    <div class="sec-sub-title text-center">
                       
                    </div>
                   
                    <div class="work-filter wow fadeInRight animated" data-wow-duration="500ms">
                        <ul class="text-center">
                            <li><a href="javascript:;" data-filter="all" class="active filter">All</a></li>
                            <li><a href="javascript:;" data-filter=".branding" class="filter">Branding</a></li>
                            <li><a href="javascript:;" data-filter=".web" class="filter">web</a></li>
                            <li><a href="javascript:;" data-filter=".logo-design" class="filter">logo design</a></li>
                            <li><a href="javascript:;" data-filter=".photography" class="filter">photography</a></li>
                        </ul>
                    </div>
                   
                </div>
            </div>
           
            <div class="project-wrapper">
           
                <figure class="mix work-item branding">
                    <img src="img/works/item-1.jpg" alt="">
                    <figcaption class="overlay">
                        <a class="fancybox" rel="works" title="Write Your Image Caption Here" href="img/works/item-1.jpg"><i class="fa fa-eye fa-lg"></i></a>
                        <h4>Labore et dolore magnam</h4>
                        <p>Photography</p>
                    </figcaption>
                </figure>
               
                <figure class="mix work-item web">
                    <img src="img/works/item-2.jpg" alt="">
                    <figcaption class="overlay">
                        <a class="fancybox" rel="works" title="Write Your Image Caption Here" href="img/works/item-2.jpg"><i class="fa fa-eye fa-lg"></i></a>
                        <h4>Labore et dolore magnam</h4>
                        <p>Photography</p>
                    </figcaption>
                </figure>
               
                <figure class="mix work-item logo-design">
                    <img src="img/works/item-3.jpg" alt="">
                    <figcaption class="overlay">
                        <a class="fancybox" rel="works" title="Write Your Image Caption Here" href="img/works/item-3.jpg"><i class="fa fa-eye fa-lg"></i></a>
                        <h4>Labore et dolore magnam</h4>
                        <p>Photography</p>
                    </figcaption>
                </figure>
               
                <figure class="mix work-item photography">
                    <img src="img/works/item-4.jpg" alt="">
                    <figcaption class="overlay">
                        <a class="fancybox" rel="works" title="Write Your Image Caption Here" href="img/works/item-4.jpg"><i class="fa fa-eye fa-lg"></i></a>
                        <h4>Labore et dolore magnam</h4>
                        <p>Photography</p>
                    </figcaption>
                </figure>
           
                <figure class="mix work-item branding">
                    <img src="img/works/item-5.jpg" alt="">
                    <figcaption class="overlay">
                        <a class="fancybox" rel="works" title="Write Your Image Caption Here" href="img/works/item-5.jpg"><i class="fa fa-eye fa-lg"></i></a>
                        <h4>Labore et dolore magnam</h4>
                        <p>Photography</p>
                    </figcaption>
                </figure>
               
                <figure class="mix work-item web">
                    <img src="img/works/item-6.jpg" alt="">
                    <figcaption class="overlay">
                        <a class="fancybox" rel="works" title="Write Your Image Caption Here" href="img/works/item-6.jpg"><i class="fa fa-eye fa-lg"></i></a>
                        <h4>Labore et dolore magnam</h4>
                        <p>Photography</p>
                    </figcaption>
                </figure>
               
                <figure class="mix work-item logo-design">
                    <img src="img/works/item-7.jpg" alt="">
                    <figcaption class="overlay">
                        <a class="fancybox" rel="works" title="Write Your Image Caption Here" href="img/works/item-7.jpg"><i class="fa fa-eye fa-lg"></i></a>
                        <h4>Labore et dolore magnam</h4>
                        <p>Photography</p>
                    </figcaption>
                </figure>
               
                <figure class="mix work-item photography">
                    <img src="img/works/item-8.jpg" alt="">
                    <figcaption class="overlay">
                        <a class="fancybox" rel="works" title="Write Your Image Caption Here" href="img/works/item-8.jpg"><i class="fa fa-eye fa-lg"></i></a>
                        <h4>Labore et dolore magnam</h4>
                        <p>Photography</p>
                    </figcaption>
                </figure>
               
            </div>

Anfangs werden die Bilder über eine Datenbank abfrage angezeigt, doch ist das auch möglich die Bilder zu ändern ohne die Seite neu zu laden?

Mir geht es nur um die Funktion der Datenbank abfrage mit Ajax und das Ändern der Suchkriterien via Javascript Funktion. z.b. beim aufrufen der Seite soll ein Bild Jeder Galerie angezeigt werden und bei klicken auf eines der Bilder die gesamte Galerie.

Würde mich freuen wenn mir da jemand ein paar tipps geben kann
 
Verstehe deine Frage nicht, denn soweit ich die genannte Beispielseite überblicke, agieren die Links (All, Branding, usw.) als Filterfunktion. Klickt man anschließend eines der Vorschaubilder an, sind die übrigen innerhalb der Fancybox als Image-Gallery verfügbar.

Oder hast du da eine ganz andere Vorstellung bzgl. des Handlings?
doch ist das auch möglich die Bilder zu ändern ohne die Seite neu zu laden?
Was verstehst du konkret unter der Änderung der Bilder?
[edit]Tipp-Ex[/edit]
 
Zuletzt bearbeitet:

Neue Beiträge

Zurück