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.
Related
I'm using slick carousel and I'm faced with the problem of having multiple rows only on specific columns. Is it possible to do this with slick carousel?
I'm trying to replicate this carousel layout:
As we can see from the image above, this carousel's first and last images are straightforward. However, when we look at the second and third carousel items, we can see these images are in multiple rows.
I understand that slick carousel has a rows function such as this example, but is it possible to only have this feature only for specific columns? If not, would you guys know any other way to accomplish this task?
For context, I'm using the ACF Gallery field (WordPress) to put in the images and using its loop to parse out the images in the front-end like this:
<div class="gallery-carousel">
<?php $index = 1; ?>
<?php foreach( $images as $image ): ?>
<div>
<img
src="<?php echo esc_url($image['url']); ?>"
alt="<?php echo esc_attr($image['alt']); ?>"
/>
<?php echo $index; ?>
</div>
<?php $index++; ?>
<?php endforeach; ?>
</div>
Thank you for your help!
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.
I need some help with an issue.
I have a widget area on my home page with 4 widgets in it.
Each widget has a title, an image and a description.
I want to know how can I add a dynamic title for the whole area, above all the 4 widgets.
The title should be changed by the user in the backend of the widget area.
Here is my code:
<div class="row-fluid">
<h1>The dynamic title should be here</h1>
<?php
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('utility-area') ) : ?><?php endif;
?>
</div>
I hope it all make sense and thank you very much!
<div class="row-fluid">
<h1><?php echo($someDynamicTitleYouveGotFromYourDatabaseOrWhatever); ?></h1>
<?php
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('utility-area') ) : ?><?php endif;
?>
</div>
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"/>
}
hello friends I am newbie to YII. I have an image . After calling that image in Yii its code like is this
<img class="deals_product_image" src="<?php echo MPFunctions::uploaded_image_url($data->item_display_image()->file_ufilename); ?>" alt="<?php echo $data->name; ?>" />
in general html it is doing like this
<img alt="women jackets" src="files/items/images/4db3b3b6a7c06/womens-jacket-thumb.jpg" class="deals_product_image">
Now I want that this image should be a href link like
<a href="files/items/images/4db3b3b6a7c06/womens-jacket-thumb.jpg img src="files/items/images/4db3b3b6a7c06/womens-jacket-thumb.jpg class="deals_product_image"/> </a>
so for this I used code like this
<?php echo CHtml::link('', array('items/viewslug', 'slug'=>$data->slug)); ?>
But it is not showing any link tag like <a href="">
so can any one tell me what should I do?What should I write in between '' tags?
You should simply give the html for the <img> tag as the first parameter:
$imageUrl = MPFunctions::uploaded_image_url($data->item_display_image()->file_ufilename);
$image = '<img class="deals_product_image" src="'.$imageUrl.'" alt="'.$data->name.'" />';
echo CHtml::link($image, array('items/viewslug', 'slug'=>$data->slug));
By the way, you can use CHtml::image to create the <img> tag as well:
$imageUrl = MPFunctions::uploaded_image_url($data->item_display_image()->file_ufilename);
$image = CHtml::image($imageUrl, $data->name, array('class' => 'deals_product_image'));
echo CHtml::link($image, array('items/viewslug', 'slug'=>$data->slug));