I'm making a page that has javascript bubble links and I want a slideshow on it. It seemed to work fine, but then after making a couple other pages with slideshows, they all broke. I'm not sure why because they all have different names with different javascripts and they're all in the right place. I'm going to paste all the code I have for one page. I have a folder named jewelry that has the pictures and the javascript, however the html page is in the main folder, but I have it labeled as such. Is there something that I'm missing or need to take away? I'd like to note that the javascript got is pretyy much completely from a javascript book ( I just changed the file locations and the captions) so that should be pretty good. It's mostly the html. I want my navigation to work with my slideshow. It'll show the first image, but then the buttons won't go to the next slide.
If you have any suggestions for easier coding, go ahead. Otherwise, I'd just like to get this fixed. My final project is due in a couple days and idk how to fix this! I don't have it all uploaded to an actual link so you'll have to work with the snippets I gave you - which is literally my whole entire page and all my javascript.
Thanks in advance.
window.onload = initAll;
var currImg = 0;
var captionText = [
"Mostly bracelets right now",
];
function initAll() {
document.getElementById("imgText").innerHTML = captionText[0];
document.getElementById("prevLink").onclick = function() {
newSlide(-1);
}
document.getElementById("nextLink").onclick = function() {
newSlide(1);
}
}
function newSlide(direction) {
var imgCt = captionText.length;
currImg = currImg + direction;
if (currImg < 0) {
currImg = imgCt-1;
}
if (currImg == imgCt) {
currImg = 0;
}
document.getElementById("slideshow1").src = "jewelry/bracelet" + currImg + ".jpg";
document.getElementById("imgText").innerHTML = captionText[currImg];
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Think Jewelry</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="keywords" content="jquery, circular menu, navigation, round, bubble"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<script src="jewelry/jewelry.js"></script>
<style>
#horizon
{
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
overflow: visible;
visibility: visible;
display: block;
}
#stuff
{
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: #fff;
margin-left: -500px;
position: absolute;
top: -125px;
left: 50%;
width: 1000px;
height: 450px;
visibility: visible;
overflow: scroll;
padding: 10px;
border: 5px dotted #F3DECD;
text-align: center;
}
footer {
height:45px;
width:100%;
background-color:#EAC5E4;
position:relative;
bottom:-0;
font-style: italic;
}
*{
margin:0;
padding:0;
}
body{
font-family:Arial;
background:#fff url(images/bg1.png) repeat;
background-size: 700px;
height: 100%;
min-height: 100%;
}
.title{
width:548px;
height:119px;
position:absolute;
background:transparent url(title.png) no-repeat top left;
}
#content{
margin:0 auto;
}
</style>
</head>
<body>
<div id="content">
<div class="title"> </div>
<div class="navigation" id="nav">
<div class="item user">
<img src="images/bg_user.png" alt="" width="199" height="199" class="circle"/>
<h2>Home</h2>
<ul>
<li>About the Shop</li>
<li>About the Artist</li>
</ul>
</div>
<div class="item home">
<img src="images/bg_home.png" alt="" width="199" height="199" class="circle"/>
<h2>How-To's</h2>
<ul>
<li>Jewelry</li>
<li>Clay</li>
</ul>
</div>
<div class="item shop">
<img src="images/bg_shop.png" alt="" width="199" height="199" class="circle"/>
<h2>Portfolio</h2>
<ul>
<li>Jewelry</li>
<li>Clay</li>
<li>Digital</li>
</ul>
</div>
<div class="item camera">
<img src="images/bg_camera.png" alt="" width="199" height="199" class="circle"/>
<h2>Contact</h2>
<ul>
<li>Questions</li>
<li>Suggestions</li>
</ul>
</div>
</div>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
$('#nav > div').hover(
function () {
var $this = $(this);
$this.find('img').stop().animate({
'width' :'199px',
'height' :'199px',
'top' :'-25px',
'left' :'-25px',
'opacity' :'1.0'
},500,'easeOutBack',function(){
$(this).parent().find('ul').fadeIn(700);
});
$this.find('a:first,h2').addClass('active');
},
function () {
var $this = $(this);
$this.find('ul').fadeOut(500);
$this.find('img').stop().animate({
'width' :'52px',
'height' :'52px',
'top' :'0px',
'left' :'0px',
'opacity' :'0.1'
},5000,'easeOutBack');
$this.find('a:first,h2').removeClass('active');
}
);
});
</script>
<div id="horizon">
<div id="stuff">
<h2> Jewelry Gallery </h2><br>
<img src="jewelry/bracelet0.jpg" alt="My Jewelry" id="slideshow1"></img>
<div id="imgText"> </div>
<div id="chgImg">
<input type="button" id="prevLink" value="« Previous">
<input type="button" id="nextLink" value="Next »">
</div>
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<footer>
<a href="http://kiya-rose.deviantart.com/">
<img height="32" width="32" alt=" Deviantart" src="deviantart.png">
</a>
<a href="https://www.facebook.com/thinkjewelryy">
<img height="32" width="32" alt=" Think Jewelry Page" src="facebook.png">
</a>
Copyright© Brittany Rose
</footer>
</body>
</html>
Why "CaptionText" array has just one single item in it? In this case your slide index always will be "0".
var captionText = [
"Mostly bracelets right now",
];
Related
I'm learning event delegation, and I put the click event on the main parent, which is thumbnails. When I click on an image on the bottom, I want to set the src to the img class="main" src, but I noticed that when I click between the images, click anywhere else on the the thumbnails div, or press tab then enter I get null. I looked into it and found that my event.target is targeting the anchor tags, as well as the div class "thumbnails". I understand why, as I put the click event ON the thumbnails (parent), but is there a way I can only target the img tags?
Please no jQuery, I want to learn this using pure js, thanks!
function displaySelected() {
const getMainClass = document.querySelector('.main');
const getThumbnails = document.querySelector('.thumbnails');
getThumbnails.addEventListener('click', function(event) {
getMainClass.setAttribute('src', event.target.getAttribute('src'));
console.log(event.target);
});
}
displaySelected();
* {
box-sizing: border-box;
}
main {
min-width: 250px;
padding: 30px;
}
.hero {
height: 200px;
margin-bottom: 20px;
}
.hero img {
height: 100%
}
.thumbnail {
display: inline-block;
cursor: pointer;
height: 60px;
}
a.thumbnail:hover {
box-shadow: 5px 5px 5px gray;
}
.thumbnail img {
max-height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<main role="main">
<h1>Image Carousel</h1>
<div class="hero">
<img class="main" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat1.jpg" alt="An orange-eyed grey cat stretches toward the camera."/>
</div>
<div class="thumbnails">
<a class="thumbnail" href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat1.jpg" alt="An orange-eyed grey cat stretches toward the camera."/></a>
<a class="thumbnail" href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat2.jpg" alt="Closeup of a blue-eyed, grey cat with markings."/></a>
<a class="thumbnail" href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat3.jpg" alt="An orange cat licks its paw."/></a>
<a class="thumbnail" href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat4.jpg" alt="A content brown cat lounges with eyes closed."/></a>
</div>
</main>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
You are adding the event listener every time the function is called. You should only add the event listener once.
Check the tagName to see if the target is an IMG and if so, set the src, else do nothing
//Add the event listener once the DOM loads
const getThumbnails = document.querySelector('.thumbnails');
getThumbnails.addEventListener('click', function(event) {
displaySelected(event);
});
//Check if the event target has tagName of IMG
function displaySelected(event) {
if(event.target.tagName === "IMG"){
const getMainClass = document.querySelector('img.main');
getMainClass.src = event.target.getAttribute('src');
}
}
{
box-sizing: border-box;
}
main {
min-width: 250px;
padding: 30px;
}
.hero {
height: 200px;
margin-bottom: 20px;
}
.hero img {
height: 100%
}
.thumbnail {
display: inline-block;
cursor: pointer;
height: 60px;
}
a.thumbnail:hover {
box-shadow: 5px 5px 5px gray;
}
.thumbnail img {
max-height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<main role="main">
<h1>Image Carousel</h1>
<div class="hero">
<img class="main" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat1.jpg" alt="An orange-eyed grey cat stretches toward the camera."/>
</div>
<div class="thumbnails">
<a class="thumbnail" href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat1.jpg" alt="An orange-eyed grey cat stretches toward the camera."/></a>
<a class="thumbnail" href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat2.jpg" alt="Closeup of a blue-eyed, grey cat with markings."/></a>
<a class="thumbnail" href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat3.jpg" alt="An orange cat licks its paw."/></a>
<a class="thumbnail" href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat4.jpg" alt="A content brown cat lounges with eyes closed."/></a>
</div>
</main>
</body>
</html>
I've made a photo gallery by HTML and CSS. I want, when I'll click on in, my image will display in full size slowly in a box. But I don't know how can I make it. Can you help me to solve this? If possible, please give me full code. My code is:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> My gallery</title>
<style type="text/css">
.gallery {
border: 1px solid #000;
width: 160px;
}
.img_head {
border-bottom: 1px solid #000;
text-align: center;
}
img {
height: 150px;
width: 150px;
margin: 5px;
}
img:hover {
height: 158px;
width: 158px;
margin: 1px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="gallery">
<div class="img_head">
<h3>My Image</h3>
</div>
<img src="http://i.imgur.com/jnMGOR9.jpg?1" alt="image" />
</div>
</body>
</html>
Here is an example that might work for you:
jsFiddle Demo
HTML:
<div id="overlay" class="abs"></div>
<div id="lb" class="abs">
<div id="lbHead">
<div id="lbTitle">Your image</div><div id="lbX">X</div>
</div>
<div id="lbBody">
</div>
</div>
<div class="gallery">
<div class="img_head">
<h3>My Image</h3>
</div>
<img src="http://i.imgur.com/jnMGOR9.jpg?1" width="50" height="50" alt="image" />
</div>
js/jQuery:
$('img').click(function(){
var tmp = $(this).attr('src');
$('#lbBody').html('<img src="'+tmp+'" />');
$('#overlay, #lb').fadeIn(1800);
});
$('#lbX').click(function(){
$('#overlay, #lb').fadeOut(800);
});
CSS:
.abs {position:absolute}
#overlay{top:0;left:0;right:0;bottom:0;background:black;opacity:0.5;}
#lb{top:5%;left:3%;width:94%;height:50%;overflow:hidden;}
#lbHead{height:40px;width:100%;background:darkcyan;}
#lbTitle{float:left;width:70%;height:30px;color:white;}
#lbX{float:right;width:30px;height:30px;padding:10px;text-align:center;}
#lbX:hover{background:white;color:darkcyan;cursor:pointer;}
img:hover{cursor:pointer;}
#overlay, #lb{display:none;}
You can use these type of gallery
http://www.jqueryscript.net/demo/Responsive-Photo-Gallery-with-jQuery-and-Bootstrap-3/
https://blueimp.github.io/Bootstrap-Image-Gallery/
http://ironsummitmedia.github.io/startbootstrap-thumbnail-gallery/#
I've got a pretty specific question but it would be great if some of you can help me out. With a lot of help I was able to write a code which is able to change different GIFs randomly after they are played one time. This animation is happening to three different GIFs next to each other. The key to the change is a delay which is different for every GIF, depending on how long it is going. There's also a jquery transition animation between the change of GIFs.
HTML
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>GIF</title>
<link href="styles/styles.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
function swapImages(container){
var $active = $(container + ' .active');
if($(container + ' .active').next().length > 0) {
var $next = $(container + ' .active').next();
} else {
var $next = $(container + ' img:first');
}
/* FADE EFFECT */
$active.fadeOut(function(){
$active.removeClass('active');
$next.fadeIn().addClass('active');
});
/* WITHOUT FADE EFFECT */
//$active.removeClass('active');
//$next.addClass('active');
console.log( $($active).attr("data-delay") );
}
$(document).ready(function() {
setInterval('swapImages("#left")', $('#left .active').attr("data-delay") );
setInterval('swapImages("#middle")', $('#middle .active').attr("data-delay") );
setInterval('swapImages("#right")', $('#right .active').attr("data-delay") );
});
</script>
</head>
<body>
<div class="center">
<div class="item top" id="left">
<img id="wechsel1" src="bilder/1/1.gif" data-delay="3500" class="active" />
<img id="wechsel1" src="bilder/1/2.gif" data-delay="1400" />
<img id="wechsel1" src="bilder/1/3.gif" data-delay="4000" />
</div>
<div class="item" id="middle">
<img id="wechsel2" src="bilder/2/1.gif" data-delay="1800" class="active" />
<img id="wechsel2" src="bilder/2/2.gif" data-delay="1800" />
<img id="wechsel2" src="bilder/2/3.gif" data-delay="1800" />
</div>
<div class="item bottom" id="right">
<img id="wechsel3" src="bilder/3/1.gif" data-delay="4300" class="active" />
<img id="wechsel3" src="bilder/3/2.gif" data-delay="3100" />
<img id="wechsel3" src="bilder/3/3.gif" data-delay="4100" />
</div>
</div>
</body>
</html>
CSS
body {
background-color:black;
}
.center {
padding-top: 50px;
display: flex;
align-items: center;
justify-content: center;
}
.item {
width: 568px;
height: 800px;
max-width: 50%;
margin-left: 10px;
margin-right: 10px;
}
.top {
width: 568px;
height: 800px;
align-self: flex-start;
}
.bottom {
width: 568px;
height: 800px;
align-self: flex-end;
}
img {
display: none;
width: 100%;
}
img.active {
display:block;
}
Now there is only one problem left. Every once in a while (like every 5 minutes or so) three specific GIFs should be played next to each other. After that is over, everything should keep going like before (random GIFs playing).
I heard this should be possible through an overlay, or are there better alternatives? Can somebody please show me how this can be done if it's possible? I'm not that good in JS and I need a solution pretty soon...
I'm creating a web site to display products that I'm selling, and I'm struggling with the products page. I would like to have small images of each product, and be able to click them and then display the full products info in a separate div tag underneath the thumbnails.
I found a piece of code that I have used, and it works fine in Firefox, but in IE it doesn't display the thumbnail images and the links don't work.
I've spent 3 days googling and searching and I can't find a solution to this. I have attached my full code, please can some one point me in the right direction?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
Name : Seascape
Description: A two-column, fixed-width design with dark color scheme.
Version : 1.0
Released : 20131201
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vapes</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800" rel="stylesheet" />
<link href="defaultvape.css" rel="stylesheet" type="text/css" media="all" />
<link href="fonts.css" rel="stylesheet" type="text/css" media="all" />
<!--[if IE 6]><link href="default_ie6.css" rel="stylesheet" type="text/css" /><![endif]-->
<script type="text/javascript">
/***********************************************
* Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
page_request.open('GET', url, true)
page_request.send(null)
}
function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}
function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}
</script>
<style type="text/css">
#leftcolumn{
float: left;
width: auto;
height: auto;
border: 3px none black;
padding: 5px;
padding-left: 5px;
margin-left: 132px;
margin-top: -61px;
margin-right: 14px;
min-width: 1300px;
min-height: 300px;
}
#leftcolumn a{
padding: 3px 1px;
display: block;
width: 100%;
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid gray;
}
#leftcolumn a:hover{
background-color: #FFCC00;
}
#rightcolumn{
float: left;
width: 1200px;
min-height: 400px;
border: 3px solid black;
margin-left: 66px;
padding: 5px;
padding-bottom: 5px;
margin-top: 12px;
margin-bottom: 143px;
min-width: 1450px;
background-color: #FFFFFF;
}
* html #rightcolumn{ /*IE only style*/
height: 400px;
}
</style>
</head>
<body>
<div id="header-wrapper">
<div id="header" class="container">
<div id="logo">
<h1>Vape culture</h1>
</div>
<div id="menu">
<ul>
<li class="current_page_item">Home</li>
<li>Vapes</li>
<li>Juice</li>
<li>Accessories</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div id="featured">
<div id="leftcolumn">
<div id="Thumbnail1"><a href="javascript:ajaxpage('ItasteEP.html', 'rightcolumn');">
<img src="images/EP/thumbnail.png" width="230" height="170" alt=""/></a></div>
<div id="leothunb"><img src="images/LeoPro/leothumbnail.png" width="230" height="170" alt=""/></div>
<div id="VVthumb"><img src="images/VV/VVthumbnail.png" width="230" height="170" alt=""/></div>
<div id="MVDthumb"><img src="images/mvp/MVPthumbnail.png" width="230" height="170" alt=""/></div>
<div id="SVDthumb"><img src="images/sVd/sVdthumbnail.png" width="230" height="170" alt=""/></div>
<div id="VTRthumb"><img src="images/tvr/VTRthumbnail.png" width="230" height="170" alt=""/></div>
<div id="new134tag"><img src="images/134/134thumbnail.png" width="230" height="170" alt=""/></div>
<div id="coolfire1thumb"><img src="images/coolfire1/Coolfire1thumbnail.png" width="230" height="170" alt=""/></div>
<div id="Coolfire2thumb"><img src="images/coolfire2/Coolfire2thumbnail.png" width="230" height="170" alt=""/></div>
<div id="AIOthumb"><img src="images/aio/aoithumbnail.png" width="230" height="170" alt=""/></div>
</div>
<div id="rightcolumn"><h3><img src="InnokinHeaderV1.png" width="1450" height="400" alt=""/></h3>
</div>
<div style="clear: left; margin-bottom: 1em"></div>
</div>
<div id="banner-wrapper">
<div id="banner" class="container">
<div class="box-left">
<h2>Mauris vulputate dolor nibh</h2>
<span>Donec leo, vivamus fermentum praesent urna congue rutrum</span> </div>
<div class="box-right"> Etiam posuere</div>
</div>
</div>
<div id="copyright" class="container">
<p>Copyright (c) 2013 Sitename.com. All rights reserved. | Photos by Fotogrph | Design by FreeCSSTemplates.org.</p>
</div>
</body>
</html>
If you want to dynamically set the text in the #rightcolumn upon click, you can use jQuery.
First, include jQuery like:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Then, use .click event handler for each image to handle mouse clicks and load the text from specified HTML files.
For example, for the first div (#Thumbnail1):
Assing an id to the image like:
<img src="images/EP/thumbnail.png" width="230" height="170" alt="" id="img_1" />
Then, in area, define onclick handler as:
$( "#img_1" ).click(function() {
$('#rightcolumn').load('ItasteEP.html');
});
Repeat this step for all images.
I have used multiple jQuery in my page. Two of them are working fine.When I tried to integrate the galleria script, it says,
Error: $("ul.gallery_demo").galleria is not a function
The code is working for me separately. Here's the code.
Code:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="css/galleria.css" rel="stylesheet" type="text/css" media="screen">
<!--script type="text/javascript" src="js/jquery.min.js"></script-->
<script type="text/javascript" src="js/jquery.galleria.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.gallery_demo_unstyled').addClass('gallery_demo');
$('ul.gallery_demo').galleria({
history : true,
clickNext : true,
insert : '#main_image',
onImage : function(image,caption,thumb) {
image.css('display','none').fadeIn(1000);
caption.css('display','none').fadeIn(1000);
var _li = thumb.parents('li');
_li.siblings().children('img.selected').fadeTo(500,0.3);
thumb.fadeTo('fast',1).addClass('selected');
},
onThumb : function(thumb) {
var _li = thumb.parents('li');
var _fadeTo = _li.is('.active') ? '1' : '0.3';
thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);
thumb.hover(
function() { thumb.fadeTo('fast',1); },
function() { _li.not('.active').children('img').fadeTo('fast',0.3); }
)
}
});
});
</script>
<style type="text/css">
/* BEGIN DEMO STYLE */
*{margin:0;padding:0; }
h1,h2{font:bold 80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}
/*a{color:#348;text-decoration:none;outline:none;}
a:hover{color:#67a;}*/
a{color:#FFFFFF;text-decoration:none;outline:none;}
a:hover{color:#CCCCCC;}
.caption{color:#FFFFFF; font-weight:bold; width:700px; height:30px; float:left; padding-top:8px; clear:both; }
.demo{margin-top:2em; }
.gallery_demo{width:720px; float:left; padding-left:5px; }
/*.gallery_demo li{width:100px;height:100px;border:3px double #111; float:left;}*/
.gallery_demo li{width:100px;height:100px;border:3px double #eaeaea; float:left;}
.gallery_demo li div{left:0px;}
.gallery_demo li div .caption{font:italic 0.7em/1.4 georgia,serif; }
#main_image{height:480px;width:700px; float:left; }
#main_image img{ border:5px solid #666666; width:700px; height:438px; }
/*#nav{padding-top:15px;clear:both;font:80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}*/
#nav{padding-top:15px;clear:both;font:80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;color:#FFFFFF;}
.info{text-align:left;width:500px;margin:0px auto;border-top:1px dotted #221;}
.info p{margin-top:1.6em;}
</style>
</head>
<body>
<br>
<div style="float: left; padding-left: 40px; width: 720px;">
<div>
<p id="nav" align="center">« previous | next »</p>
</div>
<div class="demo">
<div id="main_image" align="center"></div>
<div style="width: 700px; float: left;">
<ul class="gallery_demo_unstyled gallery_demo galleria">
<li class="active"><img rel="images/image1.jpg" class="thumb selected" style="width: auto; height: 100px; margin-left: -17px; opacity: 1; display: inline;" src="images/image1.jpg" alt="SEAT COMFORTS" title="SEAT COMFORTS"></li>
<li class=""><img rel="images/image2.jpg" class="thumb" style="width: auto; height: 100px; margin-left: -17px; opacity: 0.3; display: inline;" src="images/image2.jpg" alt="BUS INNER VIEW" title="BUS INNER VIEW"></li>
<li class=""><img rel="gallery/image3.jpg" class="thumb" style="width: auto; height: 100px; margin-left: -17px; opacity: 0.3; display: inline;" src="images/image3.jpg" alt="Bus full View" title="Bus full View"></li>
<li class=""><img rel="images/image4.jpg" class="thumb" style="width: auto; height: 100px; margin-left: -17px; opacity: 0.3; display: inline;" src="images/image4.jpg" alt="BEGINNING" title="BEGINNING OF TIME"></li>
<li class=""><img rel="gallery/image5.jpg" class="thumb" style="width: auto; height: 100px; margin-left: -17px; opacity: 0.3; display: inline;" src="images/image5.jpg" alt="ECO" title="ECO AWARENESS"></li>
</ul>
</div>
</div>
<br><br>
</div>
<!--content_inner div ends here-->
<!--- body -->
</body>
</html>
When I tried to integrate it in a page it is not working which also consists of the following code.
Code:
<script type="text/javascript" src="gallery/jquery.js"></script>
<script type="text/javascript" src="gallery/jquery-easing-1.3.pack.js"></script>
<script type="text/javascript" src="gallery/jquery-easing-compatibility.1.2.pack.js"></script>
<script type="text/javascript" src="gallery/jquery.kwicks-1.5.1.pack.js"></script>
<script type="text/javascript" src="show.js"></script>
<!--[if IE]>
<script type="text/javascript">
$().ready(function() {
$(".jimgMenu ul").kwicks({max: 400, duration: 700, easing: "easeOutQuad"});
});
</script>
<![endif]-->
<script type="text/javascript">
$().ready(function() {
$('.jimgMenu ul').kwicks({max: 475, duration: 600, easing: 'easeOutQuad'});
});
</script>
I have tried using noconflict() function and used jQuery instead of $ but no use.
Could anyone be able to solve this pls.
Regards,
Rekha
Looks like you've commented out the <script> element that should be bring in jQuery, this:
<!--script type="text/javascript" src="js/jquery.min.js"></script-->
should be this:
<script type="text/javascript" src="js/jquery.min.js"></script>
You need jQuery loaded before jquery.galleria.js or it won't work.
Your second example includes jquery.js but not jquery.galleria.js so try adding this to the second one:
<script type="text/javascript" src="js/jquery.galleria.js"></script>
You'll have to adjust the src path to point to your jquery.galleria.js of course.
Have you included the plugin? I think you're missing that... It's not jQuery's core functionality.
this is it I think:
http://galleria.aino.se/
instead of $('ul.gallery_demo').galleria, try using jQuery('ul.gallery_demo').galleria.
If this works, it means that $ variable has been overridden by someone else. Try finding that out or put your document.ready function a closure:
(function($){
(document).ready(function(){
// your code here
});
})(jQuery)