FORUMS: list search recent posts

Help with combining two jquery scripts

COW Forums : Web Design

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT   •   NEXT >>
Sarah Gridley
Help with combining two jquery scripts
on Dec 4, 2009 at 11:03:39 pm

Hello, I need some help combining two jquery scripts for a website.
Ideally, I'd like the two scripts to sit side by side.
However, I'm having trouble having them both keep their functionality as both use unordered lists for their functions.

The two jquery scripts are:
http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/
and
http://tutorialzine.com/2009/11/beautiful-apple-gallery-slideshow/

I think I may need to put the lists in different classes, but have not been able to figure out how to do so. I would like the thumbnail gallery to sit to the left of the slideshow gallery.

My current html/css is all a big mess and jumble of the two codes while I've been trying to sort through them. (I am not an expert at this by any means.)

This is the body of my index.html file:

<!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" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<link rel="stylesheet" href="main.css" type="text/css" media="screen" />


</head>
<body>

<div class="container">

<div id="main">

<h1>Apple-like Slideshow Gallery</h1>

<h2>View the <a href="http://tutorialzine.com/2009/11/beautiful-apple-gallery-slideshow/" target="_blank">original tutorial &raquo;</a></h2>




</div>

<ul class="thumb">
<li><a href="#"><img src="images/Candle 2.png" alt="" /></a></li>
<li><a href="#"><img src="images/Gift 1.png" alt="" /></a></li>
<li><a href="#"><img src="images/Cupcake.png" alt="" /></a></li>
<li><a href="#"><img src="images/Christmas Tree.png" alt="" /></a></li>
<li><a href="#"><img src="images/Christmas Ball 1.png" alt="" /></a></li>
<li><a href="#"><img src="images/Christmas Light Red.png" alt="" /></a></li>
<li><a href="#"><img src="images/Snow Man.png" alt="" /></a></li>
<li><a href="#"><img src="images/Mistletoe.png" alt="" /></a></li>
<li><a href="#"><img src="images/Snowflake.png" alt="" /></a></li>
<li><a href="#"><img src="images/Christmas Tree.png" alt="" /></a></li>
<li><a href="#"><img src="images/Christmas Ball 3.png" alt="" /></a></li>
<li><a href="#"><img src="images/Christmas Light Blue.png" alt="" /></a></li>
</ul>

<div id="main_view">
<div id="gallery">

<div id="slides">

<div class="slide"><img src="images/sample_slides/macbook.jpg" width="920" height="400" alt="side" /></div>
<div class="slide"><img src="images/sample_slides/iphone.jpg" width="920" height="400" alt="side" /></div>
<div class="slide"><img src="images/sample_slides/imac.jpg" width="920" height="400" alt="side" /></div>
<div class="slide"><img src="images/sample_slides/info.jpg" width="920" height="400" alt="side" /></a></div>

</div>

<div id="menu">

<ul class="apple">
<li class="fbar">&nbsp;</li><li class="menuItem"><a href=""><img src="images/sample_slides/thumb_macbook.png" alt="thumbnail" /></a></li>
<li class="menuItem"><a href=""><img src="images/sample_slides/thumb_iphone.png" alt="thumbnail" /></a></li>
<li class="menuItem"><a href=""><img src="images/sample_slides/thumb_imac.png" alt="thumbnail" /></a></li>
<li class="menuItem"><a href=""><img src="images/sample_slides/thumb_about.png" alt="thumbnail" /></a></li>
</ul>


</div>
</div>
</div>



<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="thumbnail.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>





And this is the css file:

}

body{
/* Setting default text color, background and a font stack */
color:#444444;
font-size:13px;
background: #f2f2f2;
font-family:Arial, Helvetica, sans-serif;
}


.container {
height: 360px;
width: 910px;
margin: -180px 0 0 -450px;
top: 30%; left: 50%;
position: absolute;
}
ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative;
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px;
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
ul.thumb li img.hover {
background:url(images/thumb_bg.png) no-repeat center center;
border: none;
}
#main_view {
float: left;
padding: 9px 0;
margin-left: -10px;
}

/* Gallery styles */

#gallery{
border: 1px solid #ddd;
background:url(images/panel.jpg) repeat-x bottom center #ffffff;

/* The width of the gallery */
width:320px;
overflow:hidden;
}

#slides{
/* This is the slide area */
height:425px;

/* jQuery changes the width later on to the sum of the widths of all the slides. */
width:420px;
overflow:hidden;
}

.slide{
float:left;
}

#menu{
/* This is the container for the thumbnails */
height:45px;
}

#menu ul{
margin:0px;
padding:0px;
}

#menu ul li{
/* Every thumbnail is a li element */
width:60px;
display:inline-block;
list-style:none;
height:45px;
overflow:hidden;
}

li.inact:hover{
/* The inactive state, highlighted on mouse over */
background:url(images/pic_bg.png) repeat;
}

li.act,li.act:hover{
/* The active state of the thumb */
background:url(images/active_bg.png) no-repeat;
}

li.act a{
cursor:default;
}

.fbar{
/* The left-most vertical bar, next to the first thumbnail */
width:2px;
background:url(images/divider.png) no-repeat right;
}

#menu li a{
display:block;
background:url(images/divider.png) no-repeat right;
height:35px;
padding-top:10px;
}

#menu a img{
border:none;
}



h1{
font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
font-size:36px;
font-weight:normal;
margin-bottom:15px;
}

h2{
font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:normal;
position:absolute;
right:0;
text-transform:uppercase;
top:15px;
}

#main{
/* The main container */
margin:15px auto;
text-align:center;
width:910px;
position:relative;
}

a, a:visited {
color:#0196e3;
text-decoration:none;
outline:none;
}

a:hover{
text-decoration:underline;
}

p{
padding:10px;
text-align:center;
}



This is the javascript for the slider gallery:


$(document).ready(function(){
/* This code is executed after the DOM has been completely loaded */

var totWidth=0;
var positions = new Array();

$('#slides .slide').each(function(i){

/* Traverse through all the slides and store their accumulative widths in totWidth */

positions[i]= totWidth;
totWidth += $(this).width();

/* The positions array contains each slide's commulutative offset from the left part of the container */

if(!$(this).width())
{
alert("Please, fill in width & height for all your images!");
return false;
}

});

$('#slides').width(totWidth);

/* Change the cotnainer div's width to the exact width of all the slides combined */

$('#menu ul li a').click(function(e){

/* On a thumbnail click */

$('li.menuItem').removeClass('act').addClass('inact');
$(this).parent().addClass('act');

var pos = $(this).parent().prevAll('.menuItem').length;

$('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450);
/* Start the sliding animation */

e.preventDefault();
/* Prevent the default action of the link */
});

$('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
/* On page load, mark the first thumbnail as active */

});



And this is the javascript for the thumbnail gallery:


$(document).ready(function(){

//Larger thumbnail preview

$("ul.thumb li").hover(function() {
$(this).css({'z-index' : '10'});
$(this).find('img').addClass("hover").stop()
.animate({
marginTop: '-110px',
marginLeft: '-110px',
top: '50%',
left: '50%',
width: '174px',
height: '174px',
padding: '20px'
}, 200);

} , function() {
$(this).css({'z-index' : '0'});
$(this).find('img').removeClass("hover").stop()
.animate({
marginTop: '0',
marginLeft: '0',
top: '0',
left: '0',
width: '100px',
height: '100px',
padding: '5px'
}, 400);
});

//Swap Image on Click
$("ul.thumb li a").click(function() {

var mainImage = $(this).attr("href"); //Find Image Name
$("#main_view img").attr({ src: mainImage });
return false;
});

});



Help!


Return to posts index

Jameson Wallace
Re: Help with combining two jquery scripts
on Dec 5, 2009 at 7:19:12 am

well, for one thing you are loading two different version of jQuery.
have you tried loading just the newest one?
do both scripts work ok with just the newest jQuery loaded?

| Jameson Wallace
| Motion Graphics Festival
| New Motion + New Sound + New Code
| http://MGFest.com


Return to posts index

Sarah Gridley
Re: Help with combining two jquery scripts
on Dec 5, 2009 at 12:26:52 pm

Ah, I forgot to remove the older jquery script. Thank you! I just fixed that and it did help the functioning of the thumbnail gallery a bit, but I still can't manage to get them both sitting side by side. When I alter the width of the slideshow it stops working and the slides no longer respond.


Return to posts index

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
© 2017 CreativeCOW.net All Rights Reserved
[TOP]