Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

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

 

Link to comment
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

:heart: Community Oscommerce fan :heart: You'll find the latest osC community version here.

 

Link to comment
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

 

 

 

Link to comment
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

:heart: Community Oscommerce fan :heart: You'll find the latest osC community version here.

 

Link to comment
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);
}

 

 

Link to comment
Share on other sites

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

 

Link to comment
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

:heart: Community Oscommerce fan :heart: You'll find the latest osC community version here.

 

Link to comment
Share on other sites

  • 6 months later...

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...