js css slider tutorial issue - javascript

I've been trying my hand at a js slider tutorial and have been trying to get the slider to appear without having to click on one of the links (paris and milan etc).
So page opens, there's the slider.
I've tried having the div of the slider thumb container on the page without having
<ul id="fp_galleryList" class="fp_galleryList">
<li>Paris</li>
<li>New York</li>
</ul>
but it just shows up blank.
I'd really appreciate a nudge in the right direction.
Here's the tutorial for reference:link
Jsfiddle #pete fixed the fiddle
I'm sorry my fiddle doesn't work but my code is there. (First time using Jsfiddle and Stackoverflow so please be nice ;))
<div id="fp_gallery" class="fp_gallery">
<ul id="fp_galleryList" class="fp_galleryList">
<li>Paris</li>
<li>New York</li>
</ul>
<div id="fp_thumbContainer">
<div id="fp_thumbScroller">
<div class="container">
<div class="content">
<div>
<img src="images/album1/thumbs/1.jpg" alt="images/album1/1.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/2.jpg" alt="images/album1/2.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/3.jpg" alt="images/album1/3.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/1.jpg" alt="images/album1/1.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/2.jpg" alt="images/album1/2.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/3.jpg" alt="images/album1/3.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/1.jpg" alt="images/album1/1.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/2.jpg" alt="images/album1/2.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/3.jpg" alt="images/album1/3.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/1.jpg" alt="images/album1/1.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/2.jpg" alt="images/album1/2.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/3.jpg" alt="images/album1/3.jpg" class="thumb" />
</div>
</div>
</div>
</div>
</div>
</div>
<div id="fp_scrollWrapper" class="fp_scrollWrapper">
<span id="fp_prev_thumb" class="fp_prev_thumb"></span>
<div id="slider" class="slider"></div>
<span id="fp_next_thumb" class="fp_next_thumb"></span>
</div>
<div id="fp_overlay" class="fp_overlay"></div>
<div id="fp_loading" class="fp_loading"></div>
<div id="fp_next" class="fp_next"></div>
<div id="fp_prev" class="fp_prev"></div>
<div id="fp_close" class="fp_close">Close preview</div>
<!-- JAVASCRIPT -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">

Related

jquery animate scrollTop not working on FireFox or IE

I have some jQuery code that scrolls to the top of an element's parent on click event. This code works great, however, when testing on IE and Firefox, the scroll does not work. Does anyone know of a solution for this functionality to work with IE and Firefox?
$(".character-img").click(function(){
$('body').animate({scrollTop: $(this).parent().offset().top});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="character">
<img class="character-img" src="https://unsplash.it/200/300" />
<div class="content">
</div>
</div>
<div class="character">
<img class="character-img" src="https://unsplash.it/200/300" />
<div class="content">
</div>
</div>
<div class="character">
<img class="character-img" src="https://unsplash.it/200/300" />
<div class="content">
</div>
</div>
<div class="character">
<img class="character-img" src="https://unsplash.it/200/300" />
<div class="content">
</div>
</div>
<div class="character">
<img class="character-img" src="https://unsplash.it/200/300" />
<div class="content">
</div>
</div>
<div class="character">
<img class="character-img" src="https://unsplash.it/200/300" />
<div class="content">
</div>
</div>
<div class="character">
<img class="character-img" src="https://unsplash.it/200/300" />
<div class="content">
</div>
</div>
<div class="character">
<img class="character-img" src="https://unsplash.it/200/300" />
<div class="content">
</div>
</div>
<div class="character">
<img class="character-img" src="https://unsplash.it/200/300" />
<div class="content">
</div>
</div>
<div class="character">
<img class="character-img" src="https://unsplash.it/200/300" />
<div class="content">
</div>
</div>
<div class="character">
<img class="character-img" src="https://unsplash.it/200/300" />
<div class="content">
</div>
</div>
<div class="character">
<img class="character-img" src="https://unsplash.it/200/300" />
<div class="content">
</div>
</div>

It's a known problem, Firefox will only accept scrollTop when both body and html are declared.
$('html,body').animate({scrollTop: $(this).parent().offset().top});
is the correct way to write this.
See Animate scrollTop not working in firefox

I can't get my website to smooth scroll

I'm trying to get anchor tags to scroll down to sections of my website but I can't get it to work. This is where I'm getting the code from: http://www.cmscanbesimple.org/blog/smooth-page-scroll-to-an-anchor. I copied it into its own HTML file and it worked perfectly so I can't figure out why it's not working on my site.
<head>
<meta charset="utf-8">
<title>J2 Productions</title>
<link rel="stylesheet" type="text/css" href="index.css">
<link rel="stylesheet" type="text/css" href="parrallax.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="index.js"></script>
</head>
<body>
<div class="parallax">
<div class="parallax__layer parallax__layer--back">
<div id="paintsplash">
<img src="paint_splash.png" height="93%" width="93%" />
</div>
</div>
<div class="parallax__layer parallax__layer--base">
<div id="middle">
<div id="services">
<div id="s_content">
<div id="s_title">
<p>Beats</p>
</div>
<div id="beat1">
<p>| Limitless |</p></br>
<iframe width="35%" height="150" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/186082426&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
</div>
<div id="beat2">
<p>| Haze |</p></br>
<iframe width="35%" height="150" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/176496757&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
</div>
<div id="beat3">
<p>| Self-Destruct |</p></br>
<iframe width="35%" height="150" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/159969838&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
</div>
<div id="beat4">
<p>| Midnight Bass |</p></br>
<iframe width="35%" height="150" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/162606984&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
</div>
</div>
</div>
<div id="recent">
<div id="r_content">
<div id="r_title">
<p>Recent</p>
</div>
<div id="one">
<a href="https://itunes.apple.com/us/album/one-ep/id984646172">
<img src="Front%20Cover.jpg" width="300">
</a>
</div>
<div id="onetxt">
<p align="center">
| Speaking My Language |
<br/>| Pay Up |
<br/>| One Way |
</p>
</div>
<div id="rollin">
<a href="https://itunes.apple.com/us/album/rollin-i-dont-wanna-grow-up/id925559884">
<img src="rollin.jpg" width="300">
</a>
</div>
<div id="rollintxt">
<p align="center">| Rare of Breed - Rollin' |</p>
</div>
</div>
</div>
<div id="pricing">
<div id="p_content">
<div id="p_title">
<p>Pricing</p>
</div>
<div id='exclusive'>
<img src="Exclusive.png" width="650">
</div>
<div id="custom">
<img src="custom.png" width="650">
</div>
</div>
</div>
<div id="aboutme">
<div id="a_content">
<div id="a_title">
<p>Contact Me</p>
</div>
<div id="me">
<img src="me.png" width='350px' />
</div>
<div id="email">
<img src="contact.png" width="100%" height="600px">
</div>
<div id="social">
<div id="fb">
<a href="https://www.facebook.com/J2producing">
<img src="facebook.png" width="113px">
</a>
</div>
<div id="tw">
<a href="https://twitter.com/j2_productionz">
<img src="twitter.png" width="113px">
</a>
</div>
<div id="ig">
<a href="https://instagram.com/j2productions">
<img src="instagram.png" width="123px">
</a>
</div>
<div id="yt">
<a href="https://www.youtube.com/channel/UC2Z9nuiZHdU6fN-UfOie6QA">
<img width="123px" src="youtube.png">
</a>
</div>
<div id="gp">
<a href="https://plus.google.com/u/0/b/100577545228957896103/100577545228957896103/about?hl=en">
<img src="google.png" width="115px">
</a>
</div>
<div id="sc">
<a href="https://soundcloud.com/j2productions">
<img src="soundcloud.png" width="115px">
</a>
</div>
</div>
</div>
</div>
<div id="seperators">
<a id="page1"></a>
<div id="page2"></div>
<div id="page3"></div>
<div id="page4"></div>
</div>
</div>
</div>
</div>
<div id="top">
<a href="index.html">
<img src="J2Productions-text.png" id="logo" draggable="false">
</a>
BEATS
RECENT
PRICING
ABOUT ME
<img src="line.png" id="line">
</div>
<div id="bottom"></div>
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('#paintsplash').fadeIn(1200).delay(3500);
});
</script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event) {
event.preventDefault();
$('html,body').animate({
scrollTop: $(this.hash).offset().top
}, 1000);
});
});
</script>
</body>

The anchor href is the target id. Since your anchor href is set to #page1, then the target is <a id="page1">. You must change them. Example:
<div id ="top">
<img src="J2Productions-text.png" id="logo" draggable="false">
BEATS
RECENT
PRICING
ABOUT ME
<img src="line.png" id="line">
</div>
EDIT
Check this:
<div id="seperators">
<a id="page1"></a>
<div id="page2"></div>
<div id="page3"></div>
<div id="page4"></div>
</div>
<div class="parallax">
<div class="parallax__layer parallax__layer--back">
<div id="paintsplash">
<img src="paint_splash.png" height="93%" width="93%"/>
</div>
</div>
<div class="parallax__layer parallax__layer--base">
<div id="middle">
<div id="services">
<div id="s_content">
<div id="s_title">
<p>Beats</p>
</div>
<div id="beat1">
<p>
| Limitless |
</p></br>
<iframe width="35%" height="150" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/186082426&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
</div>
<div id="beat2">
<p>
| Haze |
</p></br>
<iframe width="35%" height="150" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/176496757&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
</div>
<div id="beat3">
<p>
| Self-Destruct |
</p></br>
<iframe width="35%" height="150" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/159969838&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
</div>
<div id="beat4">
<p>
| Midnight Bass |
</p></br>
<iframe width="35%" height="150" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/162606984&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
</div>
</div>
</div>
<div id="recent">
<div id="r_content">
<div id="r_title">
<p>Recent</p>
</div>
<div id="one">
<a href="https://itunes.apple.com/us/album/one-ep/id984646172">
<img src="Front%20Cover.jpg" width="300">
</a>
</div>
<div id="onetxt">
<p align="center">
| Speaking My Language |<br/>
| Pay Up |<br/>
| One Way |
</p>
</div>
<div id="rollin">
<a href="https://itunes.apple.com/us/album/rollin-i-dont-wanna-grow-up/id925559884">
<img src="rollin.jpg" width="300">
</a>
</div>
<div id="rollintxt">
<p align="center">
| Rare of Breed - Rollin' |
</p>
</div>
</div>
</div>
<div id="pricing">
<div id="p_content">
<div id="p_title">
<p>Pricing</p>
</div>
<div id='exclusive'>
<img src="Exclusive.png" width="650">
</div>
<div id="custom">
<img src="custom.png" width="650">
</div>
</div>
</div>
<div id="aboutme">
<div id="a_content">
<div id="a_title">
<p>Contact Me</p>
</div>
<div id="me">
<img src="me.png" width='350px'/>
</div>
<div id="email">
<img src="contact.png" width="100%" height="600px">
</div>
<div id="social">
<div id="fb">
<a href="https://www.facebook.com/J2producing">
<img src="facebook.png" width="113px">
</a>
</div>
<div id="tw">
<a href="https://twitter.com/j2_productionz">
<img src="twitter.png" width="113px">
</a>
</div>
<div id="ig">
<a href="https://instagram.com/j2productions">
<img src="instagram.png" width="123px">
</a>
</div>
<div id="yt">
<a href="https://www.youtube.com/channel/UC2Z9nuiZHdU6fN-UfOie6QA">
<img width="123px" src="youtube.png">
</a>
</div>
<div id="gp">
<a href="https://plus.google.com/u/0/b/100577545228957896103/100577545228957896103/about?hl=en">
<img src="google.png" width="115px">
</a>
</div>
<div id="sc">
<a href="https://soundcloud.com/j2productions">
<img src="soundcloud.png" width="115px">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id ="top">
<img src="J2Productions-text.png" id="logo" draggable="false">
BEATS
RECENT
PRICING
ABOUT ME
<img src="line.png" id="line">
</div>
<div id="bottom">
</div>
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('#paintsplash').fadeIn(1200).delay(3500);
});
</script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event) {
event.preventDefault();
$('html,body').animate( { scrollTop:$(this.hash).offset().top } , 1000);
} );
} );
</script>

Metroui with Javascript

i have just started working with javascript.i was searching a lot on using metroui.org.ua i am not able to consume the .js files in my html.Am missing some configuration ? any help would be appreciated. including my html file as well
<head>
<link rel="stylesheet" href="../css/modern.css" />
<script src="http://www.google.com/jsapi"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
// Load jQuery
google.load("jquery", "1");
</script>
<script type="text/javascript" src="../js/tile-slider.js"></script>
</head>
<html>
<div class="tile image-slider" data-role="image-slider">
<div class="tile-content">
<img src="../img/AngryBirds.jpg"/>
</div>
<div class="tile-content">
<img src="../img/CutTheRope.jpg"/>
</div>
</div>

The issue Might lie with the Jquery Support For winJS
Please Go through the link
Jquery for winjS
The version you are using might not be compatible with winJS. You might need to do some modifications. Please let me know if it worked or not.
Also try spending time reading this see if it helps
jquery winjs
Here's a code sample that I tested. and the slider is working fine. Copy paste it in a note pad and save as an html. Then run. From the online api it is consuming the code.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="utf-8">
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, maximum-scale=1">
<meta name="description" content="Modern UI CSS">
<meta name="author" content="Sergey Pimenov">
<meta name="keywords" content="windows 8, modern style, modern ui, style, modern, css, framework">
<link href="http://metroui.org.ua/css/modern.css" rel="stylesheet">
<link href="http://metroui.org.ua/css/theme-dark.css" rel="stylesheet">
<link href="http://metroui.org.ua/css/modern-responsive.css" rel="stylesheet">
<script src="http://metroui.org.ua/js/assets/jquery-1.8.2.min.js"></script>
<script src="http://metroui.org.ua/js/assets/google-analytics.js"></script>
<script src="http://metroui.org.ua/js/assets/jquery.mousewheel.min.js"></script>
<script src="http://metroui.org.ua/js/assets/github.info.js"></script>
<script src="http://metroui.org.ua/js/modern/tile-slider.js"></script>
<script src="http://metroui.org.ua/js/modern/start-menu.js"></script>
<script src="http://metroui.org.ua/js/modern/tile-drag.js"></script>
<title>Modern UI CSS</title>
<style>
body {
background: #1d1d1d;
}
</style>
</head>
<body class="metrouicss">
<div class="page secondary fixed-header">
<div class="page-header ">
<div class="page-header-content">
<div class="user-login">
<a href="http://metroui.org.ua/#">
<div class="name">
<span class="first-name">Sergey</span>
<span class="last-name">Pimenov</span>
</div>
<div class="avatar">
<!--<img src="http://metroui.org.ua/images/myface.jpg"/>-->
<i class="icon-user fg-color-white"></i>
</div>
</a>
</div>
<h1 class="fg-color-white">Start</h1>
</div>
</div>
<div class="page-region">
<div class="page-region-content tiles">
<div class="tile-group tile-drag">
<div class="tile icon">
<div class="tile-content">
<i class="icon-calculate"></i>
</div>
<div class="brand">
<span class="name">Calculator</span>
</div>
</div>
<a target="_blank" id="qq" href="http://metroui.org.ua//" onclick="console.log('clicked')" class="tile image outline-color-green">
<div class="tile-content">
<img src="http://metroui.org.ua/images/myface.jpg" alt="">
</div>
</a>
<div class="tile icon">
<div class="tile-content">
<img src="http://metroui.org.ua/images/Mail128.png"/>
</div>
<div class="brand">
<div class="badge">10</div>
<div class="name">Mail</div>
</div>
</div>
<div class="tile bg-color-orangeDark icon">
<b class="check"></b>
<div class="tile-content">
<img src="http://metroui.org.ua/images/Video128.png" alt="" />
</div>
<div class="brand">
<span class="name">Video</span>
</div>
</div>
<div class="tile double image">
<div class="tile-content">
<img src="http://metroui.org.ua/images/5.jpg" alt="" />
</div>
<div class="brand">
<span class="name">Pictures</span>
<div class="badge bg-color-orange">5</div>
</div>
</div>
<div class="tile bg-color-green icon">
<div class="tile-content">
<img src="http://metroui.org.ua/images/Market128.png"/>
</div>
<div class="brand">
<span class="name">Store</span>
<span class="badge">6</span>
</div>
</div>
<div class="tile bg-color-red icon">
<div class="tile-content">
<img src="http://metroui.org.ua/images/Music128.png" alt="" />
</div>
<div class="brand">
<span class="name">Music</span>
</div>
</div>
<div class="tile double bg-color-blueDark">
<div class="tile-content">
<img src="http://metroui.org.ua/images/michael.jpg" class="place-left"/>
<h3 style="margin-bottom: 5px;">michael_angiulo</h3>
<p>
I just saw Thor last night. It was awesome! I think you'd love it.
</p>
<h5>RT #julie_green</h5>
</div>
<div class="brand">
<span class="name">Tweet#rama</span>
</div>
</div>
<div class="tile bg-color-darken icon">
<div class="tile-content">
<img src="http://metroui.org.ua/images/YouTube128.png" alt="" />
</div>
<div class="brand">
<span class="name">YouTube</span>
</div>
</div>
<div class="tile double bg-color-green" data-role="tile-slider" data-param-period="3000">
<div class="tile-content">
<h2>mattberg#live.com</h2>
<h5>Re: Wedding Annoucement!</h5>
<p>
Congratulations! I'm really excited to celebrate with you all. Thanks for...
</p>
</div>
<div class="tile-content">
<h2>tina#live.com</h2>
<h5>Re: Wedding Annoucement!</h5>
<p>
Huh! Waw!!! I'm really excited to celebrate with you all. Thanks for...
</p>
</div>
<div class="brand">
<div class="badge">12</div>
<img class="icon" src="http://metroui.org.ua/images/Mail128.png"/>
</div>
</div>
<div class="tile double image-slider" data-role="tile-slider" data-param-period="5000" data-param-direction="left">
<div class="tile-content">
<img src="http://metroui.org.ua/images/1.jpg" alt="">
</div>
<div class="tile-content">
<img src="http://metroui.org.ua/images/2.jpg" alt="">
</div>
<div class="tile-content">
<img src="http://metroui.org.ua/images/3.jpg" alt="">
</div>
<div class="tile-content">
<img src="http://metroui.org.ua/images/4.jpg" alt="">
</div>
<div class="tile-content">
<img src="http://metroui.org.ua/images/5.jpg" alt="">
</div>
</div>
</div>
<div class="tile-group tile-drag">
<div class="tile image outline-color-green">
<div class="tile-content">
<img src="http://metroui.org.ua/images/myface.jpg" alt="">
</div>
</div>
</div>
<div class="tile-group tile-drag">
<div class="tile bg-color-blue icon">
<div class="tile-content">
<img src="http://metroui.org.ua/images/InternetExplorer128.png"/>
</div>
<div class="brand">
<span class="name">Internet Explorer</span>
</div>
</div>
<div class="tile icon">
<div class="tile-content">
<img src="http://metroui.org.ua/images/excel2013icon.png"/>
</div>
<div class="brand">
<span class="name">Excel 2013</span>
</div>
</div>
<div class="tile icon">
<div class="tile-content">
<img src="http://metroui.org.ua/images/word2013icon.png"/>
</div>
<div class="brand">
<span class="name">Word 2013</span>
</div>
</div>
<div class="tile icon">
<div class="tile-content">
<img src="http://metroui.org.ua/images/onenote2013icon.png"/>
</div>
<div class="brand">
<span class="name">OneNote 2013</span>
</div>
</div>
<div class="tile double image-set">
<div class="tile-content">
<img src="http://metroui.org.ua/images/1.jpg" alt="">
</div>
<div class="tile-content">
<img src="http://metroui.org.ua/images/2.jpg" alt="">
</div>
<div class="tile-content">
<img src="http://metroui.org.ua/images/3.jpg" alt="">
</div>
<div class="tile-content">
<img src="http://metroui.org.ua/images/4.jpg" alt="">
</div>
<div class="tile-content">
<img src="http://metroui.org.ua/images/5.jpg" alt="">
</div>
<div class="brand">
<span class="name">Photos</span>
</div>
</div>
</div>
<div class="tile-group">
<div class="tile double image">
<div class="tile-content">
<img src="http://metroui.org.ua/images/4.jpg" alt="" />
</div>
<div class="brand bg-color-orange">
<img class="icon" src="http://metroui.org.ua/images/Rss128.png"/>
<p class="text">This is a desert eagle. He is very hungry and angry bird.</p>
<div class="badge">10</div>
</div>
</div>
<div class="tile bg-color-blue icon">
<div class="tile-content">
<img src="http://metroui.org.ua/images/InternetExplorer128.png"/>
</div>
<div class="brand">
<span class="name">Internet Explorer</span>
</div>
</div>
<div class="tile icon">
<div class="tile-content">
<img src="http://metroui.org.ua/images/excel2013icon.png"/>
</div>
<div class="brand">
<span class="name">Excel 2013</span>
</div>
</div>
<div class="tile icon">
<div class="tile-content">
<img src="http://metroui.org.ua/images/word2013icon.png"/>
</div>
<div class="brand">
<span class="name">Word 2013</span>
</div>
</div>
<div class="tile icon">
<div class="tile-content">
<img src="http://metroui.org.ua/images/onenote2013icon.png"/>
</div>
<div class="brand">
<span class="name">OneNote 2013</span>
</div>
</div>
</div>
<div class="tile-group tile-drag">
<div class="tile double image">
<div class="tile-content">
<img src="http://metroui.org.ua/images/4.jpg" alt="" />
</div>
<div class="brand bg-color-orange">
<img class="icon" src="http://metroui.org.ua/images/Rss128.png"/>
<p class="text">This is a desert eagle. He is very hungry and angry bird.</p>
<div class="badge">10</div>
</div>
</div>
<div class="tile bg-color-blue icon">
<div class="tile-content">
<img src="http://metroui.org.ua/images/InternetExplorer128.png"/>
</div>
<div class="brand">
<span class="name">Internet Explorer</span>
</div>
</div>
<div class="tile icon">
<div class="tile-content">
<img src="http://metroui.org.ua/images/excel2013icon.png"/>
</div>
<div class="brand">
<span class="name">Excel 2013</span>
</div>
</div>
<div class="tile icon">
<div class="tile-content">
<img src="http://metroui.org.ua/images/word2013icon.png"/>
</div>
<div class="brand">
<span class="name">Word 2013</span>
</div>
</div>
<div class="tile icon">
<div class="tile-content">
<img src="http://metroui.org.ua/images/onenote2013icon.png"/>
</div>
<div class="brand">
<span class="name">OneNote 2013</span>
</div>
</div>
</div>
<div class="tile-group">
<div class="tile quadro double-vertical image-set">
<div class="tile-content">
<img src="http://metroui.org.ua/images/1.jpg" alt="">
</div>
<div class="tile-content">
<img src="http://metroui.org.ua/images/2.jpg" alt="">
</div>
<div class="tile-content">
<img src="http://metroui.org.ua/images/3.jpg" alt="">
</div>
<div class="tile-content">
<img src="http://metroui.org.ua/images/4.jpg" alt="">
</div>
<div class="tile-content">
<img src="http://metroui.org.ua/images/5.jpg" alt="">
</div>
<div class="brand">
<span class="name">Photos</span>
</div>
</div>
</div>
</div>
</div>
</div>
<a href='http://hit.ua/?x=19154' target='_blank'>
<script language="javascript" type="text/javascript"><!--
Cd=document;Cr="&"+Math.random();Cp="&s=1";
Cd.cookie="b=b";if(Cd.cookie)Cp+="&c=1";
Cp+="&t="+(new Date()).getTimezoneOffset();
if(self!=top)Cp+="&f=1";
//--></script>
<script language="javascript1.1" type="text/javascript"><!--
if(navigator.javaEnabled())Cp+="&j=1";
//--></script>
<script language="javascript1.2" type="text/javascript"><!--
if(typeof(screen)!='undefined')Cp+="&w="+screen.width+"&h="+
screen.height+"&d="+(screen.colorDepth?screen.colorDepth:screen.pixelDepth);
//--></script>
<script language="javascript" type="text/javascript"><!--
Cd.write("<img src='http://c.hit.ua/hit?i=19154&g=0&x=2"+Cp+Cr+
"&r="+escape(Cd.referrer)+"&u="+escape(window.location.href)+
"' border='0' wi"+"dth='1' he"+"ight='1'/>");
//--></script>
<noscript>
<img src='http://c.hit.ua/hit?i=19154&g=0&x=2' border='0'/>
</noscript></a>
<!-- / hit.ua -->
</body>
</html>

The question isn't clear at all..
If I understood right, your problem may be that the row:
<script type="text/javascript" src="../js/tile-slider.js"></script>
is in the head tag. Try moving it to just behind the end of body tag. Try moving every script that is not working to there. Some things in javascript won't work if the script is in the wrong place- that's because if the script is in the beginning, it's read before the html is read. If you're trying to change something in the html, for example, it won't do that if it comes before that html row. If it doesn't work please add the script source.

Your html tag is in the wrong place - it should look something like this:
<!DOCTYPE html>
<html>
<head>
<!-- script and link tags go here -->
</head>
<body>
<!-- div and img tags go here -->
</body>
</html>

In case all you want is to show flipping tiles, you could use the jquery animate function as follows:
// hides the given tile, and calls the callback.
this._hideTile = function(tile, callback){
tile.animate({height:0});
}
// shows the given tile.
this._showTile= function(tile){
tile.animate({height:150});
}
Check out the full logic in this jsFiddle.

Jquery Cycle and Pixastic fast blur

I am trying to cycle my image and blur the background image but the problem is it only blurs the first image but not the next image.
<div id="banner_images">
<div id="banner_cycle_wrapper">
<div id="banner_bg_cycle">
<img src="source.png" class="blur">
</div>
<div id="banner_cycle_container">
<img src="source.png">
</div>
</div>
<div id="banner_cycle_wrapper" >
<div id="banner_bg_cycle">
<img alt="" src="source.png" class="blur">
</div>
<div id="banner_cycle_container">
<img src="source.png">
</div>
</div>
</div>
$('#banner_images').cycle({
fx: 'fade',
timeout: 2000
});
$(".blur").pixastic("blurfast", {amount:0.5});

I think you are missing CLASS to add in that
class="blur"
this should be added to each image you want to have the same effect.
Updated Code:
<div id="banner_images">
<div id="banner_cycle_wrapper">
<div id="banner_bg_cycle">
<img alt="" src="source.png"/>
</div>
<div id="banner_cycle_container">
<img alt="" src="img1.png" class="blur" />
<img alt="" src="img2.png" class="blur" />
</div>
</div>
</div>
I hope this will help :)

Lightbox Gallery Issue

I am hoping someone can help me with this issue ...
I am wanting each of the 6 images to be it's own Gallery, and for the Life of me am Beyond Lost!
Here is the JS code:
$(function(){
// lightbox image
$(".lightbox-image").append("<span></span>");
$(".lightbox-image").hover(function(){
$(this).find("img").stop().animate({opacity:0.5}, "normal")
}, function(){
$(this).find("img").stop().animate({opacity:1}, "normal")
});
});
Here is the HTML:
<div class="pad_left1">
<div class="wrapper pad_bot1">
<div class="cols"> <img src="images/page3_img1.png" alt="">
<p><strong class="font1">Company Logos</strong>???enter text here???<br><br>
</p>
</div>
<div class="cols pad_left1"> <img src="images/page3_img2.png" alt="">
<p><strong class="font1">Business Cards</strong>???enter text here???<br>
</p>
</div>
</div>
<div class="wrapper pad_bot1">
<div class="cols"> <img src="images/page3_img3.png" alt="">
<p><strong class="font1">Photography/Photo Edits</strong>???enter text here???<br><br>
</p>
</div>
<div class="cols pad_left1"> <img src="images/page3_img4.png" alt="">
<p><strong class="font1">Band Logos/Album Covers</strong>???enter text here???<br>
</p>
</div>
</div>
<div class="wrapper pad_bot1">
<div class="cols"> <img src="images/page3_img5.png" alt="">
<p><strong class="font1">Random Designs</strong>???enter text here???<br>
</p>
</div>
<div class="cols pad_left1"> <img src="images/page3_img6.png" alt="">
<p><strong class="font1">Websites</strong>???enter text here???<br>
</p>
</div>
</div>
</div>

It's simple try to do it this way if you need a set of gallery
<div>
image #1
image #2
image #3
</div>
<div>
image #4
image #5
image #6
</div>

Categories

Resources