MyBB Community Forums

hello

i need help to install code jquery slideshow in my header

this file have inside the original code and all javascript files
[attachment=37512]

and xlmnxp in this post was gived me this code and not working or same thing missed i don't know

in headerinclude

<script src="http://mazikaat.eb2a.com/forums/js/jquery-1.11.3.min.js" type="text/javascript"></script>
    <script src="http://mazikaat.eb2a.com/forums/js/jssor.slider-21.1.5.mini.js" type="text/javascript"></script>
    <script type="text/javascript">
        jQuery(document).ready(function ($) {

            var jssor_1_options = {
              $AutoPlay: true,
              $SlideEasing: $Jease$.$InQuad,
              $ArrowNavigatorOptions: {
                $Class: $JssorArrowNavigator$,
                $ChanceToShow: 1
              },
              $BulletNavigatorOptions: {
                $Class: $JssorBulletNavigator$,
                $ActionMode: 3,
                $ChanceToShow: 1
              }
            };

            var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
        });

    </script>

in header

<style>
        /* jssor slider bullet navigator skin 01 css */
        /*
        .jssorb01 div           (normal)
        .jssorb01 div:hover     (normal mouseover)
        .jssorb01 .av           (active)
        .jssorb01 .av:hover     (active mouseover)
        .jssorb01 .dn           (mousedown)
        */
        .jssorb01 {
            position: absolute;
        }
        .jssorb01 div, .jssorb01 div:hover, .jssorb01 .av {
            position: absolute;
            /* size of bullet elment */
            width: 12px;
            height: 12px;
            filter: alpha(opacity=70);
            opacity: .7;
            overflow: hidden;
            cursor: pointer;
            border: #000 1px solid;
        }
        .jssorb01 div { background-color: gray; }
        .jssorb01 div:hover, .jssorb01 .av:hover { background-color: #d3d3d3; }
        .jssorb01 .av { background-color: #fff; }
        .jssorb01 .dn, .jssorb01 .dn:hover { background-color: #555555; }

        /* jssor slider arrow navigator skin 05 css */
        /*
        .jssora05l                  (normal)
        .jssora05r                  (normal)
        .jssora05l:hover            (normal mouseover)
        .jssora05r:hover            (normal mouseover)
        .jssora05l.jssora05ldn      (mousedown)
        .jssora05r.jssora05rdn      (mousedown)
        */
        .jssora05l, .jssora05r {
            display: block;
            position: absolute;
            /* size of arrow element */
            width: 40px;
            height: 40px;
            cursor: pointer;
            background: url('http://mazikaat.eb2a.com/forums/img/a17.png') no-repeat;
            overflow: hidden;
        }
        .jssora05l { background-position: -10px -40px; }
        .jssora05r { background-position: -70px -40px; }
        .jssora05l:hover { background-position: -130px -40px; }
        .jssora05r:hover { background-position: -190px -40px; }
        .jssora05l.jssora05ldn { background-position: -250px -40px; }
        .jssora05r.jssora05rdn { background-position: -310px -40px; }
    </style>
    <div id="jssor_1" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 600px; height: 150px; overflow: hidden; visibility: hidden;">
        <!-- Loading Screen -->
        <div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
            <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
            <div style="position:absolute;display:block;background:url('img/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div>
        </div>
        <div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: 600px; height: 150px; overflow: hidden;">
            <div data-p="93.75" style="display: none;">
                <a href="#">
                    <img data-u="image" src="http://mazikaat.eb2a.com/forums/img/06.jpg" />
                </a>
            </div>
            <div data-p="93.75" style="display: none;">
                <a href="#" target="_blank">
                    <img data-u="image" src="http://mazikaat.eb2a.com/forums/img/03.jpg" />
                </a>
            </div>
            <div data-p="93.75" style="display: none;">
                <a href="#" target="_blank">
                    <img data-u="image" src="http://mazikaat.eb2a.com/forums/img/04.jpg" />
                </a>
            </div>
            <div data-p="93.75" style="display: none;">
                <a href="#" target="_blank">
                    <img data-u="image" src="http://mazikaat.eb2a.com/forums/img/02.jpg" />
                </a>
            </div>
            <a data-u="any" href="http://www.jssor.com/magdydl/untitled.slider" style="display:none">jQuery Slider</a>
            <div data-p="93.75" style="display: none;">
                <a href="#" target="_blank">
                    <img data-u="image" src="http://mazikaat.eb2a.com/forums/img/001.jpg" />
                </a>
            </div>
        </div>
        <!-- Bullet Navigator -->
        <div data-u="navigator" class="jssorb01" style="bottom:16px;right:16px;" data-autocenter="1">
            <div data-u="prototype" style="width:12px;height:12px;"></div>
        </div>
        <!-- Arrow Navigator -->
        <span data-u="arrowleft" class="jssora05l" style="top:0px;left:8px;width:40px;height:40px;" data-autocenter="2"></span>
        <span data-u="arrowright" class="jssora05r" style="top:0px;right:8px;width:40px;height:40px;" data-autocenter="2"></span>
    </div>

any idea ?

no one know ? Huh

(2016-10-02, 01:14 AM)magdydl Wrote: [ -> ]hello

i need help to install code jquery slideshow in my header

this file have inside the original code and all javascript files

and xlmnxp in this post was gived me this code and not working or same thing missed i don't know

in headerinclude

<script src="http://mazikaat.eb2a.com/forums/js/jquery-1.11.3.min.js" type="text/javascript"></script>
    <script src="http://mazikaat.eb2a.com/forums/js/jssor.slider-21.1.5.mini.js" type="text/javascript"></script>
    <script type="text/javascript">
        jQuery(document).ready(function ($) {

            var jssor_1_options = {
              $AutoPlay: true,
              $SlideEasing: $Jease$.$InQuad,
              $ArrowNavigatorOptions: {
                $Class: $JssorArrowNavigator$,
                $ChanceToShow: 1
              },
              $BulletNavigatorOptions: {
                $Class: $JssorBulletNavigator$,
                $ActionMode: 3,
                $ChanceToShow: 1
              }
            };

            var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
        });

    </script>

in header

<style>
        /* jssor slider bullet navigator skin 01 css */
        /*
        .jssorb01 div           (normal)
        .jssorb01 div:hover     (normal mouseover)
        .jssorb01 .av           (active)
        .jssorb01 .av:hover     (active mouseover)
        .jssorb01 .dn           (mousedown)
        */
        .jssorb01 {
            position: absolute;
        }
        .jssorb01 div, .jssorb01 div:hover, .jssorb01 .av {
            position: absolute;
            /* size of bullet elment */
            width: 12px;
            height: 12px;
            filter: alpha(opacity=70);
            opacity: .7;
            overflow: hidden;
            cursor: pointer;
            border: #000 1px solid;
        }
        .jssorb01 div { background-color: gray; }
        .jssorb01 div:hover, .jssorb01 .av:hover { background-color: #d3d3d3; }
        .jssorb01 .av { background-color: #fff; }
        .jssorb01 .dn, .jssorb01 .dn:hover { background-color: #555555; }

        /* jssor slider arrow navigator skin 05 css */
        /*
        .jssora05l                  (normal)
        .jssora05r                  (normal)
        .jssora05l:hover            (normal mouseover)
        .jssora05r:hover            (normal mouseover)
        .jssora05l.jssora05ldn      (mousedown)
        .jssora05r.jssora05rdn      (mousedown)
        */
        .jssora05l, .jssora05r {
            display: block;
            position: absolute;
            /* size of arrow element */
            width: 40px;
            height: 40px;
            cursor: pointer;
            background: url('http://mazikaat.eb2a.com/forums/img/a17.png') no-repeat;
            overflow: hidden;
        }
        .jssora05l { background-position: -10px -40px; }
        .jssora05r { background-position: -70px -40px; }
        .jssora05l:hover { background-position: -130px -40px; }
        .jssora05r:hover { background-position: -190px -40px; }
        .jssora05l.jssora05ldn { background-position: -250px -40px; }
        .jssora05r.jssora05rdn { background-position: -310px -40px; }
    </style>
    <div id="jssor_1" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 600px; height: 150px; overflow: hidden; visibility: hidden;">
        <!-- Loading Screen -->
        <div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
            <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
            <div style="position:absolute;display:block;background:url('img/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div>
        </div>
        <div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: 600px; height: 150px; overflow: hidden;">
            <div data-p="93.75" style="display: none;">
                <a href="#">
                    <img data-u="image" src="http://mazikaat.eb2a.com/forums/img/06.jpg" />
                </a>
            </div>
            <div data-p="93.75" style="display: none;">
                <a href="#" target="_blank">
                    <img data-u="image" src="http://mazikaat.eb2a.com/forums/img/03.jpg" />
                </a>
            </div>
            <div data-p="93.75" style="display: none;">
                <a href="#" target="_blank">
                    <img data-u="image" src="http://mazikaat.eb2a.com/forums/img/04.jpg" />
                </a>
            </div>
            <div data-p="93.75" style="display: none;">
                <a href="#" target="_blank">
                    <img data-u="image" src="http://mazikaat.eb2a.com/forums/img/02.jpg" />
                </a>
            </div>
            <a data-u="any" href="http://www.jssor.com/magdydl/untitled.slider" style="display:none">jQuery Slider</a>
            <div data-p="93.75" style="display: none;">
                <a href="#" target="_blank">
                    <img data-u="image" src="http://mazikaat.eb2a.com/forums/img/001.jpg" />
                </a>
            </div>
        </div>
        <!-- Bullet Navigator -->
        <div data-u="navigator" class="jssorb01" style="bottom:16px;right:16px;" data-autocenter="1">
            <div data-u="prototype" style="width:12px;height:12px;"></div>
        </div>
        <!-- Arrow Navigator -->
        <span data-u="arrowleft" class="jssora05l" style="top:0px;left:8px;width:40px;height:40px;" data-autocenter="2"></span>
        <span data-u="arrowright" class="jssora05r" style="top:0px;right:8px;width:40px;height:40px;" data-autocenter="2"></span>
    </div>

any idea ?

no one know ? Huh

Have not had any time to look at your code but on the other hand just a tip: "nivo slider plays well with mybb"

Example:

[Image: 2nq8scz.png]

Download Here:
[attachment=37542]

Or for example a RTL version:

Update:

Noticed a minor issue when using the arabic language set with this the login sometimes fades under the slider so adding this to global.css seemed to solve it as a quick solution for now:

.nivoSlider {
 z-index: 1;
}


.modal {
 z-index: 69;
}

Download Here:

[attachment=37548]

Thank you that what i search for
but please edit this code for image 600 width x 150 height

/*
 * jQuery Nivo Slider v3.2
 * http://nivo.dev7studios.com
 *
 * Copyright 2012, Dev7studios
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 */
 
/* The Nivo Slider styles */
.nivoSlider {
	position:relative;
	width:100%;
	height:auto;
	overflow: hidden;
}
.nivoSlider img {
	position:absolute;
	top:0px;
	left:0px;
	max-width: none;
}
.nivo-main-image {
	display: block !important;
	position: relative !important; 
	width: 100% !important;
}

/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	border:0;
	padding:0;
	margin:0;
	z-index:6;
	display:none;
	background:white; 
	filter:alpha(opacity=0); 
	opacity:0;
}
/* The slices and boxes in the Slider */
.nivo-slice {
	display:block;
	position:absolute;
	z-index:5;
	height:100%;
	top:0;
}
.nivo-box {
	display:block;
	position:absolute;
	z-index:5;
	overflow:hidden;
}
.nivo-box img { display:block; }

/* Caption styles */
.nivo-caption {
	position:absolute;
	left:0px;
	bottom:0px;
	background:#000;
	color:#fff;
	width:100%;
	z-index:8;
	padding: 5px 10px;
	opacity: 0.8;
	overflow: hidden;
	display: none;
	-moz-opacity: 0.8;
	filter:alpha(opacity=8);
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}
.nivo-caption p {
	padding:5px;
	margin:0;
}
.nivo-caption a {
	display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
	position:absolute;
	top:45%;
	z-index:9;
	cursor:pointer;
}
.nivo-prevNav {
	left:0px;
}
.nivo-nextNav {
	right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
	text-align:center;
	padding: 15px 0;
}
.nivo-controlNav a {
	cursor:pointer;
}
.nivo-controlNav a.active {
	font-weight:bold;
}

(2016-10-04, 08:59 AM)magdydl Wrote: [ -> ]Thank you that what i search for
but please edit this code for image 600 width x 150 height

/*
 * jQuery Nivo Slider v3.2
 * http://nivo.dev7studios.com
 *
 * Copyright 2012, Dev7studios
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 */
 
/* The Nivo Slider styles */
.nivoSlider {
	position:relative;
	width:100%;
	height:auto;
	overflow: hidden;
}
.nivoSlider img {
	position:absolute;
	top:0px;
	left:0px;
	max-width: none;
}
.nivo-main-image {
	display: block !important;
	position: relative !important; 
	width: 100% !important;
}

/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	border:0;
	padding:0;
	margin:0;
	z-index:6;
	display:none;
	background:white; 
	filter:alpha(opacity=0); 
	opacity:0;
}
/* The slices and boxes in the Slider */
.nivo-slice {
	display:block;
	position:absolute;
	z-index:5;
	height:100%;
	top:0;
}
.nivo-box {
	display:block;
	position:absolute;
	z-index:5;
	overflow:hidden;
}
.nivo-box img { display:block; }

/* Caption styles */
.nivo-caption {
	position:absolute;
	left:0px;
	bottom:0px;
	background:#000;
	color:#fff;
	width:100%;
	z-index:8;
	padding: 5px 10px;
	opacity: 0.8;
	overflow: hidden;
	display: none;
	-moz-opacity: 0.8;
	filter:alpha(opacity=8);
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}
.nivo-caption p {
	padding:5px;
	margin:0;
}
.nivo-caption a {
	display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
	position:absolute;
	top:45%;
	z-index:9;
	cursor:pointer;
}
.nivo-prevNav {
	left:0px;
}
.nivo-nextNav {
	right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
	text-align:center;
	padding: 15px 0;
}
.nivo-controlNav a {
	cursor:pointer;
}
.nivo-controlNav a.active {
	font-weight:bold;
}

Cool, glad it helped. Happy editing...

Just for giggles, here is another different devel variant though not RTL:

[Image: 14dd409.png]

Download:
[attachment=37551]

thank you very much i found way to edit you'r jquery slideshow to be 600x150 in file css

thx for help again

Hi,
Can You Please to me, How to Add Extra Images to the Slider(Nivo-Dev Theme) ?

I tried.
But Failed.

(2016-11-15, 05:04 AM)soniagayathri Wrote: [ -> ]Hi,
Can You Please to me, How to Add Extra Images to the Slider(Nivo-Dev Theme) ?

I tried.
But Failed.

vintagedaddyo Wrote:

soniagayathri Wrote:Hi,I used your Nivo-Dev Theme..Its Awesome. By Default, It shows 4 Jpegs..I want to add 2 More Images with the Slider.Can You please tell me How to Add Extra Images to the Slider (Nivo-Dev Theme)??Thank You.By,SONIA

Greetings...,Thanks for the interest in the theme..., to answer your question..., adding more images is simple..., you need to edit two spots because there is the option to have two different sliders..., one on Index and one of Portal...., Anywhoo.......

"Index Page Templates"
Edit Template: index
Find:

<!-- Nivo slider--><div id="matinee"><div class="upper">  <div class="wrapper"><div class="slider-wrapper theme-default">  <div id="slider" class="nivoSlider"> <img src="themes/nivo-devel/slider/images/toystory.jpg" data-thumb="themes/nivo-devel/slider/images/toystory.jpg" alt="" /> <a href="#"> <img src="themes/nivo-devel/slider/images/up.jpg" data-thumb="themes/nivo-devel/slider/images/up.jpg" alt="" title="This is an example of a caption" /></a> <img src="themes/nivo-devel/slider/images/walle.jpg" data-thumb="themes/nivo-devel/slider/images/walle.jpg" alt="" data-transition="slideInLeft" /> <img src="themes/nivo-devel/slider/images/nemo.jpg" data-thumb="themes/nivo-devel/slider/images/nemo.jpg" alt="" title="#htmlcaption" /> </div>  <div id="htmlcaption" class="nivo-html-caption"> <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. </div></div></div>			</div>	</div><!--Nivo slider-->

after:

<img src="themes/nivo-devel/slider/images/nemo.jpg" data-thumb="themes/nivo-devel/slider/images/nemo.jpg" alt="" title="#htmlcaption" />

add for example:

<img src="themes/nivo-devel/slider/images/nemo.jpg" data-thumb="themes/nivo-devel/slider/images/nemo.jpg" alt="" title="#htmlcaption" />

and adjust to your needs...

"Portal Templates"
Edit Template: portal
Find:

<!-- Nivo slider--><div id="matinee"><div class="upper">  <div class="wrapper"><div class="slider-wrapper theme-default">  <div id="slider" class="nivoSlider"> <img src="themes/nivo-devel/slider/images/toystory.jpg" data-thumb="themes/nivo-devel/slider/images/toystory.jpg" alt="" /> <a href="#"> <img src="themes/nivo-devel/slider/images/up.jpg" data-thumb="themes/nivo-devel/slider/images/up.jpg" alt="" title="This is an example of a caption" /></a> <img src="themes/nivo-devel/slider/images/walle.jpg" data-thumb="themes/nivo-devel/slider/images/walle.jpg" alt="" data-transition="slideInLeft" /> <img src="themes/nivo-devel/slider/images/nemo.jpg" data-thumb="themes/nivo-devel/slider/images/nemo.jpg" alt="" title="#htmlcaption" /> </div>  <div id="htmlcaption" class="nivo-html-caption"> <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. </div></div></div>			</div>	</div><!--Nivo slider-->

after:

<img src="themes/nivo-devel/slider/images/nemo.jpg" data-thumb="themes/nivo-devel/slider/images/nemo.jpg" alt="" title="#htmlcaption" />

add for example:

<img src="themes/nivo-devel/slider/images/nemo.jpg" data-thumb="themes/nivo-devel/slider/images/nemo.jpg" alt="" title="#htmlcaption" />

and adjust to your needs...

magdydl

User 6029

magdydl

User 6029

magdydl

soniagayathri

User 6029