trying to specify jQuery REL in load images code

[auntnini]

Cannot figure out how to assign jQuery REL="classWhatever" via CSS for .thumbs img { whatever } as a "contextual" group. Thus wondered if the following generic code for "thumbnail roll-over" to display large image could somehow be adapted to add relevant REL="__" to images.

<script language="JavaScript" type="text/javascript">
//LARGE IMAGES 
pic01=new Image pic01.src = "images/img01.jpg"
pic02=new Image pic02.src = "images/img02.jpg"

//THUMBNAILS
pic01a = new Image pic01a.src = "images/img01a.gif"
pic02a = new Image pic02a.src = "images/img02a.gif"
</script>

<div id="showpics">
<div id="space"> <!--LARGE HOLDER IMAGE -->
<img src="joe11s.jpg" name="holder" id="holder" alt="Holder" class="Holder"> 
</div><!--closeSPACE-->

<div id="thumbs">
<!-- genericROLL <a href="#" target="space" onMouseOver="document.holder.src=pic01.src">
<img class="thumb" src="images/pic01.gif" alt="pic01"></a> -->

<a href="#nogo" onclick="javascript:loadpage('__.jpg')" 
onMouseOver="document.holder.src=pic01.src; document.getElementById('text').innerHTML='__.jpg fashion'" title="__.jpg fashion">
<img src="__.jpg" name="1" alt="__ fashion" title="__ fashion"></a> 

<a href="#nogo" onclick="javascript:loadpage('__.jpg')" 
onMouseOver="document.holder.src=pic02.src; document.getElementById('text').innerHTML='__.jpg fashion'" title="__ fashion"> 
<img src="__.jpg" name="2" alt="__ fashion" title="__ fashion"></a> 

</div><!--closeTHUMBS-->
</div><!--closeSHOWPICS-->

A long time ago saw something like
pic01=newImage.src = <img src="__.jpg" width="_" height="__">
but cannot remember exactly. So I wonder if this sort of approach or some such could be used to assign
pic01=newImage.src = <img src="__.jpg" REL="fancybox"> to images.

[jscheuer1]

There is no jQuery REL. The rel is an attribute of links (anchor link a tags and link tags). Although popular for use in scripts, both jQuery based ones and others, that's not really a valid use of the rel attribute. It's for designating a related link or the type of link, and only certain types are technically allowed. Almost none of the javascript uses of the rel attribute are technically valid.

Also, this pseudo code:

pic01=newImage.src = <img src="__.jpg" width="_" height="__">

pic01=newImage.src = <img src="__.jpg" REL="fancybox">

is invalid both as javascript and as HTML, so I've little clue as to what it's trying to do.

So the question is unclear to me. Are you trying to write something like:

http://www.dynamicdrive.com/dynamici...thumbnail2.htm

or:

http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm

or are you just trying to do something creative with FancyBox like launch a box from javascript or create links on the page that will be fully functional FancyBox links? Or do you have something else in mind?

[auntnini]

BAD ME! Tt was a bad idea. Yes, REL is an attribute that cannot be "styled" contextually with CSS. [?] Re-read your post cited below.

Have to update "rollOver" sites and am just beginning to explore jQuery and FancyBox. It seemed REL="_____" had to be individually specified for each image.
I was grasping for a way to "group" such specification.

FROM http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm
<a href="http://www.nasa.gov/images/content/167040main_image_feature_738_ys_4.jpg" rel="enlargeimage" rev="targetdiv:loadarea" title="The Universe is just waiting to be explored">Saturn #1</a><br />

<a href="http://www.nasa.gov/images/content/168177main_image_feature_749_ys_4.jpg" rel="enlargeimage" rev="targetdiv:loadarea,link:http://dynamicdrive.com">The Moon #1</a><br />

FROM http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm
<p><a href="http://img184.imageshack.us/img184/1159/castleyi6.gif" rel="thumbnail" title=" beautiful castle!">Castle</a></p>

<p><a href="http://img201.imageshack.us/img201/6923/countryxb6.gif"" rel="thumbnail"><img src="thumbnail.gif" style="width: 50px; height: 50px" /></a></p>

Need to re-read your post http://www.dynamicdrive.com/forums/s...ad.php?t=66939

You can use FancyBox to init an entire div or entire divs full of images without having to tag each one. Here's a basic working demo of the concept that can be run from the root folder of the demo package:

<script type="text/javascript">
/*http://www.dynamicdrive.com/forums/s....php?t=66939*/
jQuery(function($){
$(".group1 a").attr('rel', 'group1').fancybox({});
});
</script>

Then tried the following at http://artdemo.tripod.com/illustration/indexFB.html, which did not work And could not figure our where to change ID to Class. Have to do some more jQuery "homework." [Error message: The requested content cannot be loaded. Please try again later.]

<div id="thumbs" class="group1">
<a rel="group1" href="../sketch/head.jpg"><img src="../sketch/head.jpg" alt="head"></a>
<a rel="group1" href="../sketch/IL143.jpg"><img src="../sketch/IL143.jpg" alt="" /></a>
\
</div>

The DynamicDrive examples you referenced are great. I tried the second at http://www.auntnini.com/ddScripts/magnifier.html, but a more simplified rollover script suits me better (don't need fade transition and it seems jQuery scripts need to be CLICKED).

ERROR: Should have had (parentheses) in var pic01= new Image(); which could include (width, height) = new Image(200, 300);

Was not thinking straight about REL being a LINK attribute and was confusing it with an IMAGE attribute. What I was trying to recall was old 2003 SionStudios script that entailed IE <marquee> tag,< iLayer> and <layer> and went something like

var slider = new Array(); var fimalSlide=' ';
slider[0]= "<image src='___.jpg'>"
slider[1]= "<image src='___.jpg'>"

Probably should delete this whole thread.

[jscheuer1]

Well, with FancyBox (1.3.4 - might not be true of the version you're using, read its documentation*), a group is triggered if all of the anchor link a tags in it have the same rel attribute. So that's all you have to do. You can either hard code it or have jQuery add it before initializing to FancyBox. I did:

jQuery(function($){
	$(".group1 a").attr('rel', 'group1').fancybox({});
});

That says all a tags in an element (in this case I think it was a division) with the class of group1 are to be given the rel attribute of group1, then initialized to fancybox(). So in markup like:

<div class="group1">
<a href="whatever" . . .
<a href="whatever" . . .
<a href="whatever" . . .
<a href="whatever" . . .
</div>

all the a tags will all be initialized to fancybox() as rel="group1".

You could do it as id:

jQuery(function($){
	$("#group1 a").attr('rel', 'group1').fancybox({});
});

<div id="group1">
<a href="whatever" . . .
<a href="whatever" . . .
<a href="whatever" . . .
<a href="whatever" . . .
</div>

*From markup on your tripod page it looks like the version of FancyBox you're using might key off of the data-fancybox-group attribute to determine if a collection of a tags constitutes a FancyBox grouped gallery. If so, substitute 'data-fancybox-group' for 'rel' in the above code.

[auntnini]

Have re-read previously posted instructions and documentation, but cannot quite grasp it all. Must do some more homework.

Still struggling with this. Like look of thumbnails and one large image "holder," but do not like look of a bunch of large images just sitting on page (e.g., http://www.williamlow.com/gallery/#!lightbox[43]/7/ used to use rollOver thumbs) and want to avoid CLICK instead of rollOver. Being able to initiate FancyBox seems to be a possible solution to adapting site for Mobile Devices.

"My only trick" is this -- simple rollOver thumbs. *When trying to implement jQuery FancyBox, roll-over ability is lost. * Therefore want to apply FancyBox REL only *to large images that replace "holder" in <div id="space"> [as they replace "holder"] and not to thumbnails. A year or so ago, a wonderful illustrator posted a link to his site, wherein it seemed that clicking large image "holder" initiated LightBox ... so cannot get this idea out of my head

<script language="JavaScript" type="text/javascript"> 
//LARGE IMAGES 
pic01 = new Image() ;  * *   pic01.src = "73LightsAlongPath.jpg" ; 
pic02 = new Image() ;     * *  pic02.src = "c_06.jpg" ;
pic03 = new Image() ;   * *    pic03.src = "74VokiChildMyth.jpg" ;
pic04 = new Image() ;    * *    pic04.src = "c_02.jpg" ; 
//THUMBNAILS 
pic01a = new Image() ;   *    pic01a.src = "73LightsAlongPath.jpg" ;
pic02a = new Image() ;   *    pic02a.src = "c_06.jpg" ;
pic03a = new Image() ;   *    pic03a.src = "74VokiChildMyth.jpg" ;
pic04a = new Image() ;   *    pic04a.src = "c_02.jpg" ;
</script> 

======
Did not notice asterisks * *  inserted in copy/paste rpocess.  Asterisks werenot part of original code

<div id="space"> 
<img src="73LightsAlongPath.jpg" alt="holder" name="holder" hspace=0 
vspace="6" border=1 class="holder" /> 
</div>
<div id="thumbnails"> 
<a href="#nogo" onMouseOver="document.holder.src=pic01.src; 
document.getElementById('text').innerHTML='cover'"> 
<img name="1" class="thumb" alt="Lights along the Path" title="Lights 
along the Path" src="73LightsAlongPath.jpg" /></a> 
</div>

Have been unsuccessful trying variations of
<div id="space" class="fancybox-buttons" data-fancybox-group="button">
<a href="73LightsAlongPath.jpg"><img src="73LightsAlongPath.jpg" alt="holder" name="holder" hspace=0 vspace="6" border=1 class="holder" /></a> </div>
and REL="fancybox" applied to <div>

Is it possible to incorporate large image paths and REL in an [array]?

========
P.S. -- Did not notice asterisks ** inserted via copy/paste process. Asterisks were NOT part of original code.

[jscheuer1]

I'm not following you 100%, but I think you're over complicating this.

Generally speaking there are no rollovers on mobile devices. So whatever you want to do onmouseover should be purely cosmetic. Or alternatively you can do rollovers for desktops and laptops while having touch devices use onclick or ontouchstart.

In a script for cross device sound I'm currently experimenting with using the css hover pseudo class to get some sort of rollover effects on touch devices. I don't have any such devices, so I'm relying on feedback from some folks who do. Right now we're focusing on just getting the basic functionality down, so the rollovers, which are cosmetic are the least of my concerns at the moment.

Getting back to your situation, the William Low site uses (along with a number of other scripts) Pretty Photo:

http://www.no-margin-for-errors.com/.../#!prettyPhoto

I'm not all that familiar with it, but it looks like a very robust script for Lightbox type effects. It has nice effects and options as well as built in support for twitter and facebook. And it's free for all uses. It doesn't do any of that stuff he has there for the thumbnails though, that's handled by other code. Pretty Photo only handles the 'Lightbox' duties.

Anyways, looking over your post again. I would suggest just getting a Lightbox type gallery working. Once you have that, you can experiment with any special effects you might want to add to the thumbnails.

Are you shooting for what William Low's site has, or did you have something else in mind?

Oh, and could you explain the meaning of the highlighted *'s here:

pic01 = new Image() ;* * pic01.src = "73LightsAlongPath.jpg" ;

I would think they would cause an error.

In any case, it looks like the main intent of that line is to preload the 73LightsAlongPath.jpg image. But there's no reason to do that, since it's already hard coded as the src attribute of an image tag here:

<div id="space"> 
<img src="73LightsAlongPath.jpg" alt="holder" name="holder" hspace=0 
vspace="6" border=1 class="holder" /> 
</div>

Preloading an image that's part of the page gains nothing and may even slow down the loading of the image and/or page.

And when you go on to state:

Have been unsuccessful trying variations of
<div id="space" class="fancybox-buttons" data-fancybox-group="button">

Just slapping a class and/or an attribute on something isn't going to do anything in and of itself, the code you're using has to initialize the element (or in this case more likely its children). You can do that on the basis of its or its parent's class or attribute. But generally what those are is secondary to how you initialize them. That initialization code appears to be missing from your post.

And yes, it's possible to incorporate anything into an array. It's the use you make of the array and its contents that's more important though.

And again, as I said before, there is no separate REL as you seem to be thinking. It's simply an attribute that can be used to signify which links get what sort of treatment in your code. And as I already mentioned, unless the script you're using requires it, since it's technically invalid for such purposes, it's better to use some other attribute or property of the element.

But this is all general stuff. For me to be of any specific help, I really need to see the page you are working on. At the very least I need to know which versions of which scripts you're using. I'm thinking you're probably still using FancyBox 2, but I'm not 100% sure of that and I'm unsure what if anything else you're trying to incorporate with it.

[auntnini]

It may not seem so, but I have been paying attention and learning.

My fundamental mission is to display multiple image samples. One of the most perfect scripts (to my way of thinking) is http://home.comcast.net/~jscheuer1/s...es/iss_ext.htm by JDS -- as discussed in http://www.dynamicdrive.com/forums/s...ad.php?t=24217. The user does not have to click, can just sit back and view, but has option to pause and to select an image (by number). Then there is Flexible Image Slideshow by JavaScriptKit.com with improvements by Mr J at http://www.codingforums.com/showthread.php?t=143543. After that, there's MorganGaynin.com rollOver model.

I have used the MG rollOver model extensively. But now one has to consider making a transition to display Web sites on mobile devices, and the MG rollOver model does not translate into tiny viewports.

Thus, I have been thrashing around, groping for possible solutions — trying percentage min-width layouts, experimenting with "boxes" that seem to resize content nicely, etc. Then, too, everybody has been doing "boxes" so there is pressure to become a competent boxer. Following the FancyBox v.2 demo [will compare to suggested v.1 if at all used], I have successfully created some FancyBox pages (one has 71 images so that's too big a hit on bandwidth to share). and another just kills my basic thumbnail rollOver functionality. Effects embodied in some "boxes" (keyboard navigation, scrolling thumbnails, play/stop controls, resolvability, etc,) are desirable, but I don't like "boxes" in and of themselves.

It makes sense to have a basic image slide show — with special effects applied. TN3 Gallery looked promising with its scrolling thumbnails and play controls, but, when the FREE lite version at http://www.josephdenaro.com/TN3Galle...mples/new.html was previewed in Device Central, its lack of resizability and keyboard navigation had negative results. My present building block is http://www.auntnini.com/sketch/vwPhillips.html.

Generally speaking there are no rollovers on mobile devices.

I meant the existing functionality of my rollOver layout model..

William Low site uses (along with a number of other scripts) Pretty Photo: http://www.no-margin-for-errors.com/...%21prettyPhoto. Are you shooting for what William Low's site has, or did you have something else in mind?

I downloaded prettyPhoto too. But NO and YES.

Oh, and could you explain the meaning of the highlighted *'s here:
...preload the 73LightsAlongPath.jpg image.

Just sloppy. The asterisks and extra spaces crept in unnoticed during cut/paste process. Of course,since the browser reads Images array that exist on page, the pic01=new Image(); could have been eliminated or another undefined Image could have been used as "holder" when page loaded.

Just slapping a class and/or an attribute on something isn't going to do anything in and of itself .... That initialization code appears to be missing from your post.
... there is no separate REL ... It's simply an attribute that can be used to signify which links get what sort of treatment in your code. And as I already mentioned, unless the script you're using requires it, since it's technically invalid for such purposes, it's better to use some other attribute or property of the element.

I was stuck in reverse mode trying to apply something to large images that appear in "space" instead of to the individual thubnails. Stubborn me. I've read and re-read the information provided. When and if it sinks in is questionable.

This was a "bad" thread. Time to put a "lid on this Pandora's box" with many thanks for your patience and instructive info.

=============
Cannot find Advance button to mark this RESOLVED>