0

Hey everyone,

I have a couple of questions and I'm not sure the best way to ask them..I have a "slideshow" feature on a site I'm working on and when I place the jquery external links for the "tabbed" section, the slideshow doesn't work. It just places the images on top of each other. When I place the jquery external tab links else where, they don't work but the slideshow works. Is there any way I can get the slideshow thing working as well as to display the tab feature at the same time? Here is the code and the external links are on lines 47-55. Thanks in advance!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> - Buy From Us Sell For Free - </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/feature-carousel.css" rel="stylesheet" charset="utf-8" />
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
// run the function below once the DOM(Document Object Model) is ready 
$(document).ready(function() {
    // trigger the function when clicking on an assigned element
    $(".toggle").click(function () {
        // check the visibility of the next element in the DOM
        if ($(this).next().is(":hidden")) {
            $(this).next().slideDown("slow"); // slide it down
        } else {
        $(this).next().slideUp("slow"); // slide it up
        }
    });
});
</script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="Downloads/jquery.cycle.lite.1.0.min.js"></script>
<script type="text/javascript" src="Downloads/jquery.loadImages.1.0.1.min.js"></script>
<script type="text/javascript">
$(document).ready (funtion () (
  $.loadImages({'images/main_image.jpg,
   'Images/slideshow_image3.jpg',
   'Images/slideshow_image2.jpg',
   'Images/slideshow_image1.jpg'}, function() {
  $('#img').show().cycle();
  });
});
</script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
        fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    });
});
</script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
  $(function() {
    $( "#tabs" ).tabs();
  });
  </script>
4
Contributors
7
Replies
48
Views
4 Years
Discussion Span
Last Post by radhakrishna.p
0

You dont need line 24, 38 or 48 because you are already loading it in line 8. You may want to re-arrange some of these items. I'd suggest having your Style sheet references first, then the jQuery library, then the external jquery ui library, then any misc libraries after that. then any script code blocks remaining should go next.

Edited by JorgeM

0

@jorgeM, Can you give me an example of what you mean by order? Sorry I've been looking at code all day, trying to figure this out and my eyes are a little scattered..

0

something like this. I didnt go through your code, but if you have other javascript libraries referenced, you could encounter a jQuery conflict. see here about that.. http://api.jquery.com/jQuery.noConflict/

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <link "...css" />
 <link "...other css" />
 <script src="....jquery"></script>
 <script src="....jqueryUI"></script>
 <script scr="....otherLibraries"></script>
</head>
<body>

  <!-- HTML/PHP code -->

<script>
  // my JavaScript/jQuery block
</script>

</body>
</html>

Edited by JorgeM

0

I tried deleting those lines of code and re-arranging the things you had asked but when I do that, the slide show doesn't work nor does the tab section.

0

Ok so here is another look. I didn't take anything out because when I did that, it didn't display the slideshow. It either just displayed one image or listed the images vertically. I have the code where the tabbed information shows but the slideshow is still stacked. I'm sorry if I seem pushy, I don't mean to come across that way. So forgive me for any lack of knowledge or anything of that nature. I have been at this for two days now..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> - test - </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/feature-carousel.css" rel="stylesheet" charset="utf-8" />
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
// run the function below once the DOM(Document Object Model) is ready 
$(document).ready(function() {
    // trigger the function when clicking on an assigned element
    $(".toggle").click(function () {
        // check the visibility of the next element in the DOM
        if ($(this).next().is(":hidden")) {
            $(this).next().slideDown("slow"); // slide it down
        } else {
        $(this).next().slideUp("slow"); // slide it up
        }
    });
});
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="Downloads/jquery.cycle.lite.1.0.min.js"></script>
<script type="text/javascript" src="Downloads/jquery.loadImages.1.0.1.min.js"></script>
<script type="text/javascript">
$(document).ready (funtion () (
  $.loadImages({'images/main_image.jpg,
   'Images/slideshow_image3.jpg',
   'Images/slideshow_image2.jpg',
   'Images/slideshow_image1.jpg'}, function() {
  $('#img').show().cycle();
  });
});
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
        fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    });
});
</script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
  $(function() {
    $( "#tabs" ).tabs();
  });
  </script>

Here is the html part

<div id="tabs">
      <ul>
        <li><a href="#tabs-1">tab 1</a></li>
        <li><a href="#tabs-2">tab 2</a></li>
        <li><a href="#tabs-3">tab 3</a></li>
      </ul>
      <div id="tabs-1">
        some stuff here
      </div>
      <div id="tabs-2">
        some stuff here
      </div>
      <div id="tabs-3">
        some stuff here
      </div>
    </div>
0

hi all,
i am not sure but my guess is the problem might be with jquery. it conflicts with other jquery codes in your page.
so try to change the lines from (50-53 in the above post)this

<script>
    $(function() {
        $( "#tabs" ).tabs();
    });
</script>

to this,

<script>
    Jq = $.noConflict();
    Jq(function() {
        Jq( "#tabs" ).tabs();
    });
</script>

check it and let me know the status.

note : any comments are appreciated

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.