Jump to the post that solved this thread.
Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Solved: 2 Years, 8 Months, 2 Weeks ago install code jquery slideshow in my header
#1
Solved: 2 Years, 8 Months, 2 Weeks ago
hello

i need help to install code jquery slideshow in my header

this file have inside the original code and all javascript files

.zip   untitled.slider.jquery_2_2.zip (Size: 374.09 KB / Downloads: 55)

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 Dodgy Confused
Reply
#2
Solved: 2 Years, 8 Months, 2 Weeks ago
(10-02-2016, 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  Dodgy Confused


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:

.zip   Nivo_Dev.zip (Size: 654.42 KB / Downloads: 109)


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;
}


[Image: t0loub.png]

Download Here:


.zip   Nivo_RTL_Dev.zip (Size: 693.53 KB / Downloads: 91)
MyBB Themes Team - Making more professional themes by the hour. (Retired)
My Mods | Offer me a coffee!
Reply
#3
Solved: 2 Years, 8 Months, 2 Weeks ago
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;
}
Reply
#4
Solved: 2 Years, 8 Months, 2 Weeks ago
(10-04-2016, 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:

.zip   Nivo_Devel.zip (Size: 1.09 MB / Downloads: 83)
MyBB Themes Team - Making more professional themes by the hour. (Retired)
My Mods | Offer me a coffee!
Reply
#5
Solved: 2 Years, 8 Months, 2 Weeks ago
thank you very much i found way to edit you'r jquery slideshow to be 600x150 in file css

thx for help again
Reply
#6
Solved: 2 Years, 8 Months, 2 Weeks ago
Hi,
Can You Please to me, How to Add Extra Images to the Slider(Nivo-Dev Theme) ?

I tried.
But Failed.
Reply
#7
Solved: 2 Years, 8 Months, 2 Weeks ago
(11-15-2016, 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...
MyBB Themes Team - Making more professional themes by the hour. (Retired)
My Mods | Offer me a coffee!
Reply
Jump to the post that solved this thread.


Forum Jump:


Users browsing this thread: 1 Guest(s)