[SOLVED]How to set the path for the slider background images in javascript file

Yii 1.1 General Discussion
1

Hello guys.

I am using a revolution slider in my project, in which the background images of the slider are set using javascript file.

So how can I set the path for that images because currently it is not displaying once I have convert the theme into yii.

How can we do this as we for images etc e.g.


<img src="<?php echo Yii::app()->theme->baseUrl; ?>/pic/logo.png" alt="">

here is javascript code


jQuery(document).ready( function (){

		window.slider_bg = {"ind":0, // index to start sliding at

							"source":["pic/slider/bg_slide1.jpg", //replace these slides with your own ones

									  "pic/slider/bg_slide2.jpg",

									  "pic/slider/bg_slide3.jpg",

									  "pic/slider/bg_slide4.jpg"],

							"bg_container":jQuery("#bg_container"),

							"bg_substrate":jQuery("#bg_substrate")};

		window.slider_bg.bg_container.css( "background-image","url(" + window.slider_bg.source[window.slider_bg.ind] + ")" );

	});

so how can I do this ?

Thanks in advance.

2

make sure you have the javascript on the same page where you have the html


// replace these slides with your own ones

"source":[

"<?php echo Yii::app()->theme->baseUrl; ?>/pic/slider/bg_slide1.jpg",

"<?php echo Yii::app()->theme->baseUrl; ?>/pic/slider/bg_slide2.jpg",

"<?php echo Yii::app()->theme->baseUrl; ?>/pic/slider/bg_slide3.jpg",

"<?php echo Yii::app()->theme->baseUrl; ?>/pic/slider/bg_slide4.jpg"

]
3

Actually the javascript code is in a separate file. with tons of code in that file.

4

you can move it in your html file wont be a problem

5

you don’t have to move the whole file just move this part


jQuery(document).ready( function (){

                window.slider_bg = {"ind":0, // index to start sliding at

                                                        "source":["pic/slider/bg_slide1.jpg", //replace these slides with your own ones

                                                                          "pic/slider/bg_slide2.jpg",

                                                                          "pic/slider/bg_slide3.jpg",

                                                                          "pic/slider/bg_slide4.jpg"],

                                                        "bg_container":jQuery("#bg_container"),

                                                        "bg_substrate":jQuery("#bg_substrate")};

                window.slider_bg.bg_container.css( "background-image","url(" + window.slider_bg.source[window.slider_bg.ind] + ")" );

        });

sari file nai paste karn bas ye oper wala section copy paste ker do

6

I had moved that part to the main file and it is working fine on local server, but doesn’t work on online server.

here is the code.


<script>

            jQuery(document).ready(function () {

                window.slider_bg = {"ind": 0, // index to start sliding at

                    "source": ["<?php echo Yii::app()->theme->baseUrl; ?>/pic/slider/bg_slide1.jpg", //replace these slides with your own ones

                        "<?php echo Yii::app()->theme->baseUrl; ?>/pic/slider/bg_slide2.jpg",

                        "<?php echo Yii::app()->theme->baseUrl; ?>/pic/slider/bg_slide3.jpg",

                        "<?php echo Yii::app()->theme->baseUrl; ?>/pic/slider/bg_slide4.jpg"],

                    "bg_container": jQuery("#bg_container"),

                    "bg_substrate": jQuery("#bg_substrate")};

                window.slider_bg.bg_container.css("background-image", "url(" + window.slider_bg.source[window.slider_bg.ind] + ")");

            });

        </script>
7

do you get any javascript errors check your browser console

8

Problem is now solved. there was the path problem online. Thanks a lot dear @alirz23 bhai