The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> HTML help with images, HTML, CSS and JavaScript
Razor Edge
post Jun 23 2015, 10:38 PM
Post #1





Group: Members
Posts: 7
Joined: 23-June 15
Member No.: 22,765
Hi. I have a problem with my HTML code. Basically, what I want to do is have a Gallery with sets of images in it. I wanted to click the links inside the <legend> and <fieldset> tags and when it is clicked, the images with its assigned class should show up. (think of it as an album). The images clicked inside that album should appear on the middle div class I created. However, whenever I do so, it doesn't show up. The images that are not assigned to a particular album would only show up on that div class. Any help? Here is the code for it.

CODE

<!DOCTYPE html>
<html>
<head>
    <title>Gallery</title>
        <link rel="stylesheet" href="cougar.css" type="text/css">
        <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0b1.js"></script>
        <script type="text/javascript">
             function showImage(num){
              $('figure').hide()  
              $('figure:has(a.'+num+')').show()
             }
            
             function categoryDoge(cat1){
              $('div a').hide()    
              $('span:has(a.'+cat1+')').show()
             }
            
             function showImageDoge(pic1){
             $('figure').hide()  
             $('figure:has(a.'+pic1+')').show()
            }
            
        </script>
        <style>
        .small {
            width: 100px;
            height: 100px;
        } /* for images */
        

        .large {
            width: 250px;
            height: 250px;
        } /* use this class selector when the image is clicked to enlarge it */
        
        #enlargedview{
            border: 2px solid black;
            padding: 5px;
            width: 270px;
            height: 270px;
            margin: auto;
        } /* use this ID selector to enlarge the view when the image is clicked */
        
        #no-display{
            display: none;
            margin: auto; /* centers image */
            text-align: center; /* centers the caption */
        }
        </style>
</head>

<body>

<script>
    function showhide(id){
        if (document.getElementById){
            obj = document.getElementById(id);
            if (obj.style.display == "none"){
                obj.style.display = "";
            } else {
                obj.style.display = "none";
            }
        }
    }
</script>

<!-- Header -->

<h1 id="header">GALLERY</h1>
<hr color="blue">

<p align="center">
Click on any of the images below to enlarge it.
</p>

<div id="enlargedview">
    <figure id="no-display"><a class="1"><img class="large" src="https://upload.wikimedia.org/wikipedia/commons/2/24/Male_mallard_duck_2.jpg" /><figcaption>Pic 1</figcaption></a></figure>
    <figure id="no-display"><a class="2"><img class="large" src="http://sokek.com/wp-content/uploads/2015/05/Gray-Cat-MorgueFile-Nov16th-2013.jpg" /><figcaption>Pic 2</figcaption></a></figure>
    <figure id="no-display"><a class="3"><img class="large" src="http://www.sbwildes.org/pictures/raccoonYoung.jpg" /><figcaption>Pic 3</figcaption></a></figure>
    <figure id="no-display"><a class="4"><img class="large" src="http://pbs.twimg.com/profile_images/378800000822867536/3f5a00acf72df93528b6bb7cd0a4fd0c.jpeg" /><figcaption>Pic 4</figcaption></a></figure>
    <figure id="no-display"><a class="5"><img class="large" src="http://i.ytimg.com/vi/8M7Qie4Aowk/hqdefault.jpg" /><figcaption>Pic 5</figcaption></a></figure>
</div>
<br />

<div>
    <a href="#" onclick='showImage("1")'><img class="small" src="https://upload.wikimedia.org/wikipedia/commons/2/24/Male_mallard_duck_2.jpg" /></a> <!-- pic 1 -->
    <a href="#" onclick='showImage("2")'><img class="small" src="http://sokek.com/wp-content/uploads/2015/05/Gray-Cat-MorgueFile-Nov16th-2013.jpg" /></a> <!-- pic 2 -->
    <a href="#" onclick='showImage("3")'><img class="small" src="http://www.sbwildes.org/pictures/raccoonYoung.jpg" /></a> <!-- pic 3 -->
</div>

<!-- pics 4 and 5 -->
<span id="no-display">
    <a class="doge" href="#" onclick='showImageDoge("4")'><img class="small" src="https://pbs.twimg.com/profile_images/378800000822867536/3f5a00acf72df93528b6bb7cd0a4fd0c.jpeg" /></a> <!-- pic 4 -->
    <a class="doge" href="#" onclick='showImageDoge("5")'><img class="small" src="http://i.ytimg.com/vi/8M7Qie4Aowk/hqdefault.jpg" /></a> <!-- pic 5 -->
</span>

<legend>
<fieldset>
<ul>Folder navigation
    <li><a href="#" onclick='categoryDoge("doge")'><img src="http://iconizer.net/files/Futurosoft/orig/folder_gray_open.png" width="16" height="16" />Doge pics</a></li>
    <li> - </li>
</ul>
</fieldset>
</legend>

</body>
</html>


Clicking the first 3 pics will show up on the enlarged view (which was my div class). However, those inside the "Doge pics" album won't. Attached is the css file that I use for my project.


Attached File(s)
Attached File  cougar.css ( 1.52k ) Number of downloads: 106
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 19th April 2024 - 05:26 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC