I am trying to replace the default lightbox 'modal' to 'slimbox', because 'modal' doesn't have the navigation arrows.
Demo of slimbox with navigations
Demo of modal without navigations
I am using these paths to modify the calling of slimbox
[templatename]/html/com_virtuemart/productdetails/default.php
components/com_virtuemart/productdetails/default.php
Joomla v2.5
Virtuemart 2.0.6
Slimbox2
The following is my attempt:
//Enable Slimbox2 plugin
$front = JURI::root(true).'/components/com_virtuemart/assets/';
$document = JFactory::getDocument();
$document->addStyleSheet($front.'js/slimbox/slimbox.css');
$document->addScript($front.'js/slimbox/slimbox2.js');
$js = 'jQuery(document).ready(function($) { $("a.lightbox").slimbox(); });';
$document->addScriptDeclaration($js);
//output thumbnail
echo $this->product->images[0]->displayMediaThumb('class="product-image"',true,'class="lightbox" rel="lightbox"'.$this->product->virtuemart_product_id.'"',true,true);
//unset first image not to be show amont additional ones
unset ($this->product->images[0]);
?>
But its still not working I wondered what's wrong?
[Reference][3]
You aren't applying the slimbox class to the image reference, your applying it to the container of the image aren't you? You need to deal with the image file url directly in my opinion.
// get the file_url of the first image
$imgPath = $this->product->images[0]->file_url;
// output the image
<a class="slimbox" href="<?php echo $imgPath; ?>">
<img src="<?php echo $imgPath; ?>" alt="" />
</a>
Related
Hi everyone I have a modal windows in joomla 3.0!
I pass the router to javascript like this
<?php $link =JURI::root().'index.php?option=com_projects&view=proyectos&format=raw&task=todosProyecto&id='. $item->id;?>
<li class="item" data-id="id-<?php echo $item->id ?>" data-type="<?php echo $item->categoria ?>">
<a href="#modal" id="<?php echo $link;?>" role="<?php echo $item->id ?>" class="picture" data-toggle="modal">
<img src="<?php echo JURI::root()?><?php echo $item->imagen_portada; ?>"/></a>
<p class="titulo"><?php echo $item->nombre; ?></p>
<p> <?php echo $item->municipio; ?>(<?php echo $item->pais; ?>)<br><?php echo $item->year; ?>
</p>
In local when I open the modal windows it work well, but in the server the modal windows show me the index.php view of this component.
I think that my problem is here, when I take the request for the model I have this.
public function elegirSeleccionados(){
$this->pagination = $this->get('pagination');
$this->items = $this->get('recientes');
$this->list = $this->get('list');
parent::display();
}
But $this->get('list'); is null so I have to asigned a null value to list.
I changed by that..
$this->list = $this->items;
but dont work to!
Any idea!!!
Where is this code?
First part looks like a Layout (views\proyectos\tmpl\default.php) and the second one like a View (views\proyectos\view.html.php).
If it is so, I'd say you are not really loading items in View from the Model. Try using $this->items = $this->get('Items');
But this doesn't explain different results on server and local host.
Hi everyone I solved the problem... the name of my view hava a Camelcase for example itemId and joomla try to find itemid, so don´t find the view and show the default view in the modal.
So I change the name of file without camelCase and now work.!
I am using a custom magento template which has a lightbox on the product page. I can set the max width/height for the lightbox in the config as a percentage of the screen (ie 95%). The problem is it then uses this as the default value so even it is is a really small image it will stretch it out to 95% of the screen and cause the image to pixelate.
I would like it to use this percentage as a maximum only but if the actual image is smaller than this then it would use the actual image dimensions.
I have found a file with this code which I think I may need to edit but I am not sure how to go about this in Magento:
<?php
$maxWidth = $zoomHelper->getCfg('lightbox/max_width');
$maxHeight = $zoomHelper->getCfg('lightbox/max_height');
$cfg = '';
if ($maxWidth)
$cfg .= ", maxWidth:'{$maxWidth}'";
if ($maxHeight)
$cfg .= ", maxHeight:'{$maxHeight}'";
?>
Any ideas?
The way I've done this is to load up relatively large images as the base product image. When the product / view is rendering, build a js object that contains urls for large images, and any thumbnails you need. Your lightbox should then use the js object as a data source.
media.phtml
<script> var images = {};</script>
<?php $_images = Mage::getModel('catalog/product')->load($_product->getId())->getMediaGalleryImages(); ?>
<?php if($_images){?>
<?php $i=0; foreach($_images as $_image){ $i++; ?>
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail', $_image->getFile())->resize(108,90); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel());?>" title="<?php $this->htmlEscape($_image->getLabel());?>" /><?php } ?>
<script> images.bigsrc = "<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail', $_image->getFile())->resize(800,800); ?>" </script>
<?php } ?>
You then have a js object containing urls for whatever size image you would need. Pass that into lightbox / fancybox etc.
You will definitely have to tailor this to match your needs - mostly in terms of creating a js object that you can use.
Some info on resizing images in mage:
http://www.magthemes.com/magento-blog/customize-magentos-image-resize-functionality/
We have been trying to get the featured image to show for this block on CMS homepage but so far unsuccessful using FishPig WP Integration extension on Magento v1.7.0.0. However, we are successful in other content from the blog's post to show from specified category.
What we are looking to do is get 2 images to show per post. The rest is good to go. Each section is considered a post. I've linked two screenshots with explanations for visual aid.
The area on the dev site where we are trying to get this done on is:
https://devtest.eboost.com
The relevant block of code for the Press section is
<div id="pressblock">
<?php
//$press_posts = Mage::getResourceModel('wordpress/image')->addIsPublishedFilter()->addCategorySlugFilter('press');
$press_posts = Mage::getResourceModel('wordpress/post_collection')->addIsPublishedFilter()->addCategorySlugFilter('press');
$presstotal = count($press_posts->getAllIds());
$presstotid = $press_posts->getAllIds();
//i<=2 means displays last 2 posts
//display latest 2 posts...
$k = 0;
$nopages = ceil($presstotal/6);
$pag = 1;
for($j=$presstotal - 1; $j>=0; $j--)
{
$k++;
if($k == 1)
{
if($pag == 1)
{
echo '<section id="page-'.$pag.'" class="active">';
$pag++;
}
else
{
echo '<section id="page-'.$pag.'">';
$pag++;
}
}
?>
<div class="<?php if($k%2 == 0) echo 'press_right'; else echo 'press_left';?>">
<div class="pree_emty">
<?php
/*
GPSM 01-23-13:
Some attempts to get the featured image to show. I don't see a variable to display any image really. The only thing that shows image is post_content but that shows the content as well... Maybe we can filter the image from there?
Maybe we can use some of the code from "app/design/frontend/default/eboost/template/wordpress/post/list.phtml" or something.
The following StackOverflow post looks to have promising suggestions:
http://stackoverflow.com/questions/10169968/wordpress-posts-on-magento
Check "app/code/community/Fishpig/Wordpress/Model/Image.php" for functions to display image stuff
*/
//echo $press_posts->getItemById($presstotid[$j])->post_content;
//print_r($press_posts->getItemById($presstotid[$j]));
//echo $press_posts->getItemById($presstotid[$j])->getFeaturedImage();
?>
<img src="<?php echo $press_posts->getItemById($presstotid[$j])->getFeaturedImage(); ?>" width="204" height="204" alt="" />
<?php/*<img src="<?php echo $this->getSkinUrl('images/pree_emty.png');?>" width="204" height="204" alt="" />*/?>
</div>
<div class="press_txt">
<h3><?php echo $press_posts->getItemById($presstotid[$j])->getPostTitle(); ?></h3>
<p><?php echo substr(strip_tags($press_posts->getItemById($presstotid[$j])->getPostContent()), 0, 150); ?></p>
<p><img src="<?php echo $this->getSkinUrl('images/viewfull_btn.png');?>" width="168" height="30" alt="" /></p>
</div>
</div>
<?php
if($k >= 6)
{
echo "</section>";
$k = 0;
}
}
if($k < 6)
{
echo "</section>";
}
?>
</div><!--#pressblock-->
2 screenshots for visual aid:
Best Regards,
George
Figured it out...
Essentially we pulled the custom field image from the posts. We will be making another custom field for the posts for another image. So, one image from post will be for the frontpage->press block and the second image will be displayed in a fancybox overlay.
Here is the relevant code snippet:
http://www.filedropper.com/code_1
^^ posting the code this time around screwed with the formatting and figured to just save it to a file "code.php", upload to free upload site, post here... I followed the posting instructions like last time to post the snippet but I must be doing something wrong but don't have time now to figure that out...
Regards,
George
I am creating a component,
controllers
theatercontroller
facilitycontroller
Models
theater
facility
view
theater
facility
What I want is I want to add a new facility from the theater view by clicking a button and opening a modal window. I have tried but didn't work. I studied some components but it is difficult for someone like me to understand it. Please I need a simple example and a explanation to understand it.
It doesn't have to be anywhere near that complicated. Many templates turn the modal behavior on already, but if they don't all you need to do is add this to the head -
<?php JHTML::_('behavior.modal'); ?>
Then add this to any links you want to open in a modal window -
class="modal"
Everything else is optional.
You can use this function to get a modal button
static public function getModalButtonObject($name,$text,$link,$width=750,$height=480)
{
JHTML::_('behavior.modal', "a.{$name}"); // load the modal behavior for the name u given
$buttonMap = new JObject(); // create an Jobject which will contain some data, it is similar like stdClass object
$buttonMap->set('modal', true);
$buttonMap->set('text', $text );
$buttonMap->set('name', 'image');
$buttonMap->set('modalname', $name);
$buttonMap->set('options', "{handler: 'iframe', size: {x: ".$width.", y: ".$height."}}");
$buttonMap->set('link', $link);
return $buttonMap;
}
And HTML can be written as
<a id="<?php echo $buttonMap->modalname; ?>" class="<?php echo $buttonMap->modalname; ?>" title="<?php echo $buttonMap->text; ?>" href="<?php echo $buttonMap->link; ?>" rel="<?php echo $buttonMap->options; ?>"><?php echo $buttonMap->text; ?></a>
That's pretty much what I'm trying to do. All of my simple products are part of, at most, 1 configurable product, so there's no possibility for issues there.
This is necessary because I want my simple products (pillow in design X, color Y) to show in search, catalog but I need the user to know that the design exists in different colors once they click (presumably because they like design X but aren't necessarily sold on color Y). Further, my implementation of Color Swatches (extension) is causing my simple products (that are part of configurables) to behave funnily when accessed directly.
Thanks for any help.
Edit:
Here's the code I ended up using. I'm not a very good coder so make sure to improve it before deploying... (~In app/design/frontend/blah/blah/template/catalog/product/view.media.phtml)
<?php
/* THIS BLOCK ADDED BY __ ON 5/5/2011 */
$thisProductId = $_product['entity_id'];
$thisProductParentId = Mage::getResourceSingleton('catalog/product_type_configurable')->getParentIdsByChild($thisProductId);
if (!$thisProductParentId)
{
?>
<div class="more-views">
<h2><?php echo $this->__('More Views') ?></h2>
<ul>
<?php foreach ($this->getGalleryImages() as $_image): ?>
<li>
<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(56); ?>" width="56" height="56" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" />
</li>
<?php endforeach; ?>
</ul>
</div>
<?php
}
else if ($thisProductParentId)
{
$_product_temp = Mage::getModel('catalog/product')->load($thisProductParentId);
if($_product_temp->getStatus()==1)
{
$_categories = $_product_temp->getCategoryIds();
$_category = Mage::getModel('catalog/category')->load($_categories[0]);
$url = $this->getUrl($_category->getUrlPath()).$_product_temp->getUrlPath();
echo '<h1><a style="color:red;" href="'.$url.'">Click here to view this pillow design in different colors and styles.</a></h1>';
// redirect disabled because it won't preload the new color on the configurable image page anyway. (haven't attempted)
/* echo '<script type="text/javascript">
<!--
window.location = "'.$url.'"
//-->
</script>'; */
}
}
// -- end --
?>
The overwriting of the More Images gallery bit is a project-specific customization, so keep that in mind.
I went and wrote a bunch of code to try to do this, and forgot that this is already a simple use case, and Magento has it written for you:
Mage::getResourceSingleton('catalog/product_type_configurable')
->getParentIdsByChild($childId);
That snippet should give you all parent products for the child. If there is one, redirect to it. Otherwise, render the page as requested.
you have two options here :
add rewrite rules form catalog > url rewrite management
program an extension that makes the necessary check against product database and makes the redirect