onClick to swap images

[jackichan]

Guys i need help with using the onclick function on the php, I'm new to this web design stuff so I need help from you guys!

First off, i have a main photo display, with this as the code

<div class="item-photos">
            <a href="<?php echo osc_resource_url(); ?>" class="main-photo" title="<?php _e('Image', 'bender'); ?> <?php echo $i+1;?> / <?php echo osc_count_item_resources();?>" >
                <img src="<?php echo osc_resource_url(); ?>" alt="<?php echo osc_item_title(); ?>" title="<?php echo osc_item_title(); ?>" />

Then these as the thumbnails

<div class="thumbs">
                <?php for ( $i = 0; osc_has_item_resources(); $i++ ) { ?>
                <a href="<?php echo osc_resource_url(); ?>" rel="image_group" title="<?php _e('Image', 'bender'); ?> <?php echo $i+1;?> / <?php echo osc_count_item_resources();?>" onclick="popup(this.href,'name','530','500','no'); return false">
                    <img src="<?php echo osc_resource_thumbnail_url(); ?>" width="75" alt="<?php echo osc_item_title(); ?>" title="<?php echo osc_item_title(); ?>" />
                </a>
                <?php } ?>
 </div>

Initially the theme (bender) gives the Fancybox function, but the design i'm going through doesn't require it. Instead i have other plans to change that function of viewing the photos.

Basically what I want to do is have a Main Display with a default image on it, then thumbnails of others images beside it. On Click of any of the image, it will copy the Image and it will be displayed on the Main Display. I have searched the net for countless of hours to find the solution but to no avail.

[mahesh]

Hi Jackichan,

Replace thumbnail code with the following code

Code: [Select]

<div class="thumbs">
                <?php for ( $i = 0; osc_has_item_resources(); $i++ ) { ?>
                <a href="javascript:void(0)" title="<?php _e('Image', 'eclassi_plus'); ?> <?php echo $i+1;?> / <?php echo osc_count_item_resources();?>" onclick="showimage('<?php echo osc_resource_url(); ?>','<?php echo osc_item_title(); ?>','<?php echo osc_count_item_resources();?>','<?php echo $i+1;?>')">
                    <img src="<?php echo osc_resource_thumbnail_url(); ?>" width="75" alt="<?php echo osc_item_title(); ?>" title="<?php echo osc_item_title(); ?>" />
                </a>
                <?php } ?>
            </div>
And add the below code in your theme js file global.js at the end

Code: [Select]

function showimage(url,title,itemcount,current){
//alert('jello');
document.getElementById("largephoto").innerHTML='<a href="'+url+'" class="main-photo" rel="image_group" title="Image '+current+'/'+itemcount+'"><img src="'+url+'" title="'+title+'" alt="'+title+'"></a>';
return false;

}   

I hope this is helping and it works for me

[elod]

Hi !
How can I do when I press the Maine Image (the big one) to open in the Fancybox and when i press the thumbnails  to change the Main Image (and when i press the Maine Image to open in Fancybox) ?
Thx Elod !

[potoco]

Hi Jackichan,

Replace thumbnail code with the following code

Code: [Select]

<div class="thumbs">
                <?php for ( $i = 0; osc_has_item_resources(); $i++ ) { ?>
                <a href="javascript:void(0)" title="<?php _e('Image', 'eclassi_plus'); ?> <?php echo $i+1;?> / <?php echo osc_count_item_resources();?>" onclick="showimage('<?php echo osc_resource_url(); ?>','<?php echo osc_item_title(); ?>','<?php echo osc_count_item_resources();?>','<?php echo $i+1;?>')">
                    <img src="<?php echo osc_resource_thumbnail_url(); ?>" width="75" alt="<?php echo osc_item_title(); ?>" title="<?php echo osc_item_title(); ?>" />
                </a>
                <?php } ?>
            </div>
And add the below code in your theme js file global.js at the end

Code: [Select]

function showimage(url,title,itemcount,current){
//alert('jello');
document.getElementById("largephoto").innerHTML='<a href="'+url+'" class="main-photo" rel="image_group" title="Image '+current+'/'+itemcount+'"><img src="'+url+'" title="'+title+'" alt="'+title+'"></a>';
return false;

}   

I hope this is helping and it works for me

Hi mahesh,

In Osclass 3.5.6 with Standard Bender theme this mod does not work, could you confirm if work for you on Bender?

Regards

[pixellegolas]

jackichan check symnel theme. It has this if I see what you want