HTML/CSS Photo Gallery not displaying pictures

Question

Again, first website, and first time using the "section" tags so I'm still getting familiar with them.

I copied the code for a photo gallery banner from http://www.johnnycupcakes.com. I inspected the elements and copied the HTML & CSS code and placed them in my, except changed the pictures because I like the layout. However, the pictures I chose (which are saved locally) will not show up. I have pictures elsewhere on my page that are called in the same exact format and they show up fine.

Here is the HTML:

<section id="content" class="clearfix">
            <div class="full-wrap">
                <div class="contain contain-slides">
                    <div class="swiper-container">
                        <div class="swiper-wrapper" style="width: 11056px; height: 820px; transition: 0s; -webkit-transition: 0s; transform: translate3d(-6910px, 0px, 0px); -webkit-transform: translate3d(-6910px, 0px, 0px);">

                            <a class="swiper-slide" style="width: 10382px; height: 820px;" href="/services.html">
                              <img src="/Images/iPhone_5C_fix.jpg"/>
                            </a>

                            <a class="swiper-slide" style="width: 1382px; height: 820px;" href="/services.html">
                              <img src="/Images/iPad repair.jpg"/>
                            </a>

                            <a class="swiper-slide" style="width: 1382px; height: 820px;" href="/services.html">
                              <img src="/Images/MacBook Repair.jpg"/>
                            </a>
                        </div>

                        <div class="pagination">
                            <span class="swiper-pagination-switch swiper-visible-switch swiper-active-switch"></span>
                            <span class="swiper-pagination-switch"></span>
                            <span class="swiper-pagination-switch"></span>
                        </div>
                    </div>
                </div>
            </div>
        </section>

CSS:

.content {
float: left;
width: 100%
}

.full-wrap {
width: 100%;
float: left;
position: relative
}

.full-wrap.title {
margin: 10px 0px
}

.events .full-wrap.title {
margin-top: 70px
}

.contain {
max-width: 1240px;
margin: 0 auto;
padding: 0px 20px;
position: relative
}

.contain-slides {
margin-top: 50px
}

.swiper-container {
margin: 0 auto;
position: relative;
overflow: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 1;
cursor: pointer !important
}

.swiper-container {
width: 100%;
height: 100%;
color: #fff;
text-align: center
}

.swiper-container[style] {
height: auto !important
}

.swiper-container.product-page {
width: 90%;
float: left;
margin: 0;
color: #fff;
border: 1px solid #ccc;
border-bottom: 1px solid #ccc;
overflow: hidden
}

.swiper-wrapper {
position: relative;
width: 9999999px;
overflow: hidden;
-webkit-transition-property: -webkit-transform, left, top;
-webkit-transition-duration: 0s;
-webkit-transform: translate3d(0px, 0, 0);
-webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-moz-transition-property: -moz-transform, left, top;
-moz-transition-duration: 0s;
-moz-transform: translate3d(0px, 0, 0);
-moz-transition-timing-function: ease;
-o-transition-property: -o-transform, left, top;
-o-transition-duration: 0s;
-o-transform: translate3d(0px, 0, 0);
-o-transition-timing-function: ease;
-o-transform: translate(0px, 0px);
-ms-transition-property: -ms-transform, left, top;
-ms-transition-duration: 0s;
-ms-transform: translate3d(0px, 0, 0);
-ms-transition-timing-function: ease;
transition-property: transform, left, top;
transition-duration: 0s;
transform: translate3d(0px, 0, 0);
transition-timing-function: ease;
-webkit-transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
-moz-transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
-o-transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1)
}

.swiper-free-mode>.swiper-wrapper {
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
-webkit-transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
-moz-transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
-o-transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
margin: 0 auto
}

.swiper-wrapper[style] {
height: 500px !important
}

.swiper-slide {
float: left
}

.swiper-slide .title {
font-style: italic;
font-size: 42px;
margin-top: 80px;
margin-bottom: 0;
line-height: 45px
}

.swiper-slide[style] {
height: auto !important
}

.swiper-slide img {
width: 100%;
height: auto
}

.swiper-slide.product-page {
background: none;
overflow: hidden;
color: #fff
}

.pagination {
margin: 0 auto
}

.swiper-pagination-switch {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 10px;
background: #000;
margin: 4px;
border: 2px solid #fff;
cursor: pointer;
-webkit-transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
-moz-transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
-o-transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1)
}

.swiper-pagination-switch:hover {
-moz-transform: scale(1.4);
-webkit-transform: scale(1.4);
-o-transform: scale(1.4);
-ms-transform: scale(1.4);
transform: scale(1.4)
}

.swiper-visible-switch {
background: #aaa
}

.swiper-active-switch {
background: #fff;
border: 2px solid #000;
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2)
}

The only thing I removed were 5 lines of which the original code had 8, but I only need to display 5 pictures right now.

Any help on why my pictures aren't displaying?

@blackRob4953 this is a pretty bad slider... there is a lot of things wrong with the HTML/CSS I'll make you one and post the example below. — Jordan Davis, Aug 05 '15 at 18:13

score 0 · Answer 1 · edited Aug 05 '15 at 18:37

0

Ok here is a fiddle: https://jsfiddle.net/DIRTY_SMITH/hvsas2Lj/4/

As you can see there are images showing, I would start by adding the entire path to the image src example

<img src="http://lorempixel.com/400/200/">

This will do two things, either it will work or it wont.

If it works, your original path was wrong.

If it does not work,... Well lets just hope it works...

<a class="swiper-slide" style="width: 1382px; height: 820px;" href="/services.html">
     <img src="http://lorempixel.com/400/200/"/>
</a>

P.S.: remove all the white spaces from the path (image name)

edited Aug 05 '15 at 18:37

xhulio

1,093
1
13
32

answered Aug 05 '15 at 16:36

Adam Buchanan Smith

9,422
5
19
39

1

you should consider adding the fact that he shouldn't contain white spaces in his photo names – xhulio Aug 05 '15 at 16:39
@xhulio lol, yeah that is the problem. You should edit my answer :) – Adam Buchanan Smith Aug 05 '15 at 16:42
didn't even think of the white space while naming. rushing haha. but as far as the path, they're local files on my comp, so there's no web link to format a path as such. my other pics i formatted the same way worked.... – blackRob4953 Aug 06 '15 at 04:35

Jordan Davis · Accepted Answer · 2015-08-06T23:33:31.197

this should do the trick... let me know

Here is the JSFiddle Demo

Screenshot:

//HTML

<!DOCTYPE html>
<html>
<head>
<link href="index.css" rel="stylesheet">
<script>
document.onreadystatechange = function(){
    if(document.readyState == "interactive"){
        slider();
    }
}   
function slider(){
    var slider = document.querySelector("figure");
    var slides = slider.children;
    setInterval(function(){
        slider.appendChild(slides[0]);
    }, 5000)
}   

</script>
</head>
<body>
    <nav>
        <div>
            <div id="logo">LOGO</div>
        </div>
        <div> 
            <a href='http://www.se7enservice.com/' class="here">Home</a>
            <a href="/about.html" >About</a>      
            <a href="/services.html" >Services</a>          
            <a href="/pricing.html" >Pricing</a>    
            <a href="/contact_us.html" >Contact Us</a>      
        </div>
        <div>
        </div>
    </nav>
    <section id="slider">
        <figure>
            <img src="https://myreco.me/images/news/55b089d22992f.jpg">
            <img src="https://newevolutiondesigns.com/images/freebies/hd-wallpaper-6.jpg">
            <img src="http://zhaba.ru/storage-10667/images-5354/5f87ae89312fe2ed1f845c2c2c468283_85354.jpg">
        </figure>
    </section>
    <section id="content">
        <header>
            <h1>Header Section</h1>
            <p>Lorem ipsum dolor sit amet, eos ea exerci ornatus detracto, eos ea equidem signiferumque. Et sea forensibus elaboraret, graeci platonem eos no, ut sit omittam senserit. Duis elitr omittantur mei id, ludus commune sapientem an mel. Sit ei dicunt electram scriptorem, pro ut iriure salutandi. Homero salutandi efficiantur ut vis.</p>
        </header>
        <section>
            <h1>Section Section</h1>
            <p>Lorem ipsum dolor sit amet, eos ea exerci ornatus detracto, eos ea equidem signiferumque. Et sea forensibus elaboraret, graeci platonem eos no, ut sit omittam senserit. Duis elitr omittantur mei id, ludus commune sapientem an mel. Sit ei dicunt electram scriptorem, pro ut iriure salutandi. Homero salutandi efficiantur ut vis.</p>
        </section>
    </section>
    <footer></footer>
</body>
</html>

//CSS

body{
    margin: 0 !important;
    height: 100vh;
    width: 100vw;
}
/* NAV */
nav{
    display: -webkit-flex;
    display: flex;

    top: 0;
    width: 100%;
    min-height: 60px;

    z-index: 999;
    position: fixed;
    background: #1E67CB;

    box-shadow: 0 1px 5px rgba(0,0,0,.6);
    -webkit-box-shadow: 0 1px 5px rgba(0,0,0,.6);
}
nav>div{
    text-align: center;

    -webkit-flex: 1;
    flex: 1;

    -webkit-align-self: center;
    align-self: center; 
}
#logo{
    display: -webkit-flex;
    display: flex;
    cursor: default;
    -webkit-align-self: center;
    align-self: center;

    margin-left: 1em;

    color: #fff;
    font-weight: bold;
    font-size: 1.15em;
    line-height: 1.43;  
    -webkit-font-smoothing: antialiased;
    font-family: Circular,"Helvetica Neue",Helvetica,Arial,sans-serif;
}
nav>div{
    width: 50vw;    
    display: -webkit-flex;
    display: flex;
}
nav>div:nth-of-type(1){
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}
nav>div:nth-of-type(2){
    -webkit-justify-content: center;
    justify-content: center;
}
nav>div:nth-of-type(3){
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}
nav>div>a{
    display: -webkit-flex;
    display: flex;

    -webkit-align-self: center;
    align-self: center;

    text-decoration: none;
    cursor: pointer;
    color: #fff;
    font-size: 1em;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    font-family: HelveticaNeue-Light,"Helevetica Neue",Helvetica,Arial;

    margin: 0 .5em;
    padding: 0.6em 1.5em;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-transition: background-color 100ms;
    -webkit-transition: background-color 100ms;
    transition: background-color 100ms;
}
nav>div>a:hover{
     background: rgba(255,255,255,0.15);
}
nav>div>a:active{
    -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}
nav>div:nth-of-type(3)>a:nth-of-type(2){
    background: rgba(255, 255, 255, 0.15);  
}
nav>div>a:nth-of-type(2):hover{
    background: rgba(255, 255, 255, 0.37);  
}
/* SLIDER */
#slider{    
    display: -webkit-flex;
    display: flex;
    overflow-x: hidden;
    margin-top: 60px;
    box-shadow: inset 0 1px 5px rgba(0,0,0,.6);
    -webkit-box-shadow: inset 0 1px 5px rgba(0,0,0,.6);
}
figure{ 
    display: -webkit-flex;
    display: flex;
    height: 40vh;
    width: 100%;
    max-height: 40vh;
    transform: translateX(0);
    margin: 0 !important;
    animation: slider 5s ease infinite;
}
@keyframes slider {
    0% { transform: translateX(0);}
    20% { transform: translateX(0);}
    50% { transform: translateX(0);}
    90% { transform: translateX(-100%);}
    100% { transform: translateX(-100%);}
}
figure>img{
    min-width: 100vw;   
}
/* CONTENT */
#content{
    display: -webkit-flex;
    display: flex;

    -webkit-flex-direction: column;
    flex-direction: column;

    min-height: 200vh; /* DEVELOPMENT PURPOSES */
}
#content>header{
    display: -webkit-flex;
    display: flex;

    margin-top: 30px;

    -webkit-flex-direction: column;
    flex-direction: column;

    -webkit-justify-content: center;
    justify-content: center;

    -webkit-align-self: center;
    align-self: center;

    min-width: 1280px;  
    max-width: 1280px;
}
#content>section{
    display: -webkit-flex;
    display: flex;

    -webkit-flex-direction: column;
    flex-direction: column;

    -webkit-justify-content: center;
    justify-content: center;

    -webkit-align-self: center;
    align-self: center;

    min-width: 1280px;  
    max-width: 1280px;
}
h1{
    margin: 0;
    font-size: 2em;
    letter-spacing: -3px;
    line-height: 1.1;   cursor: default;
    color: #333;
    text-align: center;
    font-family: "Avenir Next",Avenir,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
    -webkit-font-smoothing: antialiased;
}
p{
    text-align: center;
    font-size: 1.5em;
    line-height: 1.6em;
    cursor: default;
    color: #333;
    text-align: center;
    font-family: "Avenir Next",Avenir,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* FOOTER */
footer{
    display: -webkit-flex;
    display: flex;

/*  position: absolute; */
    width: 100%;
    min-height: 100px;
    bottom: 0;

    background: #5c5c5c;

    box-shadow: inset 0 1px 5px rgba(0,0,0,.6);
    -webkit-box-shadow: inset 0 1px 5px rgba(0,0,0,.6); 
}

So this worked and looked great. Plus so much simpler and cleaner. The only problem is the pictures just appear side by side therefore extending the overall view of the page. How can I add some sort of button to swap through the images like a gallery in an auto play mode/manual clicking between pictures? — blackRob4953, Aug 06 '15 at 05:05
temporarily, I used overflow-x: scroll, that way it doesn't extend the width of the overall page. however like i stated above, similar to the http://www.johnnycupcakes.com site, I'm looking for button to click through the gallery, with an automated timer when its not clicked... — blackRob4953, Aug 06 '15 at 05:46
@blackRob4953 I'll update it tomorrow with buttons... I'm passout lol. — Jordan Davis, Aug 06 '15 at 06:53
No problem man haha I just barely sleep ha. Before you started working, I'm looking for buttons AND a timer. I didn't know the previous code had a timer on it, it wasn't working for me at least when I tested it — blackRob4953, Aug 06 '15 at 11:58
@blackRob4953 yea code above def has a timer... there our three CSS animations that fire every 5 seconds with a transition of delay 5s so total of 10 secs per slide... then in the JS every 10secs (10000) it take the first and changes it to the last creating a continuous loop — Jordan Davis, Aug 06 '15 at 16:52

HTML/CSS Photo Gallery not displaying pictures

2 Answers2

Linked