|
JavaScript - Horizontal Thumbnail Photo Scroller
Hi Everyone,
I am unable to find a JavaScript picture viewer that does what I would like it to do. I have created a wrapper div of specific size for the images to be displayed in. I want the thumbnail images to be horizontally at the top of the div and the "clicked" full-size image to appear within the same div, directly below the row of thumbnails. When a visitor opens the page the first image must be loaded automatically without having to click on the thumbnail. Can anyone point me in a direction please? Anita, Cape Town. Similar Tutorialsi got my scroller to work on my website now. thumbnail scroll doesnt auto scroll down as its going through the image... how do i make scrollbar automatically move while its going through the highlighted thumbnail image... i hope didnt sound confusing at all but heres the link to my website html coding http://rusty813.comuv.com/sample2.html Hi I have a script that is driving me slightly crazy...I need to use different images as the thumbnails on this page. I want to use specified crops of the image rather than what is there now (the larger image squeezed down). Does anyone have any idea how I could do that? Thanks a million. http://www.annaleithauser.com/rosema...e/country.html Dear Experts, I am very new for javascript so I am not even sure it is possible or not. The situation is like this, I have a page, which is actually a photo gallery with a table having 3 rows. First row shows the full screen size pic. Second row displays the Caption of that image and third row shows thumbnail view of six different images and the previous and next button. this is the sample layout: <table> <tr> <td colspan=8> Full size image will be shown in this cell </td> </tr> <tr> <td colspan=8> Caption of the image will be displayed here </td> </tr> <tr> <td>Previous Button</td> <td>Pic1 thumbnail view</td><td>Pic2 thumbnail view</td><td>Pic3 thumbnail view</td> <td>Pic4 thumbnail view</td><td>Pic5 thumbnail view</td><td>Pic6 thumbnail view</td> <td>Next Button</td> </td> </tr> My requirement is whenever the user click on the thumbnail view, which is in the 3rd row, the corresponding full screen size pic should open in 1st row of the table. As my photo gallery should be having more than 6 pics, lets take 20 pics, I want to show only 6 thumbnails in 3rd row at a time. Whenever user press "Next" button the 3rd row having 6 thumbnails should show other 6 thumbnails and previous button should show previous 6 thumbnails. I have a guess that it can be done using arrays, but how????? I have no idea. So please if you have any guesses it will be nice if you can post the entire code here as I will not be in a position to work on the hints given by you. Thanks in advance. Charles Hello, Currently I'm looking at smooth scrolling Js scripts for thumb images which can be altered to accomodate needs. I found one here that has some desirable effects but has no navi buttons. Would it be sensible to alter and point the hovering mouse scroll function to buttons, or would it be a better idea to keep looking for exactly the right script? The 2 identical scrollers on this page are the look I want but these are flash; http://area.autodesk.com/ ps: I've no experience of Js but can pick things up pretty quickly. Hi I have a javascript scroller on my site which was added automatically by the web design progam Web Page Maker. It works well..... but..... does anybody know how to make the scrolling faster on mousedown. Its painfully slow at the moment. I dont know ANYTHING about javascripting really. heres the code: <div id="g_iFrame1div" style="position:absolute; left:68px; top:273px; z-index:29"> <table border="0" cellpadding="0" cellspacing="0" width=628> <tr><td> <iframe src="iframes/news_latest.htm" name="g_iFrame1" width="606" height="487" src="" scrolling="no" frameborder="0"></iframe> </td><td align="center" valign="middle" width="22"><img src="arrow_up.gif" alt="up" border=0 vspace="5" hspace="3" onMouseDown="esh_g_iFrame1();bsh_g_iFrame1(-3,2)" onMouseUp="esh_g_iFrame1();bsh_g_iFrame1(-1,20)" onMouseOver="bsh_g_iFrame1(-1,20)" onMouseOut="esh_g_iFrame1()"><br> <img src="arrow_down.gif" alt="down" border=0 vspace="5" hspace="3" onMouseDown="esh_g_iFrame1();bsh_g_iFrame1(3,2)" onMouseUp="esh_g_iFrame1();bsh_g_iFrame1(1,20)" onMouseOver="bsh_g_iFrame1(1,20)" onMouseOut="esh_g_iFrame1()"> <script type="text/javascript" language="javascript"> function bsh_g_iFrame1(step,time){hs_g_iFrame1=setInterval("sh_g_iFrame1("+step+")",time)} function esh_g_iFrame1(){clearInterval(hs_g_iFrame1)} function sh_g_iFrame1(step) { scrollx=g_iFrame1.document.body.scrollLeft scrolly=g_iFrame1.document.body.scrollTop scrolly=scrolly+step g_iFrame1.window.scroll(scrollx,scrolly) } </script> thanks Stuey I've got a code. I've listed it below. The only question I have which I am sure I'm just overlooking it, but I need to find a way to squeeze this to the top of the screen and to the left. Where can I modify this on this code? The first section is the whole file. Thanks! Edit: I'm trying to remove the awkward gap on top and to the left. I merged the .js file since this will only be a file that is updated with new news. Code: <html>
<head>
<script type="text/javascript">
/* Text and/or Image Crawler Script v1.5 (c)2009-2011 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
updated: 4/2011 for random order option, more (see below)
*/
/* Update 4/2011 to v1.5 - Adds optional random property. Set it to true to use.
Fixes browser crash from empty crawlers, ad and image blocking software/routines.
Fixes behavior in some IE of breaking script if an image is missing.
Adds alt attributes to images without them to aid in diagnosis of missing/corrupt
images. This may be disabled with the new optional noAddedAlt property set to true.
Internal workings enhanced for greater speed of execution, less memory usage.
*/
///////////////// No Need to Edit - Configuration is Done in the On Page Call(s) /////////////////
function marqueeInit(config){
if(!document.createElement) return;
marqueeInit.ar.push(config);
marqueeInit.run(config.uniqueid);
}
(function(){
if(!document.createElement) return;
marqueeInit.ar = [];
document.write('<style type="text/css">.marquee{white-space:nowrap;overflow:hidden;visibility:hidden;}' +
'#marq_kill_marg_bord{border:none!important;margin:0!important;}<\/style>');
var c = 0, tTRE = [/^\s*$/, /^\s*/, /\s*$/, /[^\/]+$/],
req1 = {'position': 'relative', 'overflow': 'hidden'}, defaultconfig = {
style: { //default style object for marquee containers without configured style
'margin': '0 auto'
},
direction: 'left',
inc: 2, //default speed - pixel increment for each iteration of a marquee's movement
mouse: 'pause' //default mouseover behavior ('pause' 'cursor driven' or false)
}, dash, ie = false, oldie = 0, ie5 = false, iever = 0;
/*@cc_on @*/
/*@if(@_jscript_version >= 5)
ie = true;
try{document.documentMode = 2000}catch(e){};
iever = Math.min(document.documentMode, navigator.appVersion.replace(/^.*MSIE (\d+\.\d+).*$/, '$1'));
if(iever < 6)
oldie = 1;
if(iever < 5.5){
Array.prototype.push = function(el){this[this.length] = el;};
ie5 = true;
dash = /(-(.))/;
String.prototype.encamel = function(s, m){
s = this;
while((m = dash.exec(s)))
s = s.replace(m[1], m[2].toUpperCase());
return s;
};
}
@end @*/
if(!ie5){
dash = /-(.)/g;
function toHump(a, b){return b.toUpperCase();};
String.prototype.encamel = function(){return this.replace(dash, toHump);};
}
if(ie && iever < 8){
marqueeInit.table = [];
window.attachEvent('onload', function(){
marqueeInit.OK = true;
for(var i = 0; i < marqueeInit.table.length; ++i)
marqueeInit.run(marqueeInit.table[i]);
});
}
function intable(el){
while((el = el.parentNode))
if(el.tagName && el.tagName.toLowerCase() === 'table')
return true;
return false;
};
marqueeInit.run = function(id){
if(ie && !marqueeInit.OK && iever < 8 && intable(document.getElementById(id))){
marqueeInit.table.push(id);
return;
}
if(!document.getElementById(id))
setTimeout(function(){marqueeInit.run(id);}, 300);
else
new Marq(c++, document.getElementById(id));
}
function trimTags(tag){
var r = [], i = 0, e;
while((e = tag.firstChild) && e.nodeType === 3 && tTRE[0].test(e.nodeValue))
tag.removeChild(e);
while((e = tag.lastChild) && e.nodeType === 3 && tTRE[0].test(e.nodeValue))
tag.removeChild(e);
if((e = tag.firstChild) && e.nodeType === 3)
e.nodeValue = e.nodeValue.replace(tTRE[1], '');
if((e = tag.lastChild) && e.nodeType === 3)
e.nodeValue = e.nodeValue.replace(tTRE[2], '');
while((e = tag.firstChild))
r[i++] = tag.removeChild(e);
return r;
}
function randthem(tag){
var els = oldie? tag.all : tag.getElementsByTagName('*'), i = els.length - 1, childels = [], newels = [];
for (i; i > -1; --i){
if(els[i].parentNode === tag){
childels.push(els[i]);
newels.push(els[i].cloneNode(true));
}
}
newels.sort(function(){return 0.5 - Math.random();});
i = childels.length - 1;
for (i; i > -1; --i){
tag.replaceChild(newels[i], childels[i]);
}
}
function Marq(c, tag){
var p, u, s, a, ims, ic, i, marqContent, cObj = this;
this.mq = marqueeInit.ar[c];
if(this.mq.random){
randthem(tag);
}
for (p in defaultconfig)
if((this.mq.hasOwnProperty && !this.mq.hasOwnProperty(p)) || (!this.mq.hasOwnProperty && !this.mq[p]))
this.mq[p] = defaultconfig[p];
this.mq.style.width = !this.mq.style.width || isNaN(parseInt(this.mq.style.width))? '100%' : this.mq.style.width;
if(!tag.getElementsByTagName('img')[0])
this.mq.style.height = !this.mq.style.height || isNaN(parseInt(this.mq.style.height))? tag.offsetHeight + 3 + 'px' : this.mq.style.height;
else
this.mq.style.height = !this.mq.style.height || isNaN(parseInt(this.mq.style.height))? 'auto' : this.mq.style.height;
u = this.mq.style.width.split(/\d/);
this.cw = this.mq.style.width? [parseInt(this.mq.style.width), u[u.length - 1]] : ['a'];
marqContent = trimTags(tag);
tag.className = tag.id = '';
tag.removeAttribute('class', 0);
tag.removeAttribute('id', 0);
if(ie)
tag.removeAttribute('className', 0);
tag.appendChild(tag.cloneNode(false));
tag.className = ['marquee', c].join('');
tag.style.overflow = 'hidden';
this.c = tag.firstChild;
this.c.appendChild(this.c.cloneNode(false));
this.c.style.visibility = 'hidden';
a = [[req1, this.c.style], [this.mq.style, this.c.style]];
for (i = a.length - 1; i > -1; --i)
for (p in a[i][0])
if((a[i][0].hasOwnProperty && a[i][0].hasOwnProperty(p)) || (!a[i][0].hasOwnProperty))
a[i][1][p.encamel()] = a[i][0][p];
this.m = this.c.firstChild;
if(this.mq.mouse === 'pause'){
this.c.onmouseover = function(){cObj.mq.stopped = true;};
this.c.onmouseout = function(){cObj.mq.stopped = false;};
}
this.m.style.position = 'absolute';
this.m.style.left = '-10000000px';
this.m.style.whiteSpace = 'nowrap';
if(ie5) this.c.firstChild.appendChild((this.m = document.createElement('nobr')));
if(!this.mq.noAddedSpace)
this.m.appendChild(document.createTextNode('\xa0'));
for(i = 0; marqContent[i]; ++i)
this.m.appendChild(marqContent[i]);
if(ie5) this.m = this.c.firstChild;
ims = this.m.getElementsByTagName('img');
if(ims.length){
for(ic = 0, i = 0; i < ims.length; ++i){
ims[i].style.display = 'inline';
if(!ims[i].alt && !this.mq.noAddedAlt){
ims[i].alt = (tTRE[3].exec(ims[i].src)) || ('Image #' + [i + 1]);
if(!ims[i].title){ims[i].title = '';}
}
ims[i].style.display = 'inline';
ims[i].style.verticalAlign = ims[i].style.verticalAlign || 'top';
if(typeof ims[i].complete === 'boolean' && ims[i].complete)
ic++;
else {
ims[i].onload = ims[i].onerror = function(){
if(++ic === ims.length)
cObj.setup(c);
};
}
if(ic === ims.length)
this.setup(c);
}
}
else this.setup(c)
}
Marq.prototype.setup = function(c){
if(this.mq.setup) return;
this.mq.setup = this;
var s, w, cObj = this, exit = 10000;
if(this.c.style.height === 'auto')
this.c.style.height = this.m.offsetHeight + 4 + 'px';
this.c.appendChild(this.m.cloneNode(true));
this.m = [this.m, this.m.nextSibling];
if(this.mq.mouse === 'cursor driven'){
this.r = this.mq.neutral || 16;
this.sinc = this.mq.inc;
this.c.onmousemove = function(e){cObj.mq.stopped = false; cObj.directspeed(e)};
if(this.mq.moveatleast){
this.mq.inc = this.mq.moveatleast;
if(this.mq.savedirection){
if(this.mq.savedirection === 'reverse'){
this.c.onmouseout = function(e){
if(cObj.contains(e)) return;
cObj.mq.inc = cObj.mq.moveatleast;
cObj.mq.direction = cObj.mq.direction === 'right'? 'left' : 'right';};
} else {
this.mq.savedirection = this.mq.direction;
this.c.onmouseout = function(e){
if(cObj.contains(e)) return;
cObj.mq.inc = cObj.mq.moveatleast;
cObj.mq.direction = cObj.mq.savedirection;};
}
} else
this.c.onmouseout = function(e){if(!cObj.contains(e)) cObj.mq.inc = cObj.mq.moveatleast;};
}
else
this.c.onmouseout = function(e){if(!cObj.contains(e)) cObj.slowdeath();};
}
this.w = this.m[0].offsetWidth;
this.m[0].style.left = 0;
this.c.id = 'marq_kill_marg_bord';
this.m[0].style.top = this.m[1].style.top = Math.floor((this.c.offsetHeight - this.m[0].offsetHeight) / 2 - oldie) + 'px';
this.c.id = '';
this.c.removeAttribute('id', 0);
this.m[1].style.left = this.w + 'px';
s = this.mq.moveatleast? Math.max(this.mq.moveatleast, this.sinc) : (this.sinc || this.mq.inc);
while(this.c.offsetWidth > this.w - s && --exit){
w = isNaN(this.cw[0])? this.w - s : --this.cw[0];
if(w < 1 || this.w < Math.max(1, s)){break;}
this.c.style.width = isNaN(this.cw[0])? this.w - s + 'px' : --this.cw[0] + this.cw[1];
}
this.c.style.visibility = 'visible';
this.runit();
}
Marq.prototype.slowdeath = function(){
var cObj = this;
if(this.mq.inc){
this.mq.inc -= 1;
this.timer = setTimeout(function(){cObj.slowdeath();}, 100);
}
}
Marq.prototype.runit = function(){
var cObj = this, d = this.mq.direction === 'right'? 1 : -1;
if(this.mq.stopped || this.mq.stopMarquee){
setTimeout(function(){cObj.runit();}, 300);
return;
}
if(this.mq.mouse != 'cursor driven')
this.mq.inc = Math.max(1, this.mq.inc);
if(d * parseInt(this.m[0].style.left) >= this.w)
this.m[0].style.left = parseInt(this.m[1].style.left) - d * this.w + 'px';
if(d * parseInt(this.m[1].style.left) >= this.w)
this.m[1].style.left = parseInt(this.m[0].style.left) - d * this.w + 'px';
this.m[0].style.left = parseInt(this.m[0].style.left) + d * this.mq.inc + 'px';
this.m[1].style.left = parseInt(this.m[1].style.left) + d * this.mq.inc + 'px';
setTimeout(function(){cObj.runit();}, 30 + (this.mq.addDelay || 0));
}
Marq.prototype.directspeed = function(e){
e = e || window.event;
if(this.timer) clearTimeout(this.timer);
var c = this.c, w = c.offsetWidth, l = c.offsetLeft, mp = (typeof e.pageX === 'number'?
e.pageX : e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft) - l,
lb = (w - this.r) / 2, rb = (w + this.r) / 2;
while((c = c.offsetParent)) mp -= c.offsetLeft;
this.mq.direction = mp > rb? 'left' : 'right';
this.mq.inc = Math.round((mp > rb? (mp - rb) : mp < lb? (lb - mp) : 0) / lb * this.sinc);
}
Marq.prototype.contains = function(e){
if(e && e.relatedTarget){var c = e.relatedTarget; if(c === this.c) return true;
while ((c = c.parentNode)) if(c === this.c) return true;}
return false;
}
function resize(){
for(var s, w, m, i = 0; i < marqueeInit.ar.length; ++i){
if(marqueeInit.ar[i] && marqueeInit.ar[i].setup){
m = marqueeInit.ar[i].setup;
s = m.mq.moveatleast? Math.max(m.mq.moveatleast, m.sinc) : (m.sinc || m.mq.inc);
m.c.style.width = m.mq.style.width;
m.cw[0] = m.cw.length > 1? parseInt(m.mq.style.width) : 'a';
while(m.c.offsetWidth > m.w - s){
w = isNaN(m.cw[0])? m.w - s : --m.cw[0];
if(w < 1){break;}
m.c.style.width = isNaN(m.cw[0])? m.w - s + 'px' : --m.cw[0] + m.cw[1];
}
}
}
}
if (window.addEventListener)
window.addEventListener('resize', resize, false);
else if (window.attachEvent)
window.attachEvent('onresize', resize);
})();
/* Text and/or Image Crawler Script v1.5 (c)2009-2011 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
updated: 4/2011 for random order option, more (see below)
*/
</script>
</head>
<body>
<font color="white" face="arial" size="2" background="#0066CC">
<div class="marquee" id="mycrawler" align="left">
2/21/12 Today is testing the marquee. This will be used for announcements. Stay tuned!!!                        
</div></font>
<script type="text/javascript">
marqueeInit({
uniqueid: 'mycrawler',
style: {
'padding': '1px',
'width': '1000px', //change to 1000 for normal, change to 0 for off
'background': '#0066CC',
'border': '0px solid black'
},
inc: 1, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'false', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 1,
neutral: 150,
savedirection: true
});
</script>
</body>
</html>
I am using a Theme Tester on my site so normal users can not see the changes being made. If you can help me, please send me a PM & I will give you a temporary login so you can login & see the new site, and the issue I am having. Basically, I am trying to get this http://flowplayer.org/tools/demos/sc.../navigator.htm scroller to work, but it is not happening at all. Not sure what is going on. Please advise. Thanks! Hi All, I am trying to introduce a vertical scroller to my site, I got the code from a tutorial and slightly tweaked the html to meet my needs but now the content doesn't scroll. Would someone be willing to take a quick look and see if they can spot anything? None of this code has been altered! Code: <script type="text/javascript">
$(document).ready(function(){
$(".newsticker-jcarousellite").jCarouselLite({
vertical: true,
hoverPause:true,
visible:10,
auto:500,
speed:1000
});
});
</script>
This is the HTML and PHP part: Code: <div id="newsticker-demo">
<div class="newsticker-jcarousellite">
<br/>
<?php
$query = mysql_query("SELECT * FROM employers WHERE featured = 'Yes' AND image != '' ORDER BY rand()");
$i=0;
//$query = mysql_query("SELECT * FROM employers WHERE f_emp_active = 'Yes' and image !='' ORDER BY rand()");
echo '<div>';
while ($aqm=mysql_fetch_array($query)){
?>
<div>
<div>
<div class="thumbnail">
<div align="center"><a href="company.php?companyname=<?php echo $string ?>">
<img src="<?=$fullurl?>/thumbnail.php?gd=2&src=employers/logo/big/<?=$aqm[image]?>&maxw=<?=$a18[width]?>" alt="<?=$aqm[companyname]?>" title="<?=$aqm[companyname]?>" class="noborder" /></a>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<br/>
<br/>
<?php
if($i==5){
echo '</div><div>';
}
$i++;
}
echo '</div>';
?>
</div>
</div>
Hey fellow coders. I've been searching for a script, but I'm coming up empty. The script will display products in a single row full screen left to right. To slide the products there is a pull bar. You can see how the exact script works on http://www.logitech.com/en-us/keyboards/keyboards. Does anybody know of a complete script, or at least one that is close enough to alter. Thanks much.
I need to make a very simple text scroller (either vertical or horizontal) using JavaScript. Can anyone point me in the right direction? Thank you Hello, i'm trying to post news on my site. so i was able to reached this http://www.shmtestforums.uphero.com/...ller/test.html but i couldn't get, exactly what i want. i really want is when load the page it should shows only 3 rows then after few seconds(say 2 seconds), the 1st row should disappear and bellow 3 rows should come up (eg. when google_1 row is disappear, google_2 & google_3 & google_4 rows should come up) this rotation should be continuous i tried this many. but no positive result. so please.... please....help me to solve this. this is the problematic java script, Code: <script type="text/javascript">
var scrollspeed=cache=1
var initialdelay=500
function initializeScroller(){
dataobj=document.all? document.all.datacontainer : document.getElementById("datacontainer")
dataobj.style.top="5px"
setTimeout("getdataheight()", initialdelay)
}
function getdataheight(){
thelength=dataobj.offsetHeight
if (thelength==0)
setTimeout("getdataheight()",10)
else
scrollDiv()
}
function scrollDiv(){
dataobj.style.top=parseInt(dataobj.style.top)-scrollspeed+"px"
if (parseInt(dataobj.style.top)<thelength*(-1))
dataobj.style.top="5px"
setTimeout("scrollDiv()",40)
}
if (window.addEventListener)
window.addEventListener("load", initializeScroller, false)
else if (window.attachEvent)
window.attachEvent("onload", initializeScroller)
else
window.onload=initializeScroller
</script>
thank you . I can't seem to find what I need but I know it exists. I trying to find a vertical scroller that will automatically have the text scroll upwards but have an arrow above and arrow below to be able to control the direction of the scrolling text, or a script with no arrows but still allow me to take control by mousing over the text to scroll up or down. Thanks Does anyone have a scroller that goes side to side, to display links for a website? I have a similar thing that goes up and down: www.sjwum.org This one will not adapt to side to side. So who knows of a scroller that moves horizontally and when you click on something it is a link to another page on the website? Thanks Hi, does anyone know how to make a very simple jQuery vertical carousel? without having to use the plugin...
Would anyone know why (and the fix) when I place my cursor over the scrolling thumbnails under the main slideshow rotator on my site they "disappear"? http://americanwebmakers.com/demo_college Thanks in advance! Is there a way to bounce my image scroller back to the left using object.watch() or something?! at the moment, it reaches the end and stops here is my code from www.dyn-web.com Code: /*************************************************************************
This code is from Dynamic Web Coding at www.dyn-web.com
Copyright 2001-4 by Sharon Paine
See Terms of Use at www.dyn-web.com/bus/terms.html
regarding conditions under which you may use this code.
This notice must be retained in the code as is!
*************************************************************************/
/* dw_hoverscroll.js version date: June 2004
mouseover scrolling for dw_scrollObj (in dw_scrollObj.js) */
dw_scrollObj.stopScroll = function(wnId) {
if ( dw_scrollObjs[wnId] ) dw_scrollObjs[wnId].endScroll();
}
// increase speed onmousedown of scroll links
dw_scrollObj.doubleSpeed = function(wnId) {
if ( dw_scrollObjs[wnId] ) dw_scrollObjs[wnId].speed *= 2;
}
dw_scrollObj.resetSpeed = function(wnId) {
if ( dw_scrollObjs[wnId] ) dw_scrollObjs[wnId].speed /= 2;
}
// algorithms for time-based scrolling and scrolling onmouseover at any angle adapted from youngpup.net
dw_scrollObj.initScroll = function(wnId, deg, sp) {
if ( dw_scrollObjs[wnId] ) {
var cosine, sine;
if (typeof deg == "string") {
switch (deg) {
case "up" : deg = 90; break;
case "down" : deg = 270; break;
case "left" : deg = 180; break;
case "right" : deg = 0; break;
default:
alert("Direction of scroll in mouseover scroll links should be 'up', 'down', 'left', 'right' or number: 0 to 360.");
}
}
deg = deg % 360;
if (deg % 90 == 0) {
cosine = (deg == 0)? -1: (deg == 180)? 1: 0;
sine = (deg == 90)? 1: (deg == 270)? -1: 0;
} else {
var angle = deg * Math.PI/180;
cosine = -Math.cos(angle); sine = Math.sin(angle);
}
dw_scrollObjs[wnId].fx = cosine / ( Math.abs(cosine) + Math.abs(sine) );
dw_scrollObjs[wnId].fy = sine / ( Math.abs(cosine) + Math.abs(sine) );
dw_scrollObjs[wnId].endX = (deg == 90 || deg == 270)? dw_scrollObjs[wnId].x:
(deg < 90 || deg > 270)? -dw_scrollObjs[wnId].maxX: 0;
dw_scrollObjs[wnId].endY = (deg == 0 || deg == 180)? dw_scrollObjs[wnId].y:
(deg < 180)? 0: -dw_scrollObjs[wnId].maxY;
dw_scrollObjs[wnId].startScroll(sp);
}
}
// speed (optional) to override default speed (set in dw_scrollObj.speed)
dw_scrollObj.prototype.startScroll = function(speed) {
if (!this.ready) return; if (this.timerId) clearInterval(this.timerId);
this.speed = speed || dw_scrollObj.speed;
this.lyr = document.getElementById(this.lyrId);
this.lastTime = ( new Date() ).getTime();
this.on_scroll_start();
this.timerId = setInterval(this.animString + ".scroll()", 10);
}
dw_scrollObj.prototype.scroll = function() {
var now = ( new Date() ).getTime();
var d = (now - this.lastTime)/1000 * this.speed;
if (d > 0) {
var x = this.x + this.fx * d; var y = this.y + this.fy * d;
if (this.fx == 0 || this.fy == 0) { // for horizontal or vertical scrolling
if ( ( this.fx == -1 && x > -this.maxX ) || ( this.fx == 1 && x < 0 ) ||
( this.fy == -1 && y > -this.maxY ) || ( this.fy == 1 && y < 0 ) ) {
this.lastTime = now;
this.shiftTo(this.lyr, x, y);
this.on_scroll(x, y);
} else {
clearInterval(this.timerId); this.timerId = 0;
this.shiftTo(this.lyr, this.endX, this.endY);
this.on_scroll_end(this.endX, this.endY);
}
} else { // for scrolling at an angle (stop when reach end on one axis)
if ( ( this.fx < 0 && x >= -this.maxX && this.fy < 0 && y >= -this.maxY ) ||
( this.fx > 0 && x <= 0 && this.fy > 0 && y <= 0 ) ||
( this.fx < 0 && x >= -this.maxX && this.fy > 0 && y <= 0 ) ||
( this.fx > 0 && x <= 0 && this.fy < 0 && y >= -this.maxY ) ) {
this.lastTime = now;
this.shiftTo(this.lyr, x, y);
this.on_scroll(x, y);
} else {
clearInterval(this.timerId); this.timerId = 0;
this.on_scroll_end(this.x, this.y);
}
}
}
}
dw_scrollObj.prototype.endScroll = function() {
if (!this.ready) return;
if (this.timerId) clearInterval(this.timerId);
this.timerId = 0; this.lyr = null;
}
dw_scrollObj.prototype.on_scroll = function() {}
dw_scrollObj.prototype.on_scroll_start = function() {}
dw_scrollObj.prototype.on_scroll_end = function() {}
I have a basic scroller list code, which works when I use it on a HTML page. However if I duplicate it and change the text, only one of the lists functions. I even tried to use a script from a free website online and duplicate that on the page and it still does not work twice. Could somebody help with this? Hello, I would like to take current page (which has virtualpaginate numbers below the images to advance through them) and instead of having numbers, to have thumbnails which will be across the bottom of the page (in the footer div)... I will have about 35-40 thumbnails and I'd like it so that the thumbnails correspond to the image that is displayed. I also would like to have the thumbnails be a "slider" type of script which allows the user to browse through the thumbnails by moving their mouse left-and-right The image in the center DIV (and its accompanying information) should be replaced OnClick, not on hover over the thumbnails. I haven't been able to find an example of this, but I was wondering if someone could point me in the correct direction to achieve this. Here is my current 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=utf-8" /> <title>Viviana Santamarina</title>
<style type="text/css"> html, body { background-color: #111; width: 1100px; margin-right: auto; margin-left: auto; margin-top: 50px; padding: 0px; border: 0px; }
p { color: white; font-family: arial; font-size: 18px; font-weight: bold;}
h1 { color: white; font-family: arial; font-size: 24px; font-weight: bold;}
h5 { color: white; font-family: arial; font-size: 16px;}
h6 { color: white; font-family: arial; font-size: 12px; margin-top: 0px;}
a { color: white; font-family: arial; font-size: 14px; font-weight: bold;}
#container { width: 1000px; margin: 0 0 0 20px; /* top right bottom left */ padding: 0; background-color: #111; }
#container #col1 { background: #000; height: 600px; width: 250px; float: left; }
#container #col2outer { width: 750px; float: right; margin: 0; padding: 0; }
#col2outer #col2mid { background: #000; height: 600px; width: 500px; float: left; }
#col2outer #col2side { background: #000; height: 600px; width: 250px; float: right; }
#col2outer #portfolio { background: #000; height: 450px; width: auto; float: center; }
#col2outer #pages { background: #000; height: 50px; width: 250px; float: bottom; margin: 20px; }
#container #footer { float: left; width: 870px; }
</style>
<link rel="stylesheet" type="text/css" href="css/tabs-accordion.css"/>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script src="js/jquery.tools.min.js"></script>
<script type="text/javascript" src="js/virtualpaginate.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<!-- is the accordian another script file that's missing from this list? -->
<!-- do the lightbox and accordian scripts need to be loaded in a certain order? -->
<script type="text/javascript">
$(function() {
$('#gallery a').lightBox(); // Select all links in object with gallery ID
$("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide', initialIndex: null});
});
</script>
</head>
<body>
<div id="container"> <h1>Viviana Santamarina - Paper Knitted Sculptures</h1>
<div id="col1" align="center">
<div id="accordion">
<h2><strong>ABOUT MY WORK </strong></h2>
<div class="pane" style="display:block" align="left">
<h6 align="left">
Turning humble tools like pencils into hooks and paper into strips allows me to leave graphite traces while the paper is being knitted, a deconstructed drawing of sorts.<br><br>
While the stitches grow, interdependence grows as well. The tension that both elements generate a structural and narrative balance by circling what it is and giving edge to the void. <br><br>
<a href="readmore.html">read more</a>
</h6>
</div>
<h2><strong>RECENT AWARDS</strong></h2>
<div class="pane" align="left">
<h6 align="left">
Turning humble tools like pencils into hooks and paper into strips allows me to leave graphite traces while the paper is being knitted, a deconstructed drawing of sorts.<br><br>
While the stitches grow, interdependence grows as well. The tension that both elements generate a structural and narrative balance by circling what it is and giving edge to the void. <br><br>
<a href="readmore.html">read more</a>
</h6>
</div>
<h2><strong>PREVIOUS EXHIBITIONS</strong></h2>
<div class="pane" align="center">
<p>
Gertrude Herbert
"A Sense of Place 2010"
Augusta, GA
September 17th - November 5th, 2010
http://www.ghia.org/
</p>
</div>
<h2><strong>CONTACT INFORMATION</strong></h2>
<div class="pane" align="center">
<h6 align="left">
Turning humble tools like pencils into hooks and paper into strips allows me to leave graphite traces while the paper is being knitted, a deconstructed drawing of sorts.<br><br>
While the stitches grow, interdependence grows as well. The tension that both elements generate a structural and narrative balance by circling what it is and giving edge to the void. <br><br>
<a href="readmore.html">read more</a>
</h6>
</div>
</div>
</div>
<div id="col2outer">
<div id="col2mid" align="center"> <p>PORTFOLIO</p>
<div id="portfolio">
<div class="virtualpage hidepiece">
<div id="gallery">
<a href="images/work/highres/EVA.jpg" title="Sitting Nude, 2010"><img src="images/work/EVA.jpg" class="img" border="0" /></a>
<h5>"Sitting Nude" 2010 <p></h5>
<h6>Medium: paper crochet<br>
Dimensions: 24" x 22" x 32"<br>
</h6>
</div>
</div>
<div class="virtualpage hidepiece">
<div id="gallery">
<a href="images/work/highres/Corset.jpg" title="Corset, 2009"><img src="images/work/Corset.jpg" class="img" border="0"/></a>
<h5>"Corset" 2009 <p></h5>
<h6>Medium: paper crochet<br>
Dimensions: 30" x 20" x 3"<br>
</h6>
</div>
</div>
<div class="virtualpage hidepiece">
<div id="gallery">
<a href="images/work/highres/Browsing2.jpg" title="Browsing 2, 2010"> <img src="images/work/Browsing2.jpg" class="img" border="0"/></a>
<h5>"Browsing 2" 2010 <p></h5>
<h6>Medium: paper crochet, book<br>
Dimensions: 8" x 11" x 10"<br>
</h6>
</div>
</div>
<div class="virtualpage hidepiece">
<div id="gallery">
<a href="images/work/highres/ShapingTheVoid.jpg" title="Shaping The Void, 2010"><img src="images/work/ShapingTheVoid.jpg" class="img" border="0"/></a>
<h5>"Shaping The Void" 2009 <p></h5>
<h6>Medium: paper crochet, pencils<br>
Dimensions: 22" x 14" x 14"<br>
</h6>
</div>
</div>
<div class="virtualpage hidepiece">
<a href="images/work/TandemRowingl.jpg" rel="lightbox"><img src="images/work/TandemRowing.jpg"></a>
</div>
</div>
<!-- Pagination DIV -->
<div id="pages">
<div id="gallerypaginate" class="paginationstyle">
<a href="#" rel="previous"><<</a>   <span class="flatview"></span>  <a href="#" rel="next" class="imglinks">>></a>
</div>
</div>
<!-- Initialize -->
<script type="text/javascript">
var gallery=new virtualpaginate({
piececlass: "virtualpage", //class of container for each piece of content
piececontainer: 'div', //container element type (ie: "div", "p" etc)
pieces_per_page: 1, //Pieces of content to show per page (1=1 piece, 2=2 pieces etc)
defaultpage: 0, //Default page selected (0=1st page, 1=2nd page etc). Persistence if enabled overrides this setting.
persist: false //Remember last viewed page and recall it when user returns within a browser session?
})
gallery.buildpagination(["gallerypaginate", "gallerypaginate2"])
</script>
</div>
<div id="col2side" align="center"> <p>UPCOMING SHOWS</p>
<h6 align="left">
Cherry Creek Art Festival<br>
Denver, CO<br>
July 2nd - 4th, 2011<br>
<a href="http://www.cherryarts.org" rel="nofollow" target="_blank">http://www.cherryarts.org/</a><br><br>
</h6>
</div>
</div>
<div id="footer"> <p>Viviana Santamarina - vivitus@gmail.com - 415-552-3078</p> </div> </div>
</body>
</html>
I'd appreciate any thoughts on how I can have the thumbnails in the footer DIV change the picture in the "portfolio" div just like my virtualpaginate numbers currently do. Thank you in advance!! Please see URL: http://caspca.org/indexticker.htm The ticker below the navbar works fine in FF and Safari, does not work in IE8 (and mostly likely other IE version as well). In IE, the live page will not even load; will load locally but the ticker doesn't work (remains static). Here is the .js: Code: TICKER_CONTENT = document.getElementById("TICKER").innerHTML;
TICKER_RIGHTTOLEFT = false;
TICKER_SPEED = 1;
TICKER_STYLE = "font-family:Arial; font-size:12px; color:#444444";
TICKER_PAUSED = false;
ticker_start();
function ticker_start() {
var tickerSupported = false;
TICKER_WIDTH = document.getElementById("TICKER").style.width;
var img = "<img src=ticker_space.gif width="+TICKER_WIDTH+" height=0>";
// Firefox
if (navigator.userAgent.indexOf("Firefox")!=-1 || navigator.userAgent.indexOf("Safari")!=-1) {
document.getElementById("TICKER").innerHTML = "<TABLE cellspacing='0' cellpadding='0' width='100%'><TR><TD nowrap='nowrap'>"+img+"<SPAN style='"+TICKER_STYLE+"' ID='TICKER_BODY' width='100%'> </SPAN>"+img+"</TD></TR></TABLE>";
tickerSupported = true;
}
// IE
if (navigator.userAgent.indexOf("MSIE")!=-1 && navigator.userAgent.indexOf("Opera")==-1) {
document.getElementById("TICKER").innerHTML = "<DIV nowrap='nowrap' style='width:100%;'>"+img+"<SPAN style='"+TICKER_STYLE+"' ID='TICKER_BODY' width='100%'></SPAN>"+img+"</DIV>";
tickerSupported = true;
}
if(!tickerSupported) document.getElementById("TICKER").outerHTML = ""; else {
document.getElementById("TICKER").scrollLeft = TICKER_RIGHTTOLEFT ? document.getElementById("TICKER").scrollWidth - document.getElementById("TICKER").offsetWidth : 0;
document.getElementById("TICKER_BODY").innerHTML = TICKER_CONTENT;
document.getElementById("TICKER").style.display="block";
TICKER_tick();
}
}
function TICKER_tick() {
if(!TICKER_PAUSED) document.getElementById("TICKER").scrollLeft += TICKER_SPEED * (TICKER_RIGHTTOLEFT ? -1 : 1);
if(TICKER_RIGHTTOLEFT && document.getElementById("TICKER").scrollLeft <= 0) document.getElementById("TICKER").scrollLeft = document.getElementById("TICKER").scrollWidth - document.getElementById("TICKER").offsetWidth;
if(!TICKER_RIGHTTOLEFT && document.getElementById("TICKER").scrollLeft >= document.getElementById("TICKER").scrollWidth - document.getElementById("TICKER").offsetWidth) document.getElementById("TICKER").scrollLeft = 0;
window.setTimeout("TICKER_tick()", 30);
Any help to fix is greatly appreciated. Thank you. John |
|||||||