I'm using Colorbox in form of Yii 1.x widget. Everything works fine, except for the fact, that Colorbox does not group my images and does not show <-- / --> buttons.
This is part of code generated by my page:
<div class="media-gallery-wrapper">
<div class="media-gallery-item">
<a href="http://127.0.0.1/usrector/htdocs/uploads/galleries/15.jpg" class="colorbox cboxElement" title="">
<img src="http://127.0.0.1/usrector/htdocs/uploads/galleries/15small.jpg" alt="" width="450" height="450">
</a>
</div>
</div>
Each three of such blocks are followed by:
<div class="media-gallery-separator"></div>
And that's all. Even though I've been trying to modify my code and browsing through Colorbox examples, I don't see any significant difference between my code and those on examples. Thus, I don't know, what makes my Colorbox not grouping images?
Grouping in Colorbox works only, if you base it on rel attribute. You can't use classes.
So, this:
<a href="<?php echo $filename; ?>" class="colorbox" title="<?php echo $title; ?>">
<script type="text/javascript">
jQuery('.colorbox').colorbox({'maxHeight':'80%','maxWidth':'90%'});
</script>
won't work (no image grouping, no <- / -> buttons), while this:
<a href="<?php echo $filename; ?>" rel="colorbox" title="<?php echo $title; ?>">
<script type="text/javascript">
jQuery('a[rel="colorbox"]').colorbox({'maxHeight':'80%','maxWidth':'90%'});
</script>
will work like a charm.
Related
I want to add opacity to the nearby images of a jssor slider.
I found this old one but I cannot get it to work:
jssor nearby slider opacity upcoming photos
especially this part:
<div data-u="slides" id="slideimage-content">
<?php foreach ($sectionImage as $key => $value) {?>
<div data-p="112.50" style="display: none;border-style:none; ">
<img data-u="image" src="<?php echo $value['url'] ?>" style="border-style:none;"/>
<div class="slidecover slidecover<?php echo $key ?> coverdark"></div>
</div>
<?php } ?>
</div>
Jfiddle
https://jsfiddle.net/sLjfu7xc/3/
Thanks
For now, you can add static cover above to make it appear like that.
Download jssor slider dev pack, find the demo ‘examples/overlay-cover.html’.
Btw, we will implement this as built feature later.
I've got a following code:
<?php if(UserModel::getInstance()->isLoggedIn()) { ?>
<a class="modal-trigger waves-effect waves-light red btn right" href="#modalNewTopic">+ Add New Topic</a>
<?php } ?>
<?php if(UserModel::getInstance()->isLoggedIn()) { ?>
<div id="modalNewTopic" data-ignore="true" class="modal">
<div class="modal-content">
<h4>Add New Topic</h4>
</div>
<div class="modal-footer">
asdf
</div>
</div>
When I click on a button nothing is showed up. No errors were triggered in javascript console. What could be the problem?
You need to initialise the modal plugin before you can use it. Add this to your JS file:
$(document).ready(function() {
$('.modal').modal();
});
I am facing a problem with showing the recently viewed products in my product page.
Here is my local.xml code:
<catalog_product_view translate="label"> reference name="root"> <action method="setTemplate">page/1column.phtml <block type="reports/product_viewed" name="product.recently.viewed" as="product_recently_viewed" template="reports/product_viewed.phtml"/></block></reference>
Here is my footer.phtml code:
<div class="footer-container">
<div class="footer">
<?php $maniPage = $this->getUrl('');
$currentUrl = Mage::helper('core/url')->getCurrentUrl();
$url = Mage::getSingleton('core/url')->parseUrl($currentUrl);
if ($maniPage == $currentUrl){
echo $this->takeCategory(12,1) /*12 = brands category 1 = show images*/ ;
}
?>
<div class="block-content">
<?php echo $this->getChildHtml('product_recently_viewed') ?>
</div>.....
Here is my product_viewed.phtml (standard file from core)
<?php if ($_products = $this->getRecentlyViewedProducts()): ?>
<div class="block block-list block-viewed">
<div class="block-title">
<strong><span><?php echo $this->__('Recently Viewed Products') ?></span></strong>
</div>
<div class="block-content">
<ol id="recently-viewed-items">
<?php foreach ($_products as $_item): ?>
<li class="item">
<p class="product-name"><?php echo $this->helper('catalog/output')->productAttribute($_item, $_item->getName() , 'name') ?></p>
</li>
<?php endforeach; ?>
</ol>
<script type="text/javascript">decorateList('recently-viewed-items');</script>
</div>
</div>
<?php endif; ?>
When I inspect the elements, the from the footer is empty. All files posted are in my theme. I have my own css so may be it won't be shown as expected, but at least the div should have any data inside, right? Could you please help me with this one. Thank you in advance.
Hey guys below I have a interesting problem.... I am trying to setup a left and right side post so that I can take things like read more, post date or author and have them be in the col-md-4 and have the title and the post content along with read more be inside the col-md-8
I have a feeling I am going about this pretty strange as I am rusty as hell with my php and wordpress so any help in achieving this would be helpful. Interesting problem is I have two read more's put in place with one having a display:none for WHATEVER reason if I remove that my read more's go bonkers on the page.
The code:
<?php
$myposts = get_posts('numberposts=5
&category=homeposts');
foreach($myposts as $post) :?>
<div class="col-md-8" style="background:#000;">
<h3><a href="<?php echo the_permalink($post->ID); ?>" title="<?php echo $post->post_title;?>">
<?php echo $post->post_title ?></a></h3>
<?php echo substr($post->post_content,0,500) ?>
<a class="btn btn-default" style="display:none;" role="button" href="<?php echo get_permalink(); ?>">Read More</a>
</div>
<div class="col-md-4" style="background:#000;"><a class="btn btn-default" role="button" href="<?php echo get_permalink(); ?>">Read More</a></div>
<?php endforeach; ?>
ok so what is wrong with this....
<?php
$myposts = get_posts('numberposts=5
&category=homeposts');
foreach($myposts as $post) :?>
<div class="col-md-8">
<h3><a href="<?php echo the_permalink($post->ID); ?>" title="<?php echo $post->post_title;?>">
<?php echo $post->post_title; ?></a></h3>
<?php echo $post->the_excerpt; ?>
<a class="btn btn-default" style="display:none;" role="button" href="<?php echo get_permalink(); ?>">Read More</a>
</div>
<?php endforeach; ?>
I am using magento 1.7 version.I have some images with product.Now I want to show as a slider in detail page.my code is below:-
<?php if (count($_product->getMediaGalleryImages()) > 0): ?>
<div class="more-views">
<div class="productsmallImage">
<div id="slider2">
<a class="buttons prev" href="javascript:;">left</a>
<div class="viewport">
<ul class="overview">
<?php foreach ($_product->getMediaGalleryImages() as $_image):?>
<li>
<!--No lightbox on click of image-->
<a href="<?php echo $_image->getUrl();?>" title="<?php echo $_image->getName();?>" onclick="$('image').src = this.href; return false;">
<img src="<?php echo $_image->getUrl(); ?>" width="56" height="56" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" />
</a>
</li>
<?php endforeach; ?>
</ul>
</div>
<a class="buttons next" href="javascript:;">right</a>
</div>
</div>
In this count($_product->getMediaGalleryImages()) has value 4.All the images showing but need to resize them.Please help to do this.
Try to use the following construction for images output:
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail', $_image->getFile())->resize(56) ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" />
foreach ($_product->getMediaGalleryImages() as $image) {
Fixed width of 600px
$image_Url = Mage::helper('catalog/image')
->init($_product, 'image')
->constrainOnly(TRUE)
->keepAspectRatio(TRUE)
->keepFrame(FALSE)
->resize(600,null)
?>
Fixed height of 600px
$image_Url = Mage::helper('catalog/image')
->init($_product, 'image')
->constrainOnly(TRUE)
->keepAspectRatio(TRUE)
->keepFrame(FALSE)
->resize(null,600)
The following code will resize image proportionally and not let
the image be greater than height and width specified.
$_image_Url = Mage::helper('catalog/image')
->init($_product, 'image', $image->getFile())
->keepFrame(true)
->keepAspectRatio(TRUE)
->constrainOnly(true)
->resize(600,600);
<img src="<?php echo $_imageUrl; ?>" alt="" class="normal"/>
}