Pages:

slider product

cachousam

Avatar: cachousam

2013-02-24 08:31

It seems to me that by correcting the code below that I put in the container.tpl, the solution would be found.
Thank you in advance

For the adaptation i have modify all this files:
product.php in/action admin
p et setting.php in /action admin
lang.en.php in/config
en.php in/lang
setting.tpl in/templates/admin
product.tpl in/templates/admin
en_products.def.php in/db
container.tpl in/templates
product.php va in /core
default.css in /templates




I have write this code in HEAD after the line
<script type="text/javascript" src="$config[dir_core]litebox-1.0.js"></script>


<if( !defined( 'JQUERY-LOADED' ) ){ >
<script type="text/javascript" src="$config[dir_core]jquery-1.8.2.min.js"></script>
<define( 'JQUERY-LOADED', true ); } >
<script type="text/javascript" src="$config[dir_core]jquery.jcontent.0.8.js"></script>
<script type="text/javascript" language="javascript">
$("document").ready(function(){
$("div#productsSlider").jContent({
orientation: 'horizontal',
width: "560",
duration: 2000,
auto: true,
direction: 'next',
pause_on_hover: true,
pause: 5000});
});







if( !empty( $config['slider_page'] ) && isset( $aData['iPage'] ) && $aData['iPage'] == $config['slider_page'] ){
if( !isset( $oProduct ) )
$oProduct = Products::getInstance( );
$oProduct->listProductsSlider( ); // products in slider
}


Thanks a lot

cachousam

Avatar: cachousam

2013-02-24 09:27

Here is my test site.

You can see the problem with the file container.tpl
You can see my modification in admin
page setting and pages product

for loging to admin panel ,the défault password and ID: admin and admin

http://cachousam1.free.fr/

See you soon I hope.

cachousam

Avatar: cachousam

2013-02-24 16:04

The same result with this code always in container.tpl between <head> and </head>

<script type="text/javascript" src="$config[dir_core]jquery-1.8.2.min.js"></script>
<script language="javascript" type="text/javascript" src="$config[dir_core]jquery.jcontent.0.8.js"></script>
<script language="javascript" type="text/javascript">
$("document").ready(function(){
$("div#productsSlider").jContent({
orientation: 'horizontal',
width: "560",
duration: 2000,
auto: true,
direction: 'next',
pause_on_hover: true,
pause: 5000});
});


if( !empty( $config['slider_page'] ) && isset( $aData['iPage'] ) && $aData['iPage'] == $config['slider_page'] )
if( !isset( $oProduct ) ) ;


$oProduct = Products::getInstance( );
$oProduct->listProductsSlider( ); // products in slider

</script>


Please

cachousam

Avatar: cachousam

2013-02-27 21:06

Well token, where are you?
Nobody has succeeded to integrate this plugin in v3.7 or 4 or 5?
Publicity say in France: one day I would, I would.
I hope it will be the same for me for this plugin.
Thank you for your work, because I'm not at your level.
Dominique

cachousam

Avatar: cachousam

2013-03-02 10:58

Hello.
Nobody can really help me?
I have really make the most big work.
I'm sure someone could just tell me how to integrate the slider in the file container.tpl.
Thank you in advance.

cachousam

Avatar: cachousam

2013-03-03 18:22

Hello,
As I see nobody can help me to adjust the slider plugin in version 3.7, I wonder if it would be easier for programmers like you to explain to me how easily integrate a slider in my homepage on qc3 .7.
I would integrate product images manually.
No need to go through the admin, since it is so hard.I would do with coding.
I will be eternally grateful.
Dominique

cachousam

Avatar: cachousam

2013-03-03 22:08

I succeeded to do this with a single slider, but the encoding in the container.tpl remains a problem.

http://img138.imageshack.us/img138/3193/ecranslider.png

Here is the code that I put in template/container.tpl.

<style type="text/css">@import "$config[dir_templates]$config[template]";</style>
$sBanner
<!-- END HEAD -->
<!-- BEGIN BODY -->

<div id="slideshow">
<img src="images/118.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. image 1"/>
<img src="images/331.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. image 2" />
<img src="images/451.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. image 3" />
<img src="images/491.jpg" alt="lorem ipsum dolor site admet image 4" />
</div>
</head>
<body>



<div class="skiplink"><a href="#content" accesskey="2">$lang['Skip_navigation']</a></div>
<div id="container">
<div id="main">



In template/default.css i have put this:

#slideshow{
width:600px;
height:250px;
padding:8px;
margin:auto;
border: 1px solid #222;
background-color: #111;
background-image: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 8px #000;
-webkit-box-shadow: 0 1px 8px #000;
box-shadow: 0 1px 8px #000;
}

img{
border:solid 1px #111;
}

div.title{
margin:10px;
margin-top:-100px;
background:#000;
position:absolute;
opacity:0.8;
padding:10px;
color:#FFF;
font-size:18px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
position:relative;
}

.prev,.next{
position:relative;
padding:8px;
float:both;
margin:auto;
text-decoration:none;
color:#d3d3d3;
background-color: #111;
-moz-box-shadow: 0 0px 5px #000;
-webkit-box-shadow: 0 0px 5px #000;
box-shadow: 0 0px 5px #000;

}


Of course, I placed the two js files in core

Also, where is my mistake?

cachousam

Avatar: cachousam

2013-03-04 08:13

Hi,
This morning i have made a new try in template/page_default.tpl.
The result is better, but i still have that gray area at the top of the page and it is impossible to click on the buttons next and previous.
It seems to me that it is opening files javascript that does this.

here is the result:
http://img838.imageshack.us/img838/3043/sliderpagedefaulttpl.jpg

here is my code in template /page_default.tpl:

<!-- BEGIN CONTAINER -->
<div id="page">
$sTxtSize
$aImages[3]
$aImages[1]
$aImages[2]



<script type="text/javascript" src="$config[dir_core]jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="$config[dir_core]slideshow.js"></script>



<div id="slideshow">
<img src="images/118.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. image 1"/>
<img src="images/331.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. image 2" />
<img src="images/451.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. image 3" />
<img src="images/491.jpg" alt="lorem ipsum dolor site admet image 4" />
</div>



<h3>$aData[sName]</h3>
<div class="content" id="pageDescription">$aData[sDescriptionFull]</div>
$sPages
$sFilesList


The code in template /default.css stay the same.


We'll get there.
Help me in the final

cachousam

Avatar: cachousam

2013-03-07 07:56

Good afternoon.
I think I found the solution and especially my error.
In fact, I must write the css part in file templates / plugins.css.
Then I call the div in the file templates / container.tpl.
I have m adethis with easyslider but I still have this part gray.
Thank you for helping me to finalize.
Here is my coding plugins.css:

/* Easy Slider */

#slidercontainer body {
background:#fff url(images/bg_body.gif) repeat-x;
font:80% Trebuchet MS, Arial, Helvetica, Sans-Serif;
color:#333;
line-height:180%;
margin:0;
padding:0;
text-align:center;
}
#sliderslidercontainer h1{
font-size:180%;
font-weight:normal;
margin:0;
padding:0 20px;
}
#slidercontainer h2{
font-size:160%;
font-weight:normal;
}
#sliderslidercontainer h3{
font-size:140%;
font-weight:normal;
}
#sliderslidercontainer img{border:none;}
#slidercontainer pre{
display:block;
font:12px "Courier New", Courier, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9;
margin:.5em 0;
width:674px;
}

/* image replacement */
.graphic, #prevBtn, #nextBtn, #slider1prev, #slider1next{
margin:0;
padding:0;
display:block;
overflow:hidden;
text-indent:-8000px;
}
/* // image replacement */

/* Easy Slider */

#slider ul, #slider li,
#slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}
#slider2{margin-top:1em;}
#slider li, #slider2 li{
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width:696px;
height:241px;
overflow:hidden;
}
#prevBtn, #nextBtn,
#slider1next, #slider1prev{
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
top:71px;
z-index:1000;
}
#nextBtn, #slider1next{
left:696px;
}
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a{
display:block;
position:relative;
width:30px;
height:77px;
background:url(images/btn_prev.gif) no-repeat 0 0;
}
#nextBtn a, #slider1next a{
background:url(images/btn_next.gif) no-repeat 0 0;
}

/* numeric controls */

ol#controls{
margin:1em 0;
padding:0;
height:28px;
}
ol#controls li{
margin:0 10px 0 0;
padding:0;
float:left;
list-style:none;
height:28px;
line-height:28px;
}
ol#controls li a{
float:left;
height:28px;
line-height:28px;
border:1px solid #ccc;
background:#DAF3F8;
color:#555;
padding:0 10px;
text-decoration:none;
}
ol#controls li.current a{
background:#5DC9E1;
color:#fff;
}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}

/* // Easy Slider */


and my code in tempates/container.tpl:


</div>
<div id="head3">
$sMenu2
</div>



<div id="slidercontainer">
<div id="slider">
<ul>
<li><a href="/"><img src="images/01.jpg" alt="Premi&egrave;re image" /></a></li>
<li><a href="/"><img src="images/02.jpg" alt="Deuxi&egrave;me image" /></a></li>
<li><a href="/"><img src="images/03.jpg" alt="Troisi&egrave;me image" /></a></li>
<li><a href="/"><img src="images/04.jpg" alt="Quatri&egrave;me image" /></a></li>
<li><a href="/"><img src="images/05.jpg" alt="Cinqui&egrave;me image" /></a></li>
<li><a href="/"><img src="images/13.jpg" alt="sixieme image" /></a></li>
<li><a href="/"><img src="images/11.jpg" alt="septieme image" /></a></li>
<li><a href="/"><img src="images/12.jpg" alt="huitieme image" /></a></li>
</ul>
</div>
</div>






<div id="body">
<div id="column2">

thanks

cachousam

Avatar: cachousam

2013-03-07 15:27

I have seen that i have made a mistake in my below code.The right is: slidercontainer in css files and not sliderslidercontainer.
But it dont work always.
The forum is very dead at this time.
I know that the time is important,but i am sure that for you, my question is a kind play.
I promise you that i have made a big big job for try to integrate a slider in qc v3.7, but for the finish, i need for you.
I know very well your cms in 3.7, and my site is very nice i think, but my php and css knowledge are in learning.

thanks.

cachousam

Avatar: cachousam

2013-03-08 08:34

Please:

A littel gift for this week end?

Thanks

cachousam

Avatar: cachousam

2013-03-09 17:34

Hello,
I hope this week end, someone will dedicate myself a little time.
From the time that I try to incorporate a slider and a QC3.7 my many tests, my head will explode soon.
Here is my latest try appears near the solution.I use now your simpleslider plugin for qc6

http://cachousam1.free.fr/

Unfortunately, this part always dark at the top of the page.
The slider runs right as you see.
The problem is probably in the css.
Here is the code implemented.

in container.tpl in the head

<script type="text/javascript" src="$config['dir_plugins']jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="$config['dir_plugins']nivo-slider/jquery.nivo.slider.pack.js"></script>
<link rel="stylesheet" href=" $config['dir_plugins']nivo-slider/themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href=" $config['dir_plugins']nivo-slider/nivo-slider.css" type="text/css" media="screen" />

<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
</div>


In the body


<style type="text/css">@import "$config[dir_templates]$config[template]";</style>
$sBanner
<!-- END HEAD -->
<!-- BEGIN BODY -->


<div id="head3">
$sMenu2
</div>
<div id="content">
<div class="theme-default"><!-- SLIDER STARTS HERE -->
<div id="slider" class="nivoSlider">
<img src="$config['dir_files']/slider-1.jpg" alt="" title="I NEED OF YOUR KNOWLEDGE" /><!-- PUT YOUR IMAGES HERE -->
<img src="$config['dir_files']/slider-2.jpg" alt="fffffffffffff" title="PLEASE HELP ME" />
</div>

<div id="body">
<div id="column2">


In template/plugin.css at the top

*
Quick.Cart default plugins stylesheet
/*/
#content .theme-default .nivoSlider{width:766px;margin:0 auto;}
.theme-default .nivo-controlNav{padding:5px 0;}
@media print{ #content .theme-default{display:none;} }

Please be nice. Dominique from Lyon in France

cachousam

Avatar: cachousam

2013-03-22 16:01

Hello to all.
I finally managed to integrate the nivoslider in V3.7 QUICK CART.
I really was not far from the solution.
For those who are interrested, you can see the result here.
http://cachousam1.free.fr/
I have put at the head, below the menu 2 and page header.
Here's how to:
putting the image folder in the root of the site.
In the folder plugins put the folder nivo-slider.
In the folder templates put the files nivoslider.css.
Put the JS files in the folder plugins.
Edit the file templates / container.tpl and write these lines.

<script type="text/javascript" src="$config[dir_core]litebox-1.0.js"></script>


<script type="text/javascript" src="$config['dir_plugins']jquery-1.8.2.min.js"></script>
<link rel="stylesheet" href="$config[dir_templates]nivo-slider.css" type="text/css" media="screen" />
<script type='text/javascript' src="$config['dir_plugins']jquery.nivo.slider.pack.js"></script>


<script type="text/javascript" src="$config['dir_plugins']jquery.jcontent.0.8.min.js"></script>
<link rel="stylesheet" href="$config[dir_templates]jcontent.css" type="text/css" />



<script type="text/javascript">



jQuery.noConflict();

jQuery(window).load(function() {
jQuery('#slider').nivoSlider({controlNav: false});
jQuery('#slider2').nivoSlider({controlNav: false});


});

<!--
var cfBorderColor = "#d1bd9d";
var cfLangNoWord = "$lang[cf_no_word]";





Edit the file templates / default.css and write these lines. (I created 2 other div).




/* LOGO, HEADER BACKGROUND AND SLOGAN */
#head2{position:relative;float:left;width:100%;clear:both;height:170px;background:#422d1c url('img/carbone2.jpg') no-repeat;color:#fff;}
#logo{width:222px;padding:40px 0 0;}
#logo h1{float:right;width:100%;padding:12px 0 6px;text-align:center;font-size:1px;line-height:1px;}
#logo h2{clear:left;float:left;width:92%;padding:5px 7%;background:inherit;color:#f4dcbc;font:bold 0.9em Tahoma, sans-serif;}
* html #logo h2{width:100%;}


#head3{position:relative;float:left;width:320px;height:170px;}
#head4{position:relative;float:right;width:430px;height:170px;}


/* NAVIGATION PATH - TREE */
#navipath{position:absolute;top:150px;padding:0 0 0 5px;}
#navipath a{background-color:inherit;color:#fff;text-decoration:none;}
#navipath a:hover{text-decoration:underline;}

/* HEADER WITH TOP MENU UNDER LOGO */
#head5{float:left;width:100%;border-top:1px solid #ddd;background:#ded9d0 url('img/nav.gif');}




Edit the file templates / pages-default.tpl and write these lines.




<link rel="stylesheet" href="$config[dir_templates]jcontent.css" type="text/css" />
<script type="text/javascript">

jQuery.noConflict();

jQuery(window).load(function() {
jQuery('#slider3').nivoSlider({controlNav: false});

});

</script>






<div id="page">
$sTxtSize



<div class="slider-wrapper">
<div id="slider3" class="nivoSlider">
<img src="images/toystory.jpg" alt="I NEED OF YOUR KNOWLEDGE" />
<a href=""><img src="images/up.jpg" alt="PLEASE HELP ME" title="" /></a>
<img src="images/walle.jpg" alt="BE NICE WITH ME" title="" />
<img src="images/nemo.jpg" alt="" />
</div>
</div>




$aImages[3]
$aImages[1]




Enjoy

cachousam

Avatar: cachousam

2013-03-22 16:09

i have forgot in the file templates / container.tpl

the true code is:

in the <head>

<script type="text/javascript" src="$config[dir_core]litebox-1.0.js"></script>


<script type="text/javascript" src="$config['dir_plugins']jquery-1.8.2.min.js"></script>
<link rel="stylesheet" href="$config[dir_templates]nivo-slider.css" type="text/css" media="screen" />
<script type='text/javascript' src="$config['dir_plugins']jquery.nivo.slider.pack.js"></script>


<script type="text/javascript" src="$config['dir_plugins']jquery.jcontent.0.8.min.js"></script>
<link rel="stylesheet" href="$config[dir_templates]jcontent.css" type="text/css" />



<script type="text/javascript">



jQuery.noConflict();

jQuery(window).load(function() {
jQuery('#slider').nivoSlider({controlNav: false});
jQuery('#slider2').nivoSlider({controlNav: false});


});

<!--
var cfBorderColor = "#d1bd9d";
var cfLangNoWord = "$lang[cf_no_word]";




in the <body>

$sMenu1
</div>
<div id="head2">
<div id="head3">

<a href="$config['index']" tabindex="1"><img src="$config[dir_templates]img/sourire.jpg" alt="$config[title]" /></a>

</div>
<div id="head4">





<div class="slider-wrapper">
<div id="slider" class="nivoSlider">
<img src="images/toystory.jpg" alt="I NEED OF YOUR KNOWLEDGE" />
<a href=""><img src="images/up.jpg" alt="PLEASE HELP ME" title="" /></a>
<img src="images/walle.jpg" alt="BE NICE WITH ME" title="" />
<img src="images/nemo.jpg" alt="" />
</div>




</div>
</div>
</div>

<div id="navipath">$sPagesTree</div>

<div id="head5">



$sMenu2






<div class="slider-wrapper">
<div id="slider2" class="nivoSlider">
<img src="images/nemo.jpg" alt="I NEED OF YOUR KNOWLEDGE" />
<a href=""><img src="images/toystory.jpg" alt="PLEASE HELP ME" title="" /></a>
<img src="images/up.jpg" alt="BE NICE WITH ME" title="" />
<img src="images/walle.jpg" alt="" />
</div>
</div>








</div>
<div id="body">


<div id="column2">

Bye

Pages:
Back to top

Over 32 thousand websites based on Quick.Cart and Quick.Cms. See the most interesting ones...

  • Screenshot of website aparperfume.pl
  • Screenshot of website sportowcydzieciom.pl
  • Screenshot of website jezykipodroze.pl
  • Screenshot of website powiat-wieruszowski.pl
  • Screenshot of website 4carriers.com
about us | contact