Osclass forums

Support forums => General help => Topic started by: jackichan on March 23, 2014, 06:24:49 pm

Title: onClick to swap images
Post by: jackichan on March 23, 2014, 06:24:49 pm

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

Quote

<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

Quote

<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.

Title: Re: onClick to swap images
Post by: mahesh on March 24, 2014, 08:10:18 am

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

Title: Re: onClick to swap images
Post by: elod on October 03, 2014, 09:02:10 pm

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 !

Title: Re: onClick to swap images
Post by: potoco on April 11, 2015, 04:26:43 am

Quote from: mahesh on March 24, 2014, 08:10:18 am

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

Title: Re: onClick to swap images
Post by: pixellegolas on April 13, 2015, 02:37:16 am

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