Jquery plugin issue

Question

geneh23 0 Junior Poster

11 Years Ago

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>

javascript jquery seo

4 Contributors
7 Replies
373 Views
11 Months Discussion Span
Latest Post 10 Years Ago Latest Post by radhakrishna.p

JorgeM 958 Problem Solver

11 Years Ago

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 11 Years Ago by JorgeM

pritaeas 2,194 ¯\_(ツ)_/¯

11 Years Ago

Also loading jQuery 1.4.1 and 1.9.1. Remove line 38 too.

Edited 11 Years Ago by pritaeas

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

geneh23 0 Junior Poster · Answer 1 · 2013-05-15T22:35:08+00:00

@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..

JorgeM 958 Problem Solver Team Colleague Featured Poster · Answer 2 · 2013-05-15T23:01:00+00:00

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>

geneh23 0 Junior Poster · Answer 3 · 2013-05-15T23:32:39+00:00

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.

geneh23 0 Junior Poster · Answer 4 · 2013-05-16T00:04:04+00:00

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>

radhakrishna.p 29 Posting Whiz in Training · Answer 5 · 2014-04-28T15:07:35+00:00

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