Solved

Help with gallery slider Jquery

Posted on 2012-03-12
3
578 Views
Last Modified: 2012-03-27
I can’t figure out how to get this gallery to work.  The slider app is jquery.jcoverflip.js

This is my code, all I get is two bulleted list items.:

<html xmlns="http://www.w3.org/1<wbr ></wbr>999/xhtml"<wbr ></wbr>>

<head>

<title>Test 1</title>
<script type="text/javascript" src="jquery-1.7.1.min.js"><wbr ></wbr></script>

<script type="text/javascript" src="ui/jquery.ui.js"></sc<wbr ></wbr>ript>
<script type="text/javascript" src="jquery.jcoverflip.js"<wbr ></wbr>></script><wbr ></wbr>

<script type="text/javascript">

$(function(){
    $('#flip').jcoverflip();
 
  });
  
    Add the styles to your site: 
      .ui-jcoverflip {
        position: relative;
      }
      
      .ui-jcoverflip--item {
        position: absolute;
        display: block;
      }

</script>


</head>

<body>

<ul id="flip">
    <li><a href=""><img../lemons1/1.j<wbr ></wbr>pg><span class="title">My title</span></a></li>
    <li><a href=""><img../lemons1/2.j<wbr ></wbr>pg><span  class="title">Another title</span></a></li>
    ...
  </ul>

</body>

</html>

Open in new window



Thanks.
0
Comment
Question by:bmanmike39
3 Comments
 
LVL 22

Expert Comment

by:Mrunal
ID: 37713873
First of all add this in your css:

ul, ul li {
    display: block;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

And try by adding your code for jCoverFlip after body tag.

$(function(){
    $('#flip').jcoverflip();
});

If still not working then check by running same page in firefox with firebug addon. you will get proper error if any.
0
 
LVL 34

Accepted Solution

by:
gr8gonzo earned 500 total points
ID: 37714267
Try changing your call to:

$(document).ready(function() {
  $('#flip').jcoverflip();
}
0
 

Author Comment

by:bmanmike39
ID: 37714327
I ran firebug and don't quite know how to use it but i don't see an error.  below is what i have.  I followed the instructions.  Don't understand whats going on.

This is what i have.

<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.7.2/ui/minified/jquery-ui.js"></script>
<script type="text/javascript" src="jquery.jcoverflip.js"></script>

<script type="text/css">

      .ui-jcoverflip {
        position: relative;
      }
      
      .ui-jcoverflip--item {
        position: absolute;
        display: block;
      }
}
</script>

</head>

<body>

<script type="text/javascript">
$(function(){
    $('#flip').jcoverflip(); 
});
</script>



<ul id="flip">
    <li><a href="http://www.gmx3.com"><img src="../lemons1/1.jpg"><span class="title">My title</span></a></li>
    <li><a href="http://www.gmx3.com"><img src="../lemons1/2.jpg"><span  class="title">Another title</span></a></li>
    ...
  </ul>

Open in new window

0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question