MySQL and PHP Portfolio Gallery

[Woody777]

Hi guys I am busy with a website for myself and need some help on this, because I am stuck and not getting this right. 

 

Can someone tell me where is a tutorial or where I can find a code to help me with this , I have attached a pictures on what I need and want. the second image is what need to happen when someone click on the image in the Portfolio

 

Below Is the html code for this Portfolio Gallery but need it to be like in a database where I can upload or add new work. 

 

 <!-- PORTFOLIO -->
               <div class="row portfolio-page">
                  <div class="hide" id="project-info">
                     <div id="content">
                        <i class="fa-times fa back"></i>
                        <div class="row">
                           <div class="large-11 columns">
                              <h2 class="project-title">Super Design</h2>
                           </div>
                           <div class="large-6 columns">
                              <div class="project-images">
                                 <div class="item-list">
                                    <ul class="">
                                       <li>
                                          <a href="#">
                                          <img width="500" height="380" alt="13tndZF" class="attachment-project-thumb" src="assets/images/12.jpg">  
                                          </a>
                                       </li>
                                    </ul>
                                 </div>
                              </div>
                           </div>
                           <div class="large-6 columns project-content">
                              <p>Donec pulvinar porttitor felis ac tincidunt. Quisque sit amet ligula quis lacus pellentesque luctus consequat aliquam neque. Nunc ac elit eu odio consequat rutrum. Suspendisse nec facilisis turpis. </p>
                              <p>Proin egestas nisl in nibh condimentum, nec ornare erat egestas. Fusce dui est, gravida ut sem vitae, tincidunt pharetra massa. In erat libero, fermentum suscipit pretium vel, eleifend vitae odio. Nullam quis mi velit. Cras ut aliquet orci.</p>
                              <p>Curabitur sollicitudin massa quis magna cursus, a auctor dolor imperdiet. Nullam ultrices pretium mauris, vel fermentum nisl venenatis ac. Aenean adipiscing lorem a purus viverra, eu</p>
                           </div>
                        </div>
                     </div>
                  </div>
                  <ul class="small-block-grid-1 large-block-grid-3">
                     <li class="article portfolio-item" id="160">
                        <figure>
                           <img width="500" height="380" src="assets/images/12.jpg" alt="13tndZF" />
                           <figcaption class="text-center">
                              <h3>Super Design</h3>
                           </figcaption>
                        </figure>
                        <span class="plus-icon flipOutX"><i class="fa-plus fa"></i></span>
                     </li>
                     <li class="article portfolio-item" id="157">
                        <figure>
                           <img width="500" height="380" src="assets/images/13.jpg" alt="1j5JfNg" />
                           <figcaption class="text-center">
                              <h3>Cool Project</h3>
                           </figcaption>
                        </figure>
                        <span class="plus-icon flipOutX"><i class="fa-plus fa"></i></span>
                     </li>
                     <li class="article portfolio-item" id="153">
                        <figure>
                           <img width="500" height="380" src="assets/images/14.jpg" alt="1m7ZhI3" />
                           <figcaption class="text-center">
                              <h3>New Project</h3>
                           </figcaption>
                        </figure>
                        <span class="plus-icon flipOutX"><i class="fa-plus fa"></i></span>
                     </li>
                     <li class="article portfolio-item" id="94">
                        <figure>
                           <img width="500" height="380" src="assets/images/15.jpg" alt="1a2n0Ck" />
                           <figcaption class="text-center">
                              <h3>Sed porttitor</h3>
                           </figcaption>
                        </figure>
                        <span class="plus-icon flipOutX"><i class="fa-plus fa"></i></span>
                     </li>
                     <li class="article portfolio-item" id="79">
                        <figure>
                           <img width="500" height="380" src="assets/images/16.jpg" alt="7714491824_ef36a096ff_b" />
                           <figcaption class="text-center">
                              <h3>Kid Play</h3>
                           </figcaption>
                        </figure>
                        <span class="plus-icon flipOutX"><i class="fa-plus fa"></i></span>
                     </li>
                     <li class="article portfolio-item" id="73">
                        <figure>
                           <img width="500" height="380" src="assets/images/17.jpg" alt="8364043731_9da828b5c7_h" />
                           <figcaption class="text-center">
                              <h3>Project Two</h3>
                           </figcaption>
                        </figure>
                        <span class="plus-icon flipOutX"><i class="fa-plus fa"></i></span>
                     </li>
                     <li class="article portfolio-item" id="71">
                        <figure>
                           <img width="500" height="380" src="assets/images/18.jpg" alt="almond-blossom-5378_1280" />
                           <figcaption class="text-center">
                              <h3>Project One</h3>
                           </figcaption>
                        </figure>
                        <span class="plus-icon flipOutX"><i class="fa-plus fa"></i></span>
                     </li>
                     <li class="article portfolio-item" id="96">
                        <figure>
                           <img width="500" height="380" src="assets/images/19.jpg" alt="Youthful learners" />
                           <figcaption class="text-center">
                              <h3>Etiam at commodo</h3>
                           </figcaption>
                        </figure>
                        <span class="plus-icon flipOutX"><i class="fa-plus fa"></i></span>
                     </li>
                     <li class="article portfolio-item" id="14">
                        <figure>
                           <img width="500" height="380" src="assets/images/20.jpg" alt="9862145525_c08b245398_h" />
                           <figcaption class="text-center">
                              <h3>Project 1</h3>
                           </figcaption>
                        </figure>
                        <span class="plus-icon flipOutX"><i class="fa-plus fa"></i></span>
                     </li>
                  </ul>
               </div>
               <!-- END PORTFOLIO/> -->
            </div>
         </section>

Edited October 3, 2014 by mac_gyver
code tag around code please

[jcbones]

http://http://fearlessflyer.com/create-an-awesome-photo-gallery-with-fancybox-and-timthumb/ is a great little tutorial.  It isn't going in the direction you are specifically, but the basis is there.  Get something going with PHP, posting when you get stuck, or can't get it working the way you want.  Have fun.

Edited October 3, 2014 by jcbones

[Woody777]

Thank you for the reply, this effect is what I am looking for but I need help with the mySQL, I have my login in page and all the other thingss set up, I used the CRUD Operation, But I am struggeling with the display from my database to my website, my website is like a metro responsive so it only have an index page and all the other pages are inside it.

[jcbones]

In order to help with mysql, we would need to see database structure, and some form of sql string.  Anything, to determine what exactly you are trying to get from the database.  As a database table can be constructed in virtually 1,000's of ways, it would just be impossible to guess.