• TS33
  • Member
  • Offline
  • Registered: 2015-02-02
  • Posts: 5

Topic: Not sure what I'm doing wrong... [SOLVED]

Here's the code:
<!DOCTYPE html>
<html>
<head><style type="text/css">.fade {
       -webkit-animation: fadein 20s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 20s; /* Firefox < 16 */
        -ms-animation: fadein 20s; /* Internet Explorer */
         -o-animation: fadein 20s; /* Opera < 12.1 */
            animation: fadein 20s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.lw { font-size: 60px; }

#partytext{
  position: absolute;
  left:50%;
  right: 50%;
  margin-left: -25%;
  margin-right: -25%;
  margin-top: auto;
  margin-bottom: auto;
  width: 50%;
  top: 15%;
  bottom: 15%;
}

@-webkit-keyframes infinite-spinning {
    from {
        -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    animation-delay: 30s;
}
 
}
#snake1{
  position: absolute;
  left:50%;
  right: 50%;
  margin-left: -40%;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;
  top: 15%;
  bottom: 15%;
    -webkit-animation: infinite-spinning 20s infinite linear;
    -moz-animation: infinite-spinning 20s infinite linear;
  width: 80%;
  opacity: 0.35;
}
#snake2{
  position: absolute;
  left:50%;
  right: 50%;
  margin-left: -40%;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;
  top: 15%;
  bottom: 15%;
    -webkit-animation: infinite-spinning 15s infinite linear;
    -moz-animation: infinite-spinning 20s infinite linear;
  animation-delay: 30s;
  width: 80%;
  opacity: 0.20;
}
#snake3{
  position: absolute;
  left:50%;
  right: 50%;
  margin-left: -40%;
  margin-right: auto;
  margin-top: auto
    ;
  margin-bottom: auto;
  top: 15%;
  bottom: 15%;
    -webkit-animation: infinite-spinning 10s infinite linear;
    -moz-animation: infinite-spinning 20s infinite linear;
  animation-delay: 30s;
  width: 80%;
  opacity: 0.40;
}
    -moz-animation: infinite-spinning 20s infinite linear;
  animation-delay: 30s;
  width: 50%;
  opacity: 0.70;
}
#snake3{
  position: absolute;
  left:50%;
  margin-left: -25%;
    -webkit-animation: infinite-spinning 10s infinite linear;
    -moz-animation: infinite-spinning 20s infinite linear;
  animation-delay: 30s;
  width: 50%;
  opacity: 0.90;
}
@media(max-width:500px){
  #snakes{
    width: 300px;
  }
}
</style>


  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<title>Weird Touch</title>

  <style>
  body {background-color:#FFFFFF}
    h1   {color:white}
  p    {color:white}

</style>

  </head>

  <body>
    <img id="snake1" src="http://weirdtouch.com/whitesnake1.png" alt="" class="fade">
    <img id="snake2" src="http://weirdtouch.com/blacksnake1.png" alt="" class="fade">
    <img id="snake3" src="http://weirdtouch.com/whitesnake1.png" alt="" class="fade">
    <img id="partytext" src="http://weirdtouch.com/dancepartytext.png" alt="" class="fade">
         
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
new juicebox({
containerId: "juicebox-container",
galleryWidth: "100%",
galleryHeight: "100%",
backgroundColor: "rgba(0,0,0,1)"
});
</script>
<div id="juicebox-container">
<!-- Image gallery content for non-javascript devices -->
<noscript>
&lt;h1&gt;&lt;/h1&gt;
&lt;p&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src="images/Weird Touch 25Jan Web -03557.jpg" title="Weird Touch 25Jan Web -03557" alt="" /&gt;&lt;br&gt;Weird Touch 25Jan Web -03557 &lt;/p&gt;
&lt;p&gt;&lt;img src="images/Weird Touch 25Jan Web -03566.jpg" title="Weird Touch 25Jan Web -03566" alt="" /&gt;&lt;br&gt;Weird Touch 25Jan Web -03566 &lt;/p&gt;
&lt;p&gt;&lt;img src="images/Weird Touch 25Jan Web -03575.jpg" title="Weird Touch 25Jan Web -03575" alt="" /&gt;&lt;br&gt;Weird Touch 25Jan Web -03575 &lt;/p&gt;
&lt;p&gt;&lt;img src="images/Weird Touch 25Jan Web -03577.jpg" title="Weird Touch 25Jan Web -03577" alt="" /&gt;&lt;br&gt;Weird Touch 25Jan Web -03577 &lt;/p&gt;
&lt;p&gt;&lt;img src="images/Weird Touch 25Jan Web -03588.jpg" title="Weird Touch 25Jan Web -03588" alt="" /&gt;&lt;br&gt;Weird Touch 25Jan Web -03588 &lt;/p&gt;
&lt;p&gt;&lt;img src="images/Weird Touch 25Jan Web -03590.jpg" title="Weird Touch 25Jan Web -03590" alt="" /&gt;&lt;br&gt;Weird Touch 25Jan Web -03590 &lt;/p&gt;
&lt;p&gt;&lt;img src="images/Weird Touch 25Jan Web -03599.jpg" title="Weird Touch 25Jan Web -03599" alt="" /&gt;&lt;br&gt;Weird Touch 25Jan Web -03599 &lt;/p&gt;
&lt;p&gt;&lt;img src="images/Weird Touch 25Jan Web -03610.jpg" title="Weird Touch 25Jan Web -03610" alt="" /&gt;&lt;br&gt;Weird Touch 25Jan Web -03610 &lt;/p&gt;
&lt;p&gt;&lt;img src="images/Weird Touch 25Jan Web -03658.jpg" title="Weird Touch 25Jan Web -03658" alt="" /&gt;&lt;br&gt;Weird Touch 25Jan Web -03658 &lt;/p&gt;
&lt;p&gt;&lt;img src="images/Weird Touch 25Jan Web -03672.jpg" title="Weird Touch 25Jan Web -03672" alt="" /&gt;&lt;br&gt;Weird Touch 25Jan Web -03672 &lt;/p&gt;
&lt;p&gt;&lt;img src="images/Weird Touch 25Jan Web -03532.jpg" title="Weird Touch 25Jan Web -03532" alt="" /&gt;&lt;br&gt;Weird Touch 25Jan Web -03532 &lt;/p&gt;
</noscript>
</div>
<!--END JUICEBOX EMBED-->


<p class="lw"></p>

</body>

Any and all help would be very much appreciated! Thank you in advance!

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Not sure what I'm doing wrong... [SOLVED]

Your gallery should display fine as long as the contents of your gallery folder are uploaded to the same directory as the HTML web page containing the code you posted above (as noted in the Embedding in a HTML Page instructions).
Please check that all your gallery files have been uploaded to the correct location on your web server.

If you continue to experience difficulties, then please post back with the URL to your gallery's web page so that I can take a look at the problem for myself and help further. Thank you.

3 Reply by TS33 (edited by TS33 2015-02-03 00:12:05)

  • TS33
  • Member
  • Offline
  • Registered: 2015-02-02
  • Posts: 5

Re: Not sure what I'm doing wrong... [SOLVED]

http://weirdtouch.com/WeirdTouchTestfiles/testpage.html

Thank you for helping me!

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Not sure what I'm doing wrong... [SOLVED]

You web page (http://weirdtouch.com/WeirdTouchTestfiles/testpage.html) includes the following line of code:

<script src="jbcore/juicebox.js"></script>

Therefore, the 'juicebox.js' file should be located here: http://weirdtouch.com/WeirdTouchTestfil … uicebox.js
... but going directly to that location in a web browser results in an error 404 (file not found).
Please double check that your gallery's 'jbcore' folder is in your 'WeirdTouchTestfiles' directory.
If it is there, then please check the permissions on your gallery files and subfolders using an FTP program or your web hosting CPanel's File Manager. Default permissions of 644 for files and 755 for folders should be fine.

  • TS33
  • Member
  • Offline
  • Registered: 2015-02-02
  • Posts: 5

Re: Not sure what I'm doing wrong... [SOLVED]

Fixed! I learned a ton in the process, thank you!

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Not sure what I'm doing wrong... [SOLVED]

I'm glad you've got it working.
Thanks for letting me know.