jQuery Forum

Hi,

I'm trying to link to a gallery from an image map.  I thought I could use Thickbox since it allows for linking via image map, but apparently not to make a gallery.

The image map looks like this:

1. <img src="pics.gif" usemap="picMap" />
2. <map name="picMap" id="picMap">
3.       <area shape="rect" coords="0,0,80,100" href="pic1" class="thickbox" rel="pics"/>
4.       <area shape="rect" coords="80,0,110,100" href="pic2" class="thickbox" rel="pics"/>
5. </map>

I tried altering the Thickbox code so that instead of

1. TB_TempArray=$("a[@rel="+imageGroup+"]").get();

I have:

1. TB_TempArray=$("area[@rel="+imageGroup+"]").get();

and also tried explicitly declaring var g="pics" (appx. line 21), and also tried making a conditional call to it with:

1. if(jQuery.inArray(this, $('area'))>-1){
2.       var g=$('area').attr('rel');
3. }
4. else {
5.       var g=this.rel || false;
6. }

I even tried explicitly declaring g as 'pics' in the conditional statement.

All of them make the animationGif come up, but never load the linked image.

Does someone have another idea?  Or know of a plugin that will create a gallery using image maps? 

I'm trying to incorporate a panorama virtual tour using the plugin from http://www.openstudio.fr/jQuery-virtual-tour.html which is set up to utilize ThickBox when the user clicks on a photo linked by a map area, but I want to override that to use PrettyPhoto (which normally uses anchors) since my site already has several PrettyPhoto galleries throughout.

I've tried:

• leaving the class set to ThickBox and removing the class,

• setting the rel of the area to prettyPhoto and including a prettyPhoto call script:

1. $("area[rel^='prettyPhoto']").prettyPhoto();

• and setting onclick of the area to use
  

1. $.prettyPhoto.open('image.jpg','','')

but it doesn't seem that any combination of those work. Are there any other ideas?

Thanks for ANY ideas

I'm using prettyPhoto for a gallery on my page.  I'd like to keep it the same size independent of the photo size.  So if the image is too big, the image shrinks down to the size of the box (although I don't mind the way it currently works of mostly filling the window).  More importantly, I'd like it to not shrink to fit smaller images.  It would be best if it would just center a too-small image. 

Unfortunately, one of the images that is in the gallery is only 200x150, while most are around 800x600.

Here's the call I use:    

1. <script type="text/javascript">
2.     $(document).ready(function(){
3.         $("a[rel^='prettyPhoto']").prettyPhoto({
4.             theme: 'light_rounded',
5.             animation_speed: 'fast',
6.             default_width: 400,
7.             default_height: 300,
8.             overlay_gallery: true
9.         });
10.     });
11.     </script>

Somehow, I just now realized that the default dimensions don't seem to apply to anything (or at least they're not limiting anything as far as I can tell).

Perhaps something from how it works for iframe?  The images don't thumbnail properly for the gallery if I put the width/height in the anchor href...

I'm trying to do a slideshow of gifs with transparencies where there are actually two images to each slide, one of which has a reflection applied to it.  Currently, I'm using the reflection.js found at  http://cow.neondragon.net/stuff/reflection/ and I've tried the jQuery plugin, but it doesn't even seem to apply the reflection.

Unfortunately, in IE, it does some very strange things to the images.  The unreflected image actually overlaps the other image and its reflection.  Where it overlaps the reflected image, it seems to transition fine.  But, in IE (7/8), as the slide is transitioning in, the would-be-visible pixels of the unreflected image that overlap the would-be-visible pixels of the reflection are transparent.  While the show pauses, the unreflected image pops fully into view, and then disappears again as it transitions out.

I think it has to do with the fact that both reflection and cycle's opacity adjustments require filters to work in IE, so where the filters overlap, both are opacity=0 or something to that effect.  The reason the non-reflection comes into full view when the image is standing still is because the filter for the slide is removed when it's not transitioning.  (I've tested the slideshow with the default fade function with the same result, and even with the custom settings everything transitions fine if I don't add the reflection).

Here's the call:
        $('.wow').cycle({
            fx: 'custom',
            cssBefore:{ 
                left: -300,  
                top: -50, 
                display: 'block'
            },
            animIn: { 
                left: 0,
                top: 0,
                opacity: 1
            },
            animOut: { 
                left: 300,  
                top: 200,
                opacity: 0
            },
            cssFirst:{
                left: 0,
                top: 0,
                opacity: 1
            },
            delay:-1000,
            speed: 2000,
            cleartypeNoBg: true
        });

Are there any ideas for making this appear correctly in IE?

I'm trying to include a cycle slideshow of gifs on my webpage.  It works beautifully in Mozilla, but when I try it in IE 8, all the transparent pixels get filled with the body background color (rather than the body background image/staying transparent).  I've tried adding background: transparent and background: none to the element in the IE stylesheet, but nothing's working.

*********ANSWER**********
I found the answer on another site.  Apparently, to correct this issue in IE 7 and IE 8, all you have to do is add two more parameters to your cycle call:

$('.cycleClass').cycle({
      fx: 'fade',
      cleartype: true,
      cleartypeNoBg: true
});