Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Dec 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript + mySQL: Image gallery toggling unique divs for each thumbnail

    I'm making a portfolio site for my graphic design work, so I've created a mySQL database to store all the image and project information. I was hoping that in the design all the image thumbnails would be displayed in a grid, and once clicked, each image would toggle a div that would house a larger image and description of the project. I've gotten all the images to display correctly, but I can't figure out how to get the toggle to work. Right now -something- happens when an image is clicked, but none of the content is showing up, and it's not reversible like a toggle should be.

    Also, I don't really know how I'm going to get each image to display its corresponding description when clicked, and ONLY that description, as opposed to one click making all the toggles for each image fire off at once. I've got a little 'i' variable going on with the reasoning that it will count up with each image and thus assign each image a unique id that can be called, but I'm not sure what to do with it now that I've got it... (can you tell I've been using PHP for like, a week). But perhaps that's a question better asked in the PHP forum.

    If you're interested in looking at the weird thing it's doing right now, here's my testpage:

    http://elenahutchinson.com/testsite.php

    Here's my code:

    Code:
    if ($result) 
    				{
       				 	$i = 1;
        					while ($row = mysqli_fetch_array($result)) 
        					{
           						echo '<div class="indexthumb">
           								<div class="overlay">
    			  						<div class="overlay-title">
    										<h2 align="center">'.$row['ProjectTitle'].'</h2>
    										<br/>
    										<h3 align="center">'.$row['ProjectSubtitle'].'</h3>
    									</div>
    			  					</div>
                        					<img src="projects/'.$row[ProjectFolder].'/index.jpg"/>
                        					
                    					</div>
                    					
                    					<div class="slidepage" style="display:none;">
                    						<div class="projectpage_container">
      									<div class="project_image">
      										<img src="projects/'.$row[ProjectFolder].'/main.jpg" id="image"/>
                    							</div>
                    							<div class="rightcontent"><br />
    										<div class="project_desc">
    											<h3>'.$row[ProjectTitle].'</h3>
                        									<h3>'.$row[ProjectSubtitle].'</h3><br />
                    									<p>'.$row[ProjectDesc].'</p>
                        								</div>
                        							</div>
                    						</div>
                    					</div>
                    					
                    					<script language="javascript">
                    						$(document).ready(function() 
                    						{
      									$(".indexthumb").click(function() 
      									{
          										$(".slidepage").toggle("slide",1000);
     									 });
    								});
    							</script>
    						';
    					}	
    
        					mysqli_free_result($result);
    				}
                    		
                    		$i++;
                    		
    				
    				/*	
    				// 3. Close Connection
    				*/
    				mysqli_close($con);
    				?>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,588
    Thanks
    80
    Thanked 4,497 Times in 4,461 Posts
    Okay, for starters, don't show us PHP code in the JavaScript forum. Bring up the page in your browser, click on the VIEW menu and then the SOURCE or PAGE SOURCE menu item. This will show you the HTML as the browser sees it. Copy/paste the *RELEVANT* parts of the HTML here.

    Having said that... At least you showed us a demo page so we can go do the VIEW==>>SOURCE ourselves.

    And from that we find that the ONLY JavaScript code you have doing anything is not doing anything at all like what you say you want. And on top of that you REPEAT the same code over and over, once per image, for no reason at all (only the last repetition will be used by JavaScript; all others are just forgotten). To wit:
    Code:
    <script language="javascript">
    	$(document).ready(function() 
    	{
    		$(".indexthumb").click(function() 
    		{
    			$(".slidepage").toggle("slide",1000);
    		 });
    	});
    </script>
    And, *apparently* the toggle of "slide" is supposed to do something, presumable something defined in tag_transition.js. *BUT* tag_transition.js will never work because it is included *BEFORE* jQuery.js and so you are getting this error:
    Uncaught ReferenceError: $ is not defined -- tag_transition.js

    Is that the only problem? No idea. Maybe it would help to carefully read to documentation for that library to see if you are using it right.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •