?
Solved

Help with bxslider javascript issues

Posted on 2013-05-17
10
Medium Priority
?
1,924 Views
Last Modified: 2013-09-16
I am need of some help with the following webpage:

http://winnersdrinkmilk.com/30Dairies/

I am having difficulty getting the slider to function properly.

The page should work as follows:

- In the green bar, there will end up being 30-31 dairies. The dairies need to be clickable, when clicked on, information will appear in the center of the page detailing that dairy, that will then allow you to go to an html page that has already been created.
- The arrows need to control the thumbnails sliding left and right.


Issues:
- Right now, the page is a mess in terms of functionality.
- Currently, the arrows (which are both on the left... and need to be one on the left and one on the right) control the content at the top of the page, while they should make the thumbnails slide left and right.
- The thumbnails are all image. I would like for the text below the thumbnail to be within the html and not within the image; however, I cannot figure out how to do this.
- Needs to work in ie9, and I have no way of checking anything in IE9
- Would love for the content in the middle of the page to be editable rather than an image, but cannot figure out how to best set this up to make it work. We are dealing with quite a bit of content (30+ dairies) so I am wondering if the information should be housed externally and called from the html file.

Any suggestions would be greatly appreciated. We are on a tight deadline with this, so any feedback would be fantastic. THANK YOU so so much!!!!!!
0
Comment
Question by:halipe
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
10 Comments
 

Author Comment

by:halipe
ID: 39175626
Bump
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39176639
A bit overwhelming. Sounds like custom scripting rather than answering a question.
I will take a look, but no promises.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39176680
/30Dairies/jquery.bxSlider.min.js

gives a 404

and you load jQuery twice - once in the head and once here:

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="js/bxslider/jquery.bxslider.js"></script>
<script>
$('.bxslider').bxSlider({
  pagerCustom: '#bx-pager'
});
0
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 2000 total points
ID: 39176695
Here is a start to make sure that the slider works the way you need it to

FIrst style that, then we can continue - I however recommend you to find another slider instead of making this one show cations. It is not designed to do so

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>30 Dairies in 30 Days</title>

<!-- bxSlider CSS file -->
<link href="js/bxslider/jquery.bxslider.css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script type="text/javascript" src="js/bxslider/jquery.bxslider.js"></script>
<script type="text/javascript">
$(function() {
  $('.bxslider').bxSlider({
    pagerCustom: '#bx-pager'
  });
});
</script>
</head>

<body class="main">
<!--main content begins here-->
  <ul class="bxslider">
    <li><img src="js/bxslider/images/slide-1.png"/></li>
    <li><img src="js/bxslider/images/slide-2.png"/></li>
  </ul>
  <div id="bx-pager" class="container_24"> 
  	<a data-slide-index="0" href="allwrightfarm.html"><img src="js/bxslider/images/thumb-muncie.png" /></a> 
    <a data-slide-index="1" href=""><img src="js/bxslider/images/thumb-albion.png" /></a> 
  </div>
<!--main content ends here-->

<div class="footer">
  <p class="container_24">©2013 Brought to you by the American Dairy Association of Indiana, your Indiana Dairy Farm Families.</p>
</div>
</body>
</html>

Open in new window

0
 

Author Comment

by:halipe
ID: 39177035
I'm now having server issues with the site, so I cannot check the code. Will continue trying to update....
0
 
LVL 58

Expert Comment

by:Gary
ID: 39495922
I've requested that this question be deleted for the following reason:

Not enough information to confirm an answer.
0
 

Author Comment

by:halipe
ID: 39495912
Question was not answered. Please close the question. THanks
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39495923
0

Featured Post

7 Extremely Useful Linux Commands for Beginners

Just getting started with Linux? Here's a quick start guide that has 7 commands that we believe will come in handy.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article discusses four methods for overlaying images in a container on a web page
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…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

801 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