Author Topic: Listing all your Gallery Images in V-Card with Highslide Effect  (Read 14450 times)

0 Members and 1 Guest are viewing this topic.

Offline getaweb

Hello Guys,

After going through the forum, i found a lot of us having problem with the Lightbox/Slimbox. I read a post on integrating Highslide. There too i found some issues relating to the entry of code and integration. So i put together some of the codes and worked out a solutions (Credit goes to original authors  :))

Also many of us wanted gallery pictures in the V-card.

Here is the step by step guide.

1. Download highslide 4.0.10
http://highslide.com/download-confirm.php?file=download%2Fhighslide-4.0.10.zip

2. Extract package. Only  upload the highslide folder to your template directory (eg. rhuk_milkyway)

3. Install gallery plugin and open the gallery.class.php (find it in the com_sobi2 and the plugin folder)

4. Find the following code



$config
->loadScript("prototype");
$config->addCustomHeadTag("<script type='text/javascript' src='{$config->liveSite}/components/com_sobi2/plugins/gallery/scriptaculous.js?load=effects'></script>");
$config->addCustomHeadTag("<script type='text/javascript' src='{$config->liveSite}/components/com_sobi2/plugins/gallery/lightbox.js'></script>");

$style "<style type=\"text/css\"> \n\t" .
"#prevLink:hover, #prevLink:visited:hover { background: url({$config->liveSite}/components/com_sobi2/plugins/gallery/images/prev.gif) left 15% no-repeat; } \n\t\t" .
"#nextLink:hover, #nextLink:visited:hover { background: url({$config->liveSite}/components/com_sobi2/plugins/gallery/images/next.gif) right 15% no-repeat; } \n\t\t" .
"#overlay{ background-image: url({$config->liveSite}/components/com_sobi2/plugins/gallery/images/overlay.png); } \n\t\t ".
"</style>\n";
$config->addCustomHeadTag($style);


Comment out the above lines

5. Find the following code

//... ueber die Lightbox darstellen
else {
$imagesSrc[$image->position] = "<a href='{$imgSrc}' title='{$image->title}' rel=\"lightbox[roadtrip]\">{$img}</a>";
}



Change these lines into


//... ueber die Lightbox darstellen
else {
$imagesSrc[$image->position] = "<a href='{$imgSrc}' title='{$image->title}' onclick=\"return hs.expand(this)\">{$img}</a>";
}


Save and close it.

7. Now open your template's index.php file
Under the <head> section.. insert the following

Code: [Select]

<!--
1 ) Reference to the files containing the JavaScript and CSS.
These files must be located on your server.
-->

<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/highslide/highslide-with-gallery.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/highslide/highslide.css" />

<!--
2) Optionally override the settings defined at the top
of the highslide.js file. The parameter hs.graphicsDir is important!
-->

<script type="text/javascript">
hs.graphicsDir = '<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.wrapperClassName = 'dark borderless floating-caption';
hs.fadeInOut = true;
hs.dimmingOpacity = .75;

// Add the controlbar
if (hs.addSlideshow) hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
opacity: .6,
position: 'bottom center',
hideOnMouseOut: true
}
});
</script>


Now Save and close the file,


8. To insert the gallery into your Details View, add the following command in details view template
<?php echo $plugins["gallery"]; ?>

9. To insert all the gallery pictures in your Vcard, add the following command in sobi2.vc.tmpl.php

<?php
$myGallery = new HTML_SOBI();
$myGallery->getPlugin($mySobi, "gallery");
?>

Voila. You have beautiful highslide effect to your listings. Enjoy.

Note: If someone can enhance this thread please tell the Sobi users on how to control the number of gallery images to be displayed in the Vcard. For eg. Total gallery has 10 pictures. But we want to show first four images.

Thanks
Getaweb
« Last Edit: 10. May 2009, 09:36:08 by getaweb »
Country: India India |  OS: Unknown Unknown Browser: Unknown Unknown | View Profile

Offline Robert_Vining

  • SOBI Team
  • Moderator
  • Sobi Hero
  • *
  • Posts: 1406
  • SobiPro is a free download!
  • Reviews:

    What is it?

    • Sobi Team Member
Re: Listing all your Gallery Images in V-Card with Highlisde Effect
« Reply #1 on: 11. April 2009, 16:00:27 »
Thanks for your work and thanks for sharing!!! This will make the gallery in vcard possible!
Robert Vining
SobiPro Documentation and Support Team
NOW OPEN!>> | www.sobitemplates.com | Professional Sobi2 and SobiPro Templates
www.robertswebdesign.com - Joomla, Sobi2 and SobiPro Specialist
Country: United States United States |  OS: Unknown Unknown Browser: Unknown Unknown | View Profile Sobi Templates

Offline uriel

Re: Listing all your Gallery Images in V-Card with Highlisde Effect
« Reply #2 on: 11. April 2009, 19:08:16 »
I tried this mod - looks as if it could be really cool providing I can pull it off  ???

Everything went ok but it seems to break the template file - leaves a blank page - I tried inserting the template code just after the <head> tag and just before the closing </head> tag.

Both scenarios leaves a blank page....

Any Suggestions ?
Country: South Africa South Africa |  OS: Unknown Unknown Browser: Unknown Unknown | View Profile

Offline getaweb

Re: Listing all your Gallery Images in V-Card with Highlisde Effect
« Reply #3 on: 11. April 2009, 22:12:14 »
Hey thanks for trying out.

It will work. Can you tell me what template you are using?
If possible provide the links so that i can check

or post more information.
Country: India India |  OS: Unknown Unknown Browser: Unknown Unknown | View Profile

Offline uriel

Re: Listing all your Gallery Images in V-Card with Highlisde Effect
« Reply #4 on: 12. April 2009, 09:26:45 »
Joomla 1.0.15
Template JA Trona
http://www.businessmarketing247.com

Duno if you gonna be able to see out of that but also see our Template index.php file details below.

<head>
<?php mosShowHead(); ?>


<link rel="stylesheet" href="<?php echo $tmpTools->baseurl(); ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $tmpTools->baseurl(); ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/template_css.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/typo.css" type="text/css" />

<script language="javascript" type="text/javascript">
   var siteurl = '<?php echo $tmpTools->baseurl();?>/';
   var tmplurl = '<?php echo $tmpTools->templateurl();?>/';
</script>

<script language="javascript" type="text/javascript" src="<?php echo $tmpTools->templateurl(); ?>/js/ja.script.js"></script>
<!-- js for dragdrop -->

<!-- Menu head -->
<?php if ($jamenu) $jamenu->genMenuHead(); ?>
<link href="<?php echo $tmpTools->templateurl(); ?>/css/colors/<?php echo $tmpTools->getParam(JA_TOOL_COLOR); ?>.css" rel="stylesheet" type="text/css" />

<?php if ( $my->id ) { initEditor(); } ?>

<!--[if lte IE 6]>
<style type="text/css">
.clearfix {height: 1%;}
img {border: none;}
</style>
<![endif]-->

<!--[if gte IE 7.0]>
<style type="text/css">
.clearfix {display: inline-block;}
</style>
<![endif]-->

<?php if ($tmpTools->isIE6()) { ?>
<!--[if lte IE 6]>
<link href="<?php echo $tmpTools->templateurl(); ?>/css/ie6.php" rel="stylesheet" type="text/css" />
<link href="<?php echo $tmpTools->templateurl(); ?>/css/colors/<?php echo $tmpTools->getParam(JA_TOOL_COLOR); ?>-ie6.php" rel="stylesheet" type="text/css" />
<script type="text/javascript">
window.addEvent ('load', makeTransBG);
function makeTransBG() {
makeTransBg($$('img'));
}
</script>
<![endif]-->
<?php } ?>
<!--[if gt IE 7]>
<link href="<?php echo $tmpTools->templateurl(); ?>/css/ie8.css" rel="stylesheet" type="text/css" />
<![endif]-->
<script type='text/javascript' src='/components/com_sobi2/plugins/gallery/slimbox.js'></script>
</head>

By the way - dunno what this mod would look like in V-card but would like to try that - can you show me an example ?
I tried showing the standard Lightbow in v-card before and it kinda broke out and looked awful! Maybe I need to mod the v-card template CSS as well to make it look better ? Or even get a complete different v-card template?
« Last Edit: 12. April 2009, 09:29:40 by uriel »
Country: South Africa South Africa |  OS: Unknown Unknown Browser: Unknown Unknown | View Profile

Offline Robert_Vining

  • SOBI Team
  • Moderator
  • Sobi Hero
  • *
  • Posts: 1406
  • SobiPro is a free download!
  • Reviews:

    What is it?

    • Sobi Team Member
Re: Listing all your Gallery Images in V-Card with Highlisde Effect
« Reply #5 on: 12. April 2009, 10:54:46 »
The original code posted above for the index.php file is for Joomla 1.5

You need to change the base URL code to 1.0.15 code.
Robert Vining
SobiPro Documentation and Support Team
NOW OPEN!>> | www.sobitemplates.com | Professional Sobi2 and SobiPro Templates
www.robertswebdesign.com - Joomla, Sobi2 and SobiPro Specialist
Country: United States United States |  OS: Unknown Unknown Browser: Unknown Unknown | View Profile Sobi Templates

Offline uriel

Re: Listing all your Gallery Images in V-Card with Highlisde Effect
« Reply #6 on: 12. April 2009, 11:18:54 »
thanx for the speedy reply - how would I do that ?

" You need to change the base URL code to 1.0.15 code. " ?
Country: South Africa South Africa |  OS: Unknown Unknown Browser: Unknown Unknown | View Profile

Offline getaweb

Re: Listing all your Gallery Images in V-Card with Highlisde Effect
« Reply #7 on: 12. April 2009, 14:42:22 »
Hi uriel,

Replace the links in the code with the following for your template.

This will work for you

<script type="text/javascript" src="<?php echo $tmpTools->templateurl(); ?>/highslide/highslide-with-gallery.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo $tmpTools->templateurl(); ?>/highslide/highslide.css" />

hs.graphicsDir = '<?php echo $tmpTools->templateurl(); ?>/highslide/graphics/';


Have fun

Getaweb
Country: India India |  OS: Unknown Unknown Browser: Unknown Unknown | View Profile

Offline uriel

Re: Listing all your Gallery Images in V-Card with Highlisde Effect
« Reply #8 on: 12. April 2009, 18:29:48 »
Getaweb!!

Thank you kindly Sir ! That worked! who needs a lightbox when you can have this!  :w00t:

I have been battling for weeks to get the lightbox working man....

Thanx again.

Looking smart now - see http://www.businessmarketing247.com

Country: South Africa South Africa |  OS: Unknown Unknown Browser: Unknown Unknown | View Profile

Offline getaweb

Re: Listing all your Gallery Images in V-Card with Highlisde Effect
« Reply #9 on: 12. April 2009, 18:45:17 »
Hey guys,

If this helped, click Thank You for me...
would be greatful.

uriel, your site looks nice. I dont see any entries.

You can see the highlisde in action at www.jextensions.co.cc/dinner
Country: India India |  OS: Unknown Unknown Browser: Unknown Unknown | View Profile

Tags: