♥JcMagpie Posted June 6, 2018 Share Posted June 6, 2018 Cataloge _JC_Index_carousel v2.3.4.1 CE 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. Link to comment Share on other sites More sharing options...
valquiria23 Posted June 6, 2018 Share Posted June 6, 2018 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 Community Oscommerce fan You'll find the latest osC community version here. Link to comment Share on other sites More sharing options...
♥JcMagpie Posted June 6, 2018 Author Share Posted June 6, 2018 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 More sharing options...
valquiria23 Posted June 6, 2018 Share Posted June 6, 2018 thank you very much Zahid , @JcMagpie You are the one!! Community Oscommerce fan You'll find the latest osC community version here. Link to comment Share on other sites More sharing options...
valquiria23 Posted June 6, 2018 Share Posted June 6, 2018 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 Community Oscommerce fan You'll find the latest osC community version here. Link to comment Share on other sites More sharing options...
♥JcMagpie Posted June 7, 2018 Author Share Posted June 7, 2018 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 More sharing options...
♥JcMagpie Posted June 7, 2018 Author Share Posted June 7, 2018 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 More sharing options...
valquiria23 Posted June 7, 2018 Share Posted June 7, 2018 Dear Zahid , @JcMagpie Thank you very much, I will try it and I tell you what the result was. Best regads Valqui Community Oscommerce fan You'll find the latest osC community version here. Link to comment Share on other sites More sharing options...
valquiria23 Posted June 7, 2018 Share Posted June 7, 2018 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 Community Oscommerce fan You'll find the latest osC community version here. Link to comment Share on other sites More sharing options...
Dj-Viper Posted December 14, 2018 Share Posted December 14, 2018 Hi, There is a update for this contribution online, added the language files for Dutch and German. Greetings, Anne Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.