Hi guys really need some help on this issue. I've searched all over but cant find any solution.
Using http://www.starplugins.com/cloudzoom/quickstart to add hover zoom feature on single product page. Rollover on first product thumbnail shows the same image. However on second or subsequent rollover of other images the rollover image is always the 1st image.
Media.phtml
<?php
$_product = $this->getProduct();
$_helper = $this->helper('catalog/output');
$_nativeZoom = false;
?>
<?php if (count($this->getGalleryImages()) > 0): ?>
<div class="more-views">
<?php /* <h2><?php echo $this->__('More Views') ?></h2> */ ?>
<?php
$galleryImages = $this->getGalleryImages();
$numGalleryImages = count($galleryImages);
$i = 0;
foreach ($galleryImages as $_image): $i++; ?>
<div class="<?php
if($i == 1) {
echo 'first';
}
if($i == $numGalleryImages) {
echo 'last';
}
?>">
<a href="#" data-large-image="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>"
title="<?php echo $_product->getName();?>">
<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(124); ?>"
alt="<?php echo $this->escapeHtml($_image->getLabel()) ?>" />
</a>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
<div id="main-image">
<?php
$_img = '<img class="cloudzoom" id="main-product-image" src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(450).'" data-cloudzoom="zoomImage: \''.$this->helper('catalog/image')->init($_product, 'image').'\'" alt="'.$this->escapeHtml($_product->getImageLabel()).'" title="'.$this->escapeHtml($_product->getImageLabel()).'" />';
echo $_helper->productAttribute($_product, $_img, 'image');
?>
</div>
<script type="text/javascript">
jQuery('.more-views a').click(function(){
jQuery('#main-product-image').attr('src', jQuery(this).attr('data-large-image'));
return false;
});
</script>
jquery initialize script
jQuery(document).ready(function($) {
if (jQuery('.catalog-product-view').length) {
if (window.location.hash == '#_reviews') {
//add scroll to down to product reviews list when pagination is used
jQuery.scrollTo(jQuery('#reviews'), {duration: 1000, interrupt: true});
}
//cloudzoom configuration http://www.starplugins.com/cloudzoom/quickstart
$('#main-product-image').CloudZoom({
tintColor: '#6e4d56',
tintOpacity: 0.43,
zoomSizeMode: 'image',
autoInside: 1000
});
}
});
Related
When I click one of the preview images, in order to bring up the fancybox gallery, it just swipes the image to the right and gives me this broken overlay. Not sure what the issue is here...
HTML (Note I'm using WordPress and Advanced Custom fields):
<?php if ( have_rows("inspiration_gallery") ) : ?>
<?php $i = 0; while ( have_rows("inspiration_gallery") ) :
the_row();
$img = get_sub_field("inspiration_image");
$img_id = $img['ID'];
$img_url = $img['url'];
$gallery_id = $gallery_id ? $gallery_id : $img_id;
$related = get_sub_field("inspiration_related");
?>
<?php if ($i == 0): ?>
<!-- Preview Image -->
<a class="inspiration__preview-link" href="<?php echo esc_url($img_url); ?>" data-fancybox="gallery-<?php echo esc_attr($gallery_id); ?>">
<?php echo wp_get_attachment_image( $img_id, "full", false, array("class" => "inspiration__prev_img") ); ?>
</a>
<?php else: ?>
<!-- Gallery Fancybox Link -->
<a class="inspiration__gallery-link none" href="<?php echo esc_url($img_url); ?>" data-fancybox="gallery-<?php echo esc_attr($gallery_id); ?>"></a>
<?php endif; ?>
<?php $i++; endwhile; ?>
<?php endif; ?>
I've got the latest versions of Fancybox JS and CSS files enqueued.
I'm not too experienced in PHP but my goal here is to have related product swatches not display on the page if they are out of stock.(highlighted in screenshot)
Related product swatches are highlighted
Here is the PHP code:
<ol class="mini-products-list" id="block-related">
<?php foreach($this->getItems() as $_item): ?>
<li class="item">
<?php if(!$_item->isComposite() && $_item->isSaleable()): ?>
<?php if (!$_item->getRequiredOptions()): ?>
<input type="checkbox" class="checkbox related-checkbox" id="related-checkbox<?php echo $_item->getId() ?>" name="related_products[]" value="<?php echo $_item->getId() ?>" />
<?php endif; ?>
<?php endif; ?>
<div class="product">
<img src="<?php echo $this->helper('catalog/image')->init($_item, 'thumbnail')->resize(50) ?>" width="50" height="50" alt="<?php echo $this->escapeHtml($_item->getName()) ?>" />
<div class="product-details">
<p class="product-name"><?php echo $this->escapeHtml($_item->getName()) ?></p>
<?php echo $this->getPriceHtml($_item, true, '-related') ?>
<?php if ($this->helper('wishlist')->isAllow()) : ?>
<?php echo $this->__('Add to Wishlist') ?>
<?php endif; ?>
</div>
</div>
</li>
<?php endforeach ?>
</ol>
And here is the related jQuery/JS:
<script type="text/javascript">
//<![CDATA[
$$('.related-checkbox').each(function(elem){
Event.observe(elem, 'click', addRelatedToProduct)
});
var relatedProductsCheckFlag = false;
function selectAllRelated(txt){
if (relatedProductsCheckFlag == false) {
$$('.related-checkbox').each(function(elem){
elem.checked = true;
});
relatedProductsCheckFlag = true;
txt.innerHTML="<?php echo $this->__('unselect all') ?>";
} else {
$$('.related-checkbox').each(function(elem){
elem.checked = false;
});
relatedProductsCheckFlag = false;
txt.innerHTML="<?php echo $this->__('select all') ?>";
}
addRelatedToProduct();
}
function addRelatedToProduct(){
var checkboxes = $$('.related-checkbox');
var values = [];
for(var i=0;i<checkboxes.length;i++){
if(checkboxes[i].checked) values.push(checkboxes[i].value);
}
if($('related-products-field')){
$('related-products-field').value = values.join(',');
}
}
//]]>
</script>
Any help would be appreciated, thank you!
Are you sure that you have the option Display out of stock products set to No? (System -> Configuration -> Inventory)
You can also try to add $_item->isAvailable() to if statement.
The Solution I ended up going with: adding $_item->isAvailable() to if statement gives the desired effect of related products that are out of stock will not display as a related product swatch on the product page.
I'm trying to just add an .active class to a sidebar div when it is on that page.
You can see the example here: http://nsiprojects.voodoodev3.co.uk/?page_id=193 which is literally only highlighting the first div as opposed to the active div.
<div class="mezzanine-sub">
<?php
$childpages = query_posts('orderby=menu_order&order=asc&post_type=page&post_parent=35');
if($childpages) { /* display the children content */
foreach ($childpages as $post) :
setup_postdata($post) ?>
<script type="text/javascript">
$(function() {
var current = location.pathname;
$('.mezzanine-sub a').each(function() {
var $this = $(this);
// if the current path is like this link, make it active
if ($this.attr('href').indexOf(current) !== -1) {
$this.addClass('active');
}
})
})
</script>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" class="mezzanine-sub-title">
<span><?php the_title(); ?></span>
<a>
<!-- post thumbnail -->
<?php
global $post; ?>
<?php
$src = wp_get_attachment_image_src(get_post_thumbnail_id($post -> ID), array(5600, 1000), false, '');
?>
<div class="mezzanine-sub-image" style="background: url(<?php echo $src[0]; ?> );border:<?php the_field('border'); ?>;"></div>
<!-- /post thumbnail -->
<!-- post title -->
<?php
endforeach;
} ?>
</div>
No need to use any jQuery/JavaScript code.
You can apply active class by comparing the page_id that exists as query string.
<div class="mezzanine-sub">
<?php
$childpages = query_posts('orderby=menu_order&order=asc&post_type=page&post_parent=35');
if ($childpages)
{
// Display the children content
foreach ($childpages as $post)
{
setup_postdata($post)
?>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" class="mezzanine-sub-title <?php echo!empty($_GET['page_id']) && $_GET['page_id'] == $post->ID ? "active" : NULL ?>">
<span><?php the_title(); ?></span>
<a>
<?php
global $post;
$src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), array(5600, 1000), false, '');
?>
<div class="mezzanine-sub-image" style="background: url(<?php echo $src[0]; ?> );border:<?php the_field('border'); ?>;">
</div>
</a>
</a>
<?php
}
}
?>
</div>
Carousel with buy and try products are placed in the website
But i login the jquery is not affecting to the carousel
Here are the errors
1) Uncaught TypeError: Cannot read property 'offsetWidth' of undefined
2) Unsafe JavaScript attempt to access frame with URL https://www.trynbuyindia.com/# from frame with URL https://www.youtube.com/embed/_sKw8edkBT4?enablejsapi=1&origin=https%3A%2F%2Fwww.trynbuyindia.com. Domains, protocols and ports must match.
3)Invalid 'X-Frame-Options' header encountered when loading 'https://www.youtube.com/embed/_sKw8edkBT4?enablejsapi=1&origin=https%3A%2F%2Fwww.trynbuyindia.com': 'ALLOWALL' is not a recognized directive. The header will be ignored.
4)Uncaught TypeError: Cannot read property 'offsetWidth' of undefined jcarousellite_1.0.1.min.js:1
Unable to post message to https://www.youtube.com. Recipient has origin https://www.trynbuyindia.com.
// bottom carosel //
$(".botcarousel1").jCarouselLite({
btnNext: ".scrlright a",
btnPrev: ".scrlleft a",
visible: 2,
speed: 1200,
scroll: 1
});
// bottom carosel //
$(".botcarousel2").jCarouselLite({
btnNext: ".scrlright1 a",
btnPrev: ".scrlleft1 a",
visible: 2,
speed: 1200,
scroll: 1
});
Below is the view code
<div class="botcarousel1">
<ul>
<?php $nophoto = theme_img('no_picture.png', lang('no_image_available'),130,130);
foreach($featured_products as $product){
if($product['product_type']==0)
{
?>
<li>
<div class="prodbox">
<div class="prodimg">
<a href="<?php echo base_url().$product['slug']; ?>" title="<?php echo $product['name'];?>" >
<?php
if(isset($product['images'])&&$product['images']<>'false'){
$product['images'] =array_values((array)json_decode($product['images']));
if(!empty($product['images'][0]))
{
$primary = $product['images'][0];
foreach($product['images'] as $photo)
{
if(isset($photo->primary))
{
$primary = $photo;
}
}
$photo = '<img class="pokemon" width="130" height="130" src="'.image_url().'images/small/'.$primary->filename.'" alt="'.$product['seo_title'].'"/>';
}
echo $photo;
} else {
echo $nophoto;
}
?>
</a>
</div>
<div class="prodname"><?php echo my_character_limiter($product['name'],15); ?></div>
<?php if($product['product_type']==1){ ?>
<div class="hpricetag">
<strike><?php echo format_currency1($product['price']); ?></strike> <span class="wcolor1"><?php echo format_currency1($product['saleprice']); ?></span>
</div>
<?php } ?>
<div class="prodbuy">
<input type="hidden" name="id" value="<?php echo $product['id']?>"/>
<?php $available_quantity=$this->Product_model->get_available_quantity($product['id']);
if((bool)$product['track_stock'] && config_item('inventory_enabled')):?>
<?php
$customer = $this->go_cart->customer();
if(isset($customer['id'])&&$customer['id']<>''){ ?>
<?php if($product['product_type']==0){ ?>
Try Now
<?php } else{ ?>
<!-- Buy Now!-->
Buy Now
<?php } ?>
<?php } else { ?>
<?php if($product['product_type']==0){ ?>
<a href="<?php echo site_url('authenticate/redirect/'.$product['id']); ?>" > Try Now</a>
<?php } else{ ?>
Buy Now
<?php } ?>
<?php } ?>
<?php else: ?>
<?php if($product['product_type']==0){ ?>
<span style="color:red;padding-left:10px;visibility:hidden;" >No TRYs available</span>
<?php } else{ ?>
<span style="color:red;padding-left:10px;visibility:hidden;" >Out of stock</span>
<?php } ?>
<?php endif; ?>
</div>
</div>
</li>
<?php } }
?>
</ul>
</div>
</div>
Can anyone suggest me what is happening here !!!!!!!!!!!!
So I created javascript slider, which automatically pulls page up, when it goes to next tab. You can test it in your page, and you will see, how to fix that? It pulls page up, like there would be href="#top" and , but there isn't anything like that.
Code -
<script type="text/javascript">
jQuery(document).ready(function() {
var time = <?php echo $data['tab1_speed']; ?>;
var tripleboxTitle = jQuery("triplebox-tab-title");
setInterval(function() {
tripleboxTitle.click(function(){
clearInterval();
});
var currentTab = jQuery('.triplebox-tab-active').attr("tab");
var newTab = Number(currentTab)+1;
if(newTab > 3) {
newTab = 1;
}
console.log(newTab);
jQuery(".triplebox-tab-title").removeClass('triplebox-tab-active');
jQuery('#triplebox-widget-tab'+newTab).addClass('triplebox-tab-active');
jQuery(".triplebox-tab-default").hide();
jQuery(".triplebox-tab-default").removeClass('triplebox-tab-default');
jQuery("#triplebox-widget-tab"+newTab+"-widget").addClass('triplebox-tab-default').fadeIn(300);
}, time);
});
</script>
<a id="triplebox-widget-tab1" tab="1" class="triplebox-tab-title triplebox-tab-active" <?php if($data['use_color'] == 'default') { ?>style="color: <?php echo $data['color_text']; ?>; background: <?php echo $data['color_tabs']; ?>;" <?php } ?>><?php echo $data['tab1_name']; ?></a>
<a id="triplebox-widget-tab2" tab="2" class="triplebox-tab-title" <?php if($data['use_color'] == 'default') { ?>style="color: <?php echo $data['color_text']; ?>; background: <?php echo $data['color_tabs']; ?>;" <?php } ?>><?php echo $data['tab2_name']; ?></a>
<a id="triplebox-widget-tab3" tab="3" class="triplebox-tab-title" <?php if($data['use_color'] == 'default') { ?>style="color: <?php echo $data['color_text']; ?>; background: <?php echo $data['color_tabs']; ?>;" <?php } ?>><?php echo $data['tab3_name']; ?></a>
<div id="triplebox-widget-tab1-widget" class="triplebox-widget triplebox-tab-default" <?php if($data['use_color'] == 'default') { ?>style="background: <?php echo $data['color_content']; ?>; color: <?php echo $data['color_text']; ?>;"<?php } ?>>
<?php echo $content; ?>
</div>
<div id="triplebox-widget-tab2-widget" class="triplebox-widget" style=" <?php if($data['use_color'] == 'default') { ?>background: <?php echo $data['color_content']; ?>; color: <?php echo $data['color_text']; ?>;<?php } ?> display: none;">
<?php echo $content2; ?>
</div>
<div id="triplebox-widget-tab3-widget" class="triplebox-widget" style=" <?php if($data['use_color'] == 'default') { ?>background: <?php echo $data['color_content']; ?>; color: <?php echo $data['color_text']; ?>;<?php } ?> display: none;">
<?php echo $content3; ?>
</div>
Also, why is my clearInterval(); not working? It still continues to scroll. How to make it stop?
You need to pass to function an "intervalID"
https://developer.mozilla.org/en/DOM/window.setInterval#Example
So;
var tripleboxTitle = jQuery("triplebox-tab-title");
var myIntvID = setInterval(function() {
...
tripleboxTitle.click(function(){
clearInterval(myIntvID);
});