[Proto-Scripty] How to highlight the current slide's number
I would like to ask a question in relation to Takashi's old MudCorp Image Gallery. I have implemented his gallery but would like to ask how I can further add functionality to it. www.mudcorporation.com/code/js/MudFadeGallery-2.2.1/ If you check the above page for the online gallery, you can click on: 1, 2, 3 to go to the direct slide. I want to know if you can highlight the current slide with its slide number? So for example, if Slide 2 will come in, the number 2 will be highlighted - by css or css styled into the .js file. Please help. -- You received this message because you are subscribed to the Google Groups Prototype script.aculo.us group. To post to this group, send email to prototype-scriptacul...@googlegroups.com. To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] Re: How to highlight the current slide's number
I found the onmouseclick actions and they appear as:
function setOnMouseClick() {
var elements = document.getElementsByTagName(a);
for (var i = 0; i elements.length; i++) {
switch(elements[i].className) {
case next:
elements[i].onclick = function() {
imgs.nextImg();
return false;
}
break;
case prev:
elements[i].onclick = function() {
imgs.prevImg();
return false;
}
break;
case s0:
elements[i].onclick = function() {
imgs.showImg(0);
return false;
$(this).style=font-weight:bold;
}
break;
Because they are a href's, I've also styled them with css. The 1, 2, 3
are all in a div. Does this conflict with the above? I hope I could
either choose to do font-weight: bold; or background-color: etc;
Mike
On Jan 6, 8:52 pm, Alex McAuley webmas...@thecarmarketplace.com
wrote:
You can check the source code as the href's have a click handler and add a
style to them or remove one ...
find the line that handles it and add $(this).style=
Alex Mcauleyhttp://www.thevacancymarket.com
- Original Message -
From: julien Devouassoud
To: prototype-scriptaculous@googlegroups.com
Sent: Wednesday, January 06, 2010 9:30 AM
Subject: Re: [Proto-Scripty] How to highlight the current slide's number
Well, for your 0,1,2,3 you have :
a class=s0 href=#0/a
just give an id to the element (ids are unique in a page, be carefull with
that or it can bug if you got duplicate ids)
a class=s0 href=# id=maLink_00/a
and you can change it's style with
$(maLink_+number).setStyle(.);
if you want to reset style of previously modified element, don't forget to
save the last changed id in a global variable (global vars ain't the best but
easy code):
var lastHighlight = ;
function HL(id){
$(lastHighlight).setStyle(); // set style @ null resets
style to waht it was previously i think
$(maLink_+id).setStyle(.);
}
2010/1/6 MH m.lawrencehu...@gmail.com
I would like to ask a question in relation to Takashi's old MudCorp
Image Gallery. I have implemented his gallery but would like to ask
how I can further add functionality to it.
www.mudcorporation.com/code/js/MudFadeGallery-2.2.1/
If you check the above page for the online gallery, you can click on:
1, 2, 3 to go to the direct slide. I want to know if you can highlight
the current slide with its slide number? So for example, if Slide 2
will come in, the number 2 will be highlighted - by css or css styled
into the .js file. Please help.
--
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to
prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group
athttp://groups.google.com/group/prototype-scriptaculous?hl=en.
--
--
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to
prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group
athttp://groups.google.com/group/prototype-scriptaculous?hl=en.
--
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] How to hyperlink images?
I am using the MudFadeGallery slideshow by a web-developer and I have
implemented it for my own use. However, as it functions as a fade
image gallery slideshow, how am I able to get each image to be
hyperlinked with a specific href address??
This is the main script that makes the gallery work:
http://www.mudcorporation.com/code/js/MudFadeGallery-2.2.1/_lib/js/mud_FadeGallery.js
AND the mouseclick events:
function init() {
setOnMouseClick();
// images gallery
// load images note: imgsGallery[].image isn't an array of images,
just strings to hold location
imgsGallery[0] = new Object();
imgsGallery[0].image = images/image_0.jpg;
imgsGallery[0].title = Title for first Image;
imgsGallery[0].caption = This is the first image...;
imgsGallery[1] = new Object();
imgsGallery[1].image = images/image_1.gif;
imgsGallery[1].title = Title for second Image;
imgsGallery[1].caption = This is the second image...;
imgsGallery[2] = new Object();
imgsGallery[2].image = images/image_2.gif;
imgsGallery[2].title = Title for third Image;
imgsGallery[2].caption = This is the third image...;
imgsGallery[3] = new Object();
imgsGallery[3].image = images/image_3.png;
imgsGallery[3].title = Title for fourth image;
imgsGallery[3].caption = This is the fourth image...;
var start = 0;
imgs = new MudFadeGallery('imgs', 'imgDisplay', imgsGallery,
{startNum: start, preload: true, autoplay: 2});
// set the initial captions
var title = (imgsGallery[0].title) ? imgsGallery[0].title : No
Title;
var caption = (imgsGallery[0].caption) ? imgsGallery[0].caption : No
caption;
$(imgDisplay_title).innerHTML = title;
$(imgDisplay_caption).innerHTML = caption;
$(imgDisplay_number).innerHTML = 1 of + imgsGallery.length +
projects;
$(imgDisplay).src = imgsGallery[start].image;
}
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Setting initial title and captions properly
I am currently implementing an image gallery which uses the Prototype
framework 1.4.0. The problem I am having is the first image (when
loaded) does not load its title and caption also. I have set the
gallery to preload = true.
Here is the script within my header.php:
var imgs0Slideshow = [];
var imgs0;
imgs0Slideshow[0] = {};
imgs0Slideshow[0].image = http://www.culturesinbetween.net/NEWWEBSITE/
wp-content/uploads/front-arnsdorfimg.jpg;
imgs0Slideshow[0].title = ARNSDORF - 'THE DAWN' AUTUMN/WINTER 2009;
imgs0Slideshow[0].caption = shshshshshsh;
imgs0Slideshow[1] = new Object();
imgs0Slideshow[1].image = http://www.culturesinbetween.net/NEWWEBSITE/
wp-content/uploads/front-arnsdorfimg.jpg;
imgs0Slideshow[1].title = Array;
imgs0Slideshow[1].caption = shshshshs;
imgs0Slideshow[2] = new Object();
imgs0Slideshow[2].image = http://www.culturesinbetween.net/NEWWEBSITE/
wp-content/uploads/front-arnsdorfimg.jpg;
imgs0Slideshow[2].title = Array;
imgs0Slideshow[2].caption = shshshsh;
var start = 0;
imgs0 = new MudFadeGallery('imgs0', 'imgDisplay0', imgs0Slideshow,
{startNum: start, preload: true, autoplay: 4});
var title = (imgs0Slideshow[0].title) ? imgs0Slideshow[0].title : No
Title;
var caption = (imgs0Slideshow[0].caption) ? imgs0Slideshow
[0].caption : No caption;
var title = (imgsGallery[0].title) ? imgsGallery[0].title : No
Title;
var caption = (imgsGallery[0].caption) ? imgsGallery[0].caption : No
caption;
$(imgDisplay_title).innerHTML = title;
$(imgDisplay_caption).innerHTML = caption;
$(imgDisplay_number).innerHTML = 1 of + imgsGallery.length +
projects;
$(imgDisplay).src = imgsGallery[start].image;
This is within an external js file (edited to relavant part):
// runs right before fade begins
onFadeStart: function() {
var title = ;
var caption = ;
$(this.id+_title).innerHTML = title ;
$(this.id+_caption).innerHTML = caption;
$(this.id+_number).innerHTML = (this.imgCurrent+1) + of +
this.imgTotal + Articles;
},
// runs right after fade completes
onFadeEnd: function() {
var title = (this.imgsArray[this.imgCurrent].title) ?
this.imgsArray
[this.imgCurrent].title : No Title;
var caption = (this.imgsArray[this.imgCurrent].caption) ?
this.imgsArray[this.imgCurrent].caption : No caption;
$(this.id+_title).innerHTML = title;
$(this.id+_caption).innerHTML = caption;
},
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
