|
JavaScript - Nivo Slider With Text
Following is my code on Nivo Slider plugin.
Code: <script type="text/javascript" language="javascript">
var jQuery = $.noConflict();
jQuery(window).load(function() {
jQuery('#slider').nivoSlider({
effect:'<?php if (($effect) <> "" ) { echo (($effect)); } else { echo 'random'; } ?>', //Specify sets like: 'random,fold,fade,sliceDown'
slices:<?php if (($slices) <> "" ) { echo (($slices)); } else { echo '15'; } ?>,
animSpeed:<?php if (($animspeed) <> "" ) { echo (($animspeed)); } else { echo '700'; } ?>,
pauseTime:<?php if (($pauseTime) <> "" ) { echo (($pauseTime)); } else { echo '3000'; } ?>,
startSlide:0, //Set starting Slide (0 index)
directionNav:true, //Next and Prev
directionNavHide:<?php if (($directionNavHide) <> "" ) { echo stripslashes(($fadin)); } else { echo 'false'; } ?>, //Only show on hover
controlNav:true, //1,2,3...
controlNavThumbs:false, //Use thumbnails for Control Nav
controlNavThumbsFromRel:false, //Use image rel for thumbs
controlNavThumbsSearch: '.jpg', //Replace this with...
controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
keyboardNav:true, //Use left and right arrows
pauseOnHover:true, //Stop animation while hovering
manualAdvance:false, //Force manual transitions
captionOpacity:0.8, //Universal caption opacity
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){} //Triggers after all slides have been shown
});
});
</script>
What i want to add is now text for each image dynamically. The problem is that everything is yet controlled from wordpress dashboard. So i cant just change and apply any other plugin as a lot effort has already been put into the plugin to apply all the css/js/php changes/implementations. The text would look like any normal jquery slider has: a black or white translucent overlay with text for each image. Any help? Similar TutorialsHi Guys, I'm developing a site (thenativedrum.com/charisbel) with the Nivo Slider. It works fine on Chrome and Firefox - but for some reason, when opened in IE7, the images fail to load. I'm sure this is a quick fix. I'm just stumped though! Does anyone know why this is happening? Thanks in advance Hey everyone im using nivo slider and I want to have 5 images instead of the general 4 it uses. However I have added my 5th image as the last on to be display. Once it has shown this image it doesn't loop back to the first image again. It loops to the 2nd one. Has anyone got any idea what I need to change so that it loops to the first slide again? Ive tried adding HTML captions to see if this is what it uses to see how many slides there is, ive tried editing the total slides from 0 to 4 & 5. But still no luck Heres the link to the slider : http://cp2.chunkychips.net/~arcsyste/index.php Thanks everyone Megan I'm using the Nivo slider (http://nivo.dev7studios.com/) for a banner with different thumbnails for the controls. After several hours of wrestling with the CSS, I was able to make it so each thumbnail could have its own style and hover. Now the JS doesn't work - meaning, the banner doesn't slide when I click any of the thumbnails. Can anyone help me out with this? I'm very much a beginner with JS. Here's my HTML: Code: <div id="slider" class="nivoSlider">
<img src="images/banner-1.jpg" alt="" />
<img src="images/banner-2.jpg" alt="" />
<img src="images/banner-3.jpg" alt="" />
<img src="images/banner-2.jpg" alt="" />
<span class="nivo-controlNav">
<a class="nivo-control smerch"> </a>
<a class="nivo-control gervais"> </a>
<a class="nivo-control karl"> </a>
<a class="nivo-control insects"> </a>
</span>
</div>
Here's my CSS: Code: /*============================*/
/*=== Custom Slider Styles ===*/
/*============================*/
#slider {
position:relative;
width:984px;
height:501px;
background:url(images/loading.gif) no-repeat 50% 50%;}
#slider img {
position:absolute;
top:0px;
left:0px;
display:none;}
#slider a {
border:0;
display:block;}
.nivo-controlNav {
position:absolute;
left:260px;
bottom:-42px;}
.nivo-controlNav a {
display:block;
width:99px;
height:67px;
border:0;
margin-right:3px;
float:left;}
.nivo-controlNav a.active {
background-position:0 -22px;}
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(images/arrows.png) no-repeat;
text-indent:-9999px;
border:0;}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;}
a.nivo-prevNav {
left:15px;}
.nivo-caption {
text-shadow:none;
font-family: Helvetica, Arial, sans-serif;}
.nivo-caption a {
color:#efe9d1;
text-decoration:underline;}
/*====================*/
/*=== Other Styles ===*/
/*====================*/
.clear {clear:both;}
#slider .nivo-controlNav {
position:absolute;
bottom:0; /* Put the nav below the slider */
left: 0;
width: 984px;}
#slider .nivo-controlNav img {
display:inline; /* Unhide the thumbnails */
height: 67px;
width: 99px;
position: relative;}
.nivo-control {
cursor:pointer;}
.nivo-controlNav a {position: absolute; bottom: -122px;}
.smerch {right: 38px; background: url(images/mn-thumb-1.png) top left no-repeat;}
.smerch:hover{background: url(images/mn-thumb-1-over.png) top left no-repeat;}
.gervais {right: 134px; background: url(images/mn-thumb-2.png) top left no-repeat;}
.gervais:hover{background: url(images/mn-thumb-2-over.png) top left no-repeat;}
.karl {right: 238px; background: url(images/mn-thumb-3.png) top left no-repeat;}
.karl:hover{background: url(images/mn-thumb-3-over.png) top left no-repeat;}
.insects {right: 342px; background: url(images/mn-thumb-4.png) top left no-repeat;}
.insects:hover{background: url(images/mn-thumb-4-over.png) top left no-repeat;}
Not sure if this is needed, but here's the section of the JS for the controls: Code: //Add Control nav
if(settings.controlNav){
var nivoControl = $('<div class="nivo-controlNav"></div>');
slider.append(nivoControl);
for(var i = 0; i < kids.length; i++){
if(settings.controlNavThumbs){
var child = kids.eq(i);
if(!child.is('img')){
child = child.find('img:first');
}
if (settings.controlNavThumbsFromRel) {
nivoControl.append('<a class="nivo-control" rel="'+ i +'"><img src="'+ child.attr('rel') + '" alt="" /></a>');
} else {
nivoControl.append('<a class="nivo-control" rel="'+ i +'"><img src="'+ child.attr('src').replace(settings.controlNavThumbsSearch, settings.controlNavThumbsReplace) +'" alt="" /></a>');
}
} else {
nivoControl.append('<a class="nivo-control" rel="'+ i +'">'+ (i + 1) +'</a>');
}
}
I'm at a loss. Any help would be great. Thanks. Here's a quick visual of the parts of the slider: http://i.imgur.com/tkE2Y.png I am using a JQuery Slider function in one of my forms that has the folowing code: Code: <script>
$(function() {
$( "#slider" ).slider({
value:100,
min: 0,
max: 100,
step: 1,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value + "% Clear" );
}
});
$( "#amount" ).val( $( "#slider" ).slider( "value" ) + "% Clear" );
});
</script>
And the form looks like: Code: <form method=POST etc...>
<div id="slider"></div>
<span><input type="text" id="amount" name="Percentage" style="border:0; color:#f6931f; font-weight:bold;" /></span>
</form>
Now, in the php, I have an error system set up, so that if one of the items in the form are left blank etc., an error will generate without posting the form. However, I am using <?php echo ?> in the form to repopulate the fields that were entered, so user does not have to fill them again. However, the slider always resets back to 100%... How can I fix this so that if the form does not POST, the slider will keep the value that the user set it at. Is this possible, I am having trouble figuring it out. Thanks! Hi All, Hoping somebody can help me with my implementation of the Nivo Slideshow on my website... I've been at it for a couple of days now and I'm just about ready to give up ( Here's my markup: Code: <div id="slider">
<img src="/images/Slide1.png" alt="" title="Dead Kool"/>
<a href="http://dev7studios.com"><img src="/images/Slide2.png" alt="" title="Alex Kidd" /></a>
<img src="/images/Slide3.png" alt="" title="Asteroids" />
</div>
My CSS: Code: #slider {
position:relative;
width:620px;
height:350px;
background-image:url(../images/title.gif);
background-position:-10px 30px;
background-repeat:no-repeat;
background-attachment:fixed;
}
#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
#slider a {
border:0;
display:block;
}
.nivo-controlNav {
position:absolute;
left:260px;
bottom:-42px;
}
.nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(images/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
.nivo-controlNav a.active {
background-position:0 -22px;
}
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(images/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
a.nivo-prevNav {
left:15px;
}
.nivo-caption {
font-family:"Lucida Sans Unicode", "Lucida Grande";
}
.nivo-caption a {
color:#f71cac;
text-decoration:underline;
}
Slider CSS: Code: /*
* jQuery Nivo Slider v2.3
* http://nivo.dev7studios.com
*
* Copyright 2010, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* March 2010
*/
/* The Nivo Slider styles */
.nivoSlider {
position:relative;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:60;
display:none;
}
/* The slices in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:50;
height:100%;
}
/* Caption styles */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
opacity:0.8; /* Overridden by captionOpacity setting */
width:100%;
z-index:89;
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline;
}
.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:99;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
position:relative;
z-index:99;
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
The test site is here http://www.koolkiddclothing.com/Test I feel like I'm being dumb, but for some reason I just can't get it to work, so any help is good help... I am looking for a slider. Can anybody help me? This is the design of the slider. ANy programmer can help me to insert this slider script into my website? http://sorgalla.com/projects/jcarous..._vertical.html im using interspire shopping cart. advance thanks Hi there, There appears to be some sort of distortion issue with the slider on my client's website. The website is www.tranzaura.com and for some reason some of the slides on the home page appear distorted when viewed in some browsers. See attached image. Can you please check the website on your computer and please let me know if there is distortion. I'd appreciate if you could vote in the poll. Note that there are 9 slides. You can scroll through them if you wish. I have no idea why this is happening. Any thoughts or advice would be appreciated. Thank you I use offshore coding service, which failed with superior PSD to WP conversion with basic JS Slider. I know the task is complex, but do not want to hire superficial coders any more. What software can completely replace freelancers to create excellent JS Slider on WordPress engine?
I'm trying to make a div slider go left to right. In as much detail this is what I would like: -The div to be hidden on first page load -Have the div slide left to right AND BACK by the click of an image NOT a button -When the image (of a right arrow) is clicked, let the arrow slide out with the div (and IF possible when div is fully extended have image of a left arrow enabling a slide back and vice-versa) Here's what I got so far. (Don't need to use) Code: <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="TestSite/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slideleft button').click(function() {
var $lefty = $(this).next();
$lefty.animate({
left: parseInt($lefty.css('left'),10) == 0 ?
-$lefty.outerWidth() :
0
});
});
});
</script>
<style>
.slide {
position: relative;
overflow: hidden;
height: 120px;
width: 350px;
margin: 1em 0;
background-color: #FFF;
border: 1px solid #999;
}
.slide .inner {
position: absolute;
left: 0;
bottom: 0;
width: 338px;
height: 36px;
padding: 6px;
background-color: #F00;
color: #333;
}
.slide button {
margin: .7em 0 0 .7em;
}
.js #slidebottom .inner {
display: none;
}
</style>
</head>
<div id="slideleft" class="slide">
<button><img src="TestSite/js/fancy_nav_right.png" /></button>
<div class="inner">Slide from bottom</div>
</div>
<body>
</body>
</html>
I would like to change the variable of an object with a slider. For example, I have an object with variable zoom, how would I add a slider function to the script to change this variable? I am a little confused about event handling. Any help would be much appreciated. I am posting the code (which actually was done by one of this forum's members) in case it may make understanding/explanation simpler. 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" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.tstparent {
position:relative;overflow:hidden;left:50px;top:50px;width:800px;height:500px;border:solid red 1px;
}
#tst {
position:relative;left:0px;top:0px;width:700px;height:500px;
}
.window {
width:200px;height:150px;border:solid white 2px;
}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
// Zoom Image (28-August-2011)
// by Vic Phillips http://www.vicsjavascripts.org.uk/
function zxcZoomImage(o){
var img = document.getElementById(o.ID);
var obj = img.parentNode;
var window = document.createElement('DIV');
var zimg = document.createElement('IMG');
var src = o.ZoomSRC;
var zoom = o.Zoom;
zoom = typeof(zoom)=='number'?zoom:2;
var os=o.ZoomWindowOffset;
window.style.position = 'absolute';
window.style.overflow = 'hidden';
window.style.visibility = 'hidden';
window.style.zIndex= '2' ;
window.className = o.WindowClassName;
zimg.style.position = 'absolute';
zimg.style.width = img.width*zoom+'px';
zimg.style.height = img.height*zoom+'px';
zimg.src = typeof(src)=='string'?src:img.src;
window.appendChild(zimg);
obj.appendChild(window);
this.window = window;
this.zimg = zimg;
this.wh = [obj.offsetWidth,obj.offsetHeight];
this.zoom = zoom;
this.os = typeof(os)=='object'&& os.constructor==Array && typeof(os[0])=='number'&& typeof(os[1])=='number'?os:[-window.offsetWidth/2,-window.offsetHeight/2];
this.wos = [-(zoom-1)*window.offsetWidth/2,-(zoom-1)*window.offsetHeight/2]; // to center the zoom on the pointer
this.addevt(document,'mousemove','imgzoom',obj);
}
zxcZoomImage.prototype={
imgzoom:function(e,obj){
var mse=this.mse(e);
var pos=this.pos(obj);
var x=mse[0]-pos[0];
var y=mse[1]-pos[1];
var wh=this.wh;
var os=this.os;
var wos=this.wos;
var window=this.window;
var zimg=this.zimg;
var zoom=this.zoom;
if (x>0&&x<wh[0]&&y>0&&y<wh[1]){
x+=os[0];
y+=os[1];
window.style.left=x+'px';
window.style.top=y+'px';
zimg.style.left=-x*zoom+wos[0]+'px';
zimg.style.top=-y*zoom+wos[1]+'px';
window.style.visibility='visible';
}
else {
window.style.visibility='hidden';
}
},
mse:function(e){
if (window.event){
var docs=[document.body.scrollLeft,document.body.scrollTop];
if (!document.body.scrollTop){
docs=[document.documentElement.scrollLeft,document.documentElement.scrollTop];
}
return [e.clientX+docs[0],e.clientY+docs[1]];
}
return [e.pageX,e.pageY];
},
pos:function(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
},
addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener)
o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
else if
(o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
}
} // end of prototype declarations
/*]]>*/
</script>
<script type="text/javascript">
/*<![CDATA[*/
function Init(){
new zxcZoomImage({
ID:'tst', // the unique ID name of the image to zoom. (string)
WindowClassName:'window', // the class name of the zoom window DIV element. (string)
Zoom:4, //(optional) the zoom factor. (number, default = 2)
ZoomSRC:'scia_no2_trop_2009.gif', //(optional) the file path and name of the zoom image.
//... (string, default = the src of the image to zoom)
ZoomWindowOffset:[-100,-75] //(optional) the zoom window x and y offsets from the mouse position.
//... (array, default = centered on the mouse position)
});
}
if (window.addEventListener){
window.addEventListener('load',Init, false);
}
else if (window.attachEvent){
window.attachEvent('onload',Init);
}
/*]]>*/
</script>
</head>
<body>
<noscript>
<!-- <meta http-equiv="refresh" content="0;url=index2.htm;" /> -->
<b>Your browser does not support JavaScript or it is disabled. <br>
Please enable JavaScript to be able to zoom the map. </b>
</noscript>
<div class="tstparent" >
<img id="tst" src="scia_no2_trop_2009.gif" alt="img" />
</div>
</body>
</html>
I made a sliding drop down menu and I am having a couple issues. #1) The image that i use as a separator in my nav bar slides down with the slide menu, I would like to try and make that stay in place without sliding with the drop down and sliding back up with the collapse. #2) The very top line in every drop down is not aligning correctly. After the first line the rest of the <li> content below it aligns just fine to the left. Is there something with the very top line of a drop down menu that needs its own styling? Any help is appreciated. I have a question, How do you create a slider for a website? I am not familiar with anything but html and css, but I would like to create a simple image slider for my site. How would I go about doing that? Any help is appreciated Thanks HI every one I'm looking for a numeric slider , some thing that I define the min and max numbers . the attached file is something that I want . Any suggest ? thanks Hi i am very new to javascript. i want the slider type effect where i can show some images. Please see here in this site www.indiabazaaronline.com i want this kind of slider effect. Plzz any body help me. Thx in advance Hello, Need some help with a slider, In our website we are to display a list of places in a city and show them on the home page using a slider so that users can scroll through the list of places using right or left button in a bunch of 5 places at a time something like this ----Prev Place1 Place2 Place3 Place4 Place5 Next --- when the user clicks on Next it should go to the next set of 5 places. this sounds simple and i have coded it myself using ajax with php and also implemented this with many of the online js scripts available for scrollers. but somehow either the code is too heavy due to jquery js inclusion or not able to retain the selected place in the home page. Another requirement that i coded was that if a place is selected in the second bunch of 5 places then when i come back to the home page the slider must display the second bunch of 5 places with the selected place no basically using the $_GET /$_SESSION(which resets every time a new place is selcted) need some help guys!. as i am fairly good at use of php and ajax, but js burns my fingers Thanks a tonne for stopping by... Jay Hey What do I need to do, for this to work both ways without all the bugs? http://kaspernordkvist.dk/slider/ Thanks Hi All members i need helping in creating content slider look like this; http://wpclassipress.com/demo/ note; I ask for creating slider look like this (Thumbnail imge and Title under it) plz any tips to do that, My new WP site depends on this part...plz help Hi. I'm trying to make a news slider for a website in js. This is what I currently have: Code: <script type="text/javascript">
var refresh = setInterval("refresh()", 5000);
function refresh()
{
$('#top_news').load('top_ten.php').fadeIn("slow");
}
</script>
The id #top_news is an empty div, in which the news are shown, and the file top_ten.php gets top 10 news from the database, and outputs a random one. The script is working fine, but what I want is, for news to slide in and when a new article slides in, the old one slides out. It would be even better, if there is an excistant script, for news or divs (a small image and text). ALSO, when I refresh/load the site, it takes the time from setInterval, to load the news. Thanks I would like to make a Coda Slider for my blog website, Natalie's World http://natalie-nataliesworld.blogspot.com/ and I would like it right below the nav menu bar. But I am unsure of where how to go abouts making it and where to put it in the template and everything. Can somebody help me? Here is one I want to make, http://sixrevisions.com/tutorials/ja...-using-jquery/ Or something like this 1, http://thenewreview.net/ |
|||||||