I'm trying to use Lightbox with my CodeIgniter application. Lightbox says to put the following in the head tag:
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
I already had a js folder and a css folder, so I put the js and css folders that came with lightbox within my js and css folder. I changed the 3 script tags and link tags to:
<script type="text/javascript" src="js/js/prototype.js"></script>
<script type="text/javascript" src="js/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/js/lightbox.js"></script>
<link rel="stylesheet" href="css/css/lightbox.css" type="text/css" media="screen" />
(added the /js and /css)
in the view file I have
<img name="<?php echo $row->Thumb;?>" src="http://www.doublediamondllc.com/uploaded/portfolio/thumbs/<?php echo $row->Thumb;?>" alt="">
This displays the thumbnail version, and then when clicked I want it to go to the lightbox, but now it goes to a new tab with the large image.
I've used lightbox before and have always gotten it to work, I'm not really sure what the problem is now, and I tried moving the files all around to different spots but nothing worked.
Thanks in advance!
It seems like the .js isn't getting loaded properly. Try using Firebug, and see if any errors pop up. Alternatively, check the links in the source for the page, and make sure they are pointing to the lightbox js files correctly. If you are using Firefox, view source; the links to the js files should appear as clickable links; click on them and make sure the js file appears, and not a 404 or some other error. Otherwise copy and paste the link attributes to your browser and check the .js paths are correct.
Related
I have php scripts in my website and at the top of the page css and js are being loaded like below
<link href="css/pageLayout.css?version=4" rel="stylesheet" type="text/css" media="screen,print">
<link href="css/style.css?version=4" rel="stylesheet" type="text/css" media="screen,print">
<script src="validation.js?version=4" type="text/javascript"></script>
<script src="numcheck.js?version=4" type="text/javascript"></script>
But when I view source of my page the links are like below
<link href="css/pageLayout.css,qv==4+style.css,qv==4.pagespeed.cc.E_3tcdStoh.css" rel="stylesheet" type="text/css" media="screen,print">
<script src="Script/validation.js,qv==4+numcheck.js,qv==4.pagespeed.jc.-0oIAICDu_.js"></script>
It seems someone/something is putting all my files together, must be some component in either the server or the browser, but I can't seem to find it.
At first, it works without any problem, so I didn't notice. But after a few days these put together files are not found anymore and returns 401 not found, and none of the css and js works anymore.
It works again if I change the link of the file by changing the version number version, but returns after a few days. Any idea what might be the reason?
I setup bootstrap files in public folder. Routes are as below:
<link rel="stylesheet" href="{{url('assets/css/bootstrap.min.css')}}">
<script type="text/javascript" src="{{url('assets/js/bootstrap.min.js')}}"></script>
<script type="text/javascript" src="{{url('assets/js/jquery.min.js')}}"></script>
<script type="text/javascript" src="{{url('assets/js/tether.min.js')}}"></script>
no problem with this. I can see connection to files when I check the source code. and also bootstrap fonts are active but, when I try to copy some examples from bootstrap website. It doesn't display properly. For example I copied navigation bar to my main.blade But it doesn't show up.
What is causing this? Any idea?
It s big screen but showing responsive hamburger icon?
You should add jquery before bootstrap min js file
<link rel="stylesheet" href="{{url('assets/css/bootstrap.min.css')}}">
<script type="text/javascript" src="{{url('assets/js/jquery.min.js')}}"></script>
<script type="text/javascript" src="{{url('assets/js/tether.min.js')}}"></script>
<script type="text/javascript" src="{{url('assets/js/bootstrap.min.js')}}"></script>
The order in which you add javascript in HTML page is important. In this case since bootstrap.min.js uses jquery.min.js jquery must be added first. So when bootstrap loads and looks for jquery it finds it.
But if one script does not depend on another then you can add them in any order.
So add jquery.min.js first then anything that uses jquery(like bootstrap) after it.
I have a laravel project and just wanted to use a simple timer jquery script in it. I created a new folder in views, placed there my code. I also placed there another folder called flip_timer with jquery files.
My problem is that i cannot make the script paths work "not found http exception".
Folder structure looks like this: folder in views > contains file(code below) and folder including all the needed files. Whenever i try to run the link with code the page is empty, and when i click to see the source code and click on the css or js link it shows me the error i mentioned above...
<link rel="stylesheet" type="text/css" href="flip_timer/jquery.flipcountdown.css" />
<script type="text/javascript" src="flip_timer/jquery.min.js"></script>
<script type="text/javascript" src="flip_timer/jquery.flipcountdown.js"></script>
<div id="retroclockbox1">
<script>
jQuery(function($){
$('#retroclockbox1').flipcountdown();
})
</script>
</div>
put your jquery.flipcountdown.css file in inside css folder named: css/flip_timer/jquery.flipcountdown.css
AND
your both js file inside js folder named:js/flip_timer/jquery.min.js and js/flip_timer/jquery.flipcountdown.js and then put below code in your html file.
<link rel="stylesheet" href="{{ URL::asset('css/flip_timer/jquery.flipcountdown.css') }}" />
AND for js file
<script type="text/javascript" src="{{ URL::asset('js/flip_timer/jquery.min.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('js/flip_timer/jquery.flipcountdown.js') }}"></script>
I am trying to include these files from google API, but when I run my file I can't > find them including in the head of the file
<link href='http://fonts.googleapis.com
/css?family=Ubuntu:300,400,500,700,300italic,400italic,500italic,700italic'
rel='stylesheet' type='text/css'>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0
/jquery.min.js"></script>
Open the link
http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700,300italic,400italic,500italic,700italic
in the browser
Do a 'save as' on the resulting webpage that contains the media css.
Assuming you have saved it as 'file.css'
<link href='file.css' rel='stylesheet' type='text/css'>
Do the same for the 'jquery.min.js' file and change you script tag as follows:Assuming you have saved it as 'file.js'
<script type="text/javascript" src="file.js"></script>
This way you have both the files locally and don't have to depend on the internet to download them every time.
ive downloaded a javascript gallery window called facybox: http://bitbonsai.com/facybox/
I've followed the tutorial and now i'm trying to get my photo's to open in this but instead the images are just opening in a new window.
can someone correct me where i'm going wrong please? I suspect i'm missing a vital component somewhere that points it to the facybox directory but i've tried a couple things and no luck.
<?php
$get_photos_set = get_photos();
while ($photos = mysql_fetch_array($get_photos_set)) {
if(!isset($get_photos_set) || $get_photos_set===false)
echo "No Results";
else
if (logged_in()) {
echo
"<li><img src=\"data/photos/{$photos['user_id']}/thumb_{$photos['file_name']}\" alt=\"{$profile[2]}'s Photos\" /></li>";
}
}
?>
From what I can gather from your example you probably don't even have a valid html page. I would suggest opening the "index.html" file that comes with facybox and examine how it works, what are the requirements for it to work etc. Or try removing stuff on it until you're down to 1 working example.
From their wiki you would need to load jquery as one of the dependencies, this would go to the section of your page.
<!-- This gets the latest jQ 1.x from google, minified and gziped -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<link href="facybox.css" media="screen" rel="stylesheet" type="text/css"/>
<link href="facybox_urls.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="facybox.js" type="text/javascript"></script>
Also to use it, your links should somewhat resemble this
<img src="pic.jpg" />