Jump to content
Latest News: (loading..)
JcMagpie

Support thread for Cataloge _JC_Index_carousel v2.3.4.1 CE

Recommended Posts

A simple addon to let you place a Carousel on your index pages. Set up for 3 image files (.png). Just replace sample files keeping names the same into same foulder. Images must all be the same size, use the stock ones as a template.

images/jcicarousel/index-1.png

Again totally standalone with no code change. Simply copy all files into relevant sections and go to admin modules /content and install “JC Index Carousel ”. Again if you want to add more images just edit tpl_cm_i_jcicarousel.php, just be careful!

It has been tested on the v2.3.4.1 CE and should just work.

indexC.jpg


 

Share this post


Link to post
Share on other sites

Dear Zahid , @JcMagpie

As always excellent your addons, congratulations!

I have an idea of improvement for this fabulous addon. It's possible add a link to each image, so if you click with the mouse on the Image , it send you to the page of the category or the product?

Best regards.

Valqui


I'm using oscommerce Edge v2.3.4.1

Get here the latest osCommerce Online Merchant Community Bootstrap Edition v2.3.4.1 CE

Share this post


Link to post
Share on other sites

Yes you can do that but I have kept it simple to use just as an advert display that can be easily changed for different marketing during the year.

It can easily be changed to add links .

Simply add href tag (shown in red) around the image as below. This can be a link like shown or could a file like specials.php or products_new.php

 

<div class="item">
<a href="https://tbyb.co.uk/product_info.php/samsung-galaxy-tab-p-28">
<img src="images/index-3.png" alt="Image three">
</a></div>

 

You just need to edit as required this file.

public_html/includes/modules/content/index/templates/tpl_cm_i_jcicarousel.php

 

 


 

Share this post


Link to post
Share on other sites

Dear Zahid , @JcMagpie

Another question, how did you do to add an outline with a shadow to the images?

Is it possible to add arrows to rotate the images to the right or left with the mouse or fingers on a mobile device?

Best regards

Valqui


I'm using oscommerce Edge v2.3.4.1

Get here the latest osCommerce Online Merchant Community Bootstrap Edition v2.3.4.1 CE

Share this post


Link to post
Share on other sites

The outline is just css just add this to your user.css file,

.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity;
  transition-duration: 3s;
  transition-timing-function:linear;
}

.carousel-fade .carousel-inner .active {
  opacity: 1;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}

.carousel-fade .carousel-control {
  z-index: 2;
}
.carousel-inner-2 {
    border-left: 1px solid #E9E9E9;
        border-left-width: 1px;
        border-left-style: solid;
        border-left-color: rgb(233, 233, 233);
    border-right: 1px solid #E9E9E9;
        border-right-width: 1px;
        border-right-style: solid;
        border-right-color: rgb(233, 233, 233);
    border-top: 1px solid #E9E9E9;
        border-top-width: 1px;
        border-top-style: solid;
        border-top-color: rgb(233, 233, 233);
    border-bottom: 1px solid #E9E9E9;
    padding-bottom: 0px;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: rgb(233, 233, 233);
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 5px 0 rgba(0, 0, 0, 0.19);
}

 


 

Share this post


Link to post
Share on other sites
Posted (edited)

To add controls first add this to your user.css

 

/*---------------------remove gray from my carousel-----------------*/
.carousel-control.left,
.carousel-control.right {
background-image: none

}

/*-----------change color of my carousel controls-----------------*/
.carousel-control {
color: #55bdda;


}
.carousel-control:hover {
color:#c155da;
}
/*-----------change position of my carousel controls-----------------*/
.carousel-control .icon-prev, .carousel-control .icon-next,
.carousel-control .fa-angle-left, .carousel-control
.fa-angle-right, .glyphicon-circle-arrow-left {
display: inline-block;
position: absolute;
top: 45%;
z-index: 5;
}


/*--------------------------------------------------------------------------*/

 

Then replace your file (tpl_cm_i_jcicarousel.php) with the new file attached.

 

public_html/includes/modules/content/index/templates/tpl_cm_i_jcicarousel.php

tpl_cm_i_jcicarousel.zip

Edited by JcMagpie

 

Share this post


Link to post
Share on other sites

Dear Zahid , @JcMagpie

The carousel look and works fabulous !!!

I congratulate you for this great addon and it would be very nice if you can upload the latest version to the store because several will surely like it.

Congratulations again!

Best regads

Valqui


I'm using oscommerce Edge v2.3.4.1

Get here the latest osCommerce Online Merchant Community Bootstrap Edition v2.3.4.1 CE

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×