ACCES INTERZIS » jQuery http://www.accesinterzis.ro Just another WordPress weblog Thu, 14 Oct 2010 01:05:26 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 Cum implementez plugin-ul jQuery YoxView intr-o pagina web? http://www.accesinterzis.ro/index.php/programare/cum-implementez-plugin-ul-jquery-yoxview-intr-o-pagina-web-2/ http://www.accesinterzis.ro/index.php/programare/cum-implementez-plugin-ul-jquery-yoxview-intr-o-pagina-web-2/#comments Fri, 19 Mar 2010 14:59:47 +0000 admin http://www.accesinterzis.ro/?p=397 Articole asemanatoare:]]> Descarc fisierele plugin-ului. Dezarhivez .zip-ul. Bag folderul yoxview in folderul js din root-ul site-ului. In folderul js se afla, de asemenea, si jquery1.4.2.js, fisierul cu libraria jQuery. Sterg yoxview-nojquery.js, jquery-1.4.2.min.js, jquery.jsonp-1.0.4.min.js, jquery.yoxview-1.1.min.js.
Modific yoxview-init.js in:

var _yoxviewPath = getYoxviewPath();

document.write('<link rel="Stylesheet" type="text/css" href="' + _yoxviewPath + 'yoxview.css" />');

function LoadScript( url )
{
	document.write( '<scr' + 'ipt type="text/javascript" src="' + url + '"><\/scr' + 'ipt>' ) ;
}
LoadScript(_yoxviewPath + "jquery.timers-1.2.min.js");
LoadScript(_yoxviewPath + "jquery.yoxview-1.1.js");

function getYoxviewPath()
{
    var scripts = document.getElementsByTagName("script");
    var regex = /(.*\/)yoxview.*/i;
    for(var i=0; i<scripts.length; i++)
    {
        var currentScriptSrc = scripts[i].src;
        if (currentScriptSrc.match(regex))
        return currentScriptSrc.match(regex)[1];
    }

    return null;
}

Din folderul lang pot sterge toate fisierele in afara de en.js.
Dupa toate astea, folderul yoxview (care asa cum am zis se afla in folderul js din root-ul site-ului) va arata asa:
Cum implementez plugin-ul jQuery YoxView intr-o pagina web?
In acest fel ma scap de fisiere inutile. Nu are sens sa ocup spatiu pe server aiurea.
Acum nu imi mai ramane decat sa implementez plugin-ul in pagina mea web.

index.php

<?php include('includes/functions.inc.php'); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cum implementez YoxView intr-o pagina web?</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Cum implementez YoxView intr-o pagina web?" />
<meta name="keywords" content="Cum implementez YoxView intr-o pagina web?" />
<meta name="abstract" content="Cum implementez YoxView intr-o pagina web?" />
<meta name="author" content="AccesInterzis" />
<meta name="copyright" content="AccesInterzis" />
<meta name="robots" content="noindex,nofollow" />
<meta name="revisit-after" content="7 days" />
<meta http-equiv="cache-control" content="no-cache">

<script type="text/javascript" src="js/jquery1.4.2.js"></script>

<!--**********Begin - jQuery YoxView**********-->
<script type="text/javascript" src="js/yoxview/yoxview-init.js"></script>
<script language="javascript" type="text/javascript">
    $(document).ready(function(){
        $("#gallery").yoxview();
	});
</script>
<!--**********End - jQuery YoxView**********-->

<style type="text/css">
* {
	margin:0;
	padding:0;
	outline:none;
}

html {
	color:black;
	background-color:white;
	font: normal normal normal 12px  Verdana;
	/*font-style font-variant font-weight font-size font-family*/
}

img {
	border:none;
}

ul#gallery {
	overflow:hidden;
	list-style-type:none;
	width:1000px;
	margin:10px auto;
}

ul#gallery li {
	float:left;
	margin-right:5px;
}
</style>
</head>

<body>
<ul id="gallery">
	<?php
	$pictures = read_images('images/thumbs', array('.jpg', '.jpeg'), 120, 120, 120, 120, 0, 10000);
	for ($i = 0; $i < 8; $i++) {
		echo '<li>';
		echo '<a href="images/big-ones/'.$pictures[$i].'">';
		echo '<img src="images/thumbs/'.$pictures[$i].'" alt="" title="'.$pictures[$i].'" />';
		echo '</a>';
		echo '</li>'."\r\n";
	}
	?>
</ul>
</body>
</html>

Cu ajutorul functiei PHP read_images() citesc dinamic thumbnail-urile de pe server.

Post to Twitter Publica acest articol pe Twitter

Articole asemanatoare:

]]> http://www.accesinterzis.ro/index.php/programare/cum-implementez-plugin-ul-jquery-yoxview-intr-o-pagina-web-2/feed/ 0 Cum implementez plugin-ul jQuery LightBox intr-o pagina web? http://www.accesinterzis.ro/index.php/programare/cum-implementez-plugin-ul-jquery-lightbox-intr-o-pagina-web-2/ http://www.accesinterzis.ro/index.php/programare/cum-implementez-plugin-ul-jquery-lightbox-intr-o-pagina-web-2/#comments Fri, 19 Mar 2010 14:59:24 +0000 admin http://www.accesinterzis.ro/?p=398 Articole asemanatoare:]]> Descarc fisierele plugin-ului. Dezarhivez .zip-ul. Iau jquery.lightbox-0.5.js si il bag in folderul js din root-ul site-ului. In folderul js se afla, de asemenea, si fisierul care contine libraria jQuery. jquery.lightbox-0.5.css il bag in folderul css din root-ul site-ului. In folderul images din root-ul site-ului creez un folder lb-btns in care voi baga imaginile cu butoanele LightBox-ului din folderul images. Acum am grija sa modific chemarile butoanelor in fisierul jquery.lightbox-0.5.js de la linia 30 la 34.

Acum nu imi mai ramane decat sa implementez plugin-ul in pagina mea web.

index.php

<?php include('includes/functions.inc.php'); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cum implementez plugin-ul jQuery LightBox intr-o pagina web?</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Cum implementez plugin-ul jQuery LightBox intr-o pagina web?" />
<meta name="keywords" content="Cum implementez plugin-ul jQuery LightBox intr-o pagina web?" />
<meta name="abstract" content="Cum implementez plugin-ul jQuery LightBox intr-o pagina web?" />
<meta name="author" content="AccesInterzis" />
<meta name="copyright" content="AccesInterzis" />
<meta name="robots" content="noindex,nofollow" />
<meta name="revisit-after" content="7 days" />
<meta http-equiv="cache-control" content="no-cache">

<script type="text/javascript" src="js/jquery1.4.2.js"></script>

<!--**********Begin - jQuery LightBox**********-->
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript">
$(function() {
    $('#gallery a').lightBox();
});
</script>
<!--**********End - jQuery LightBox**********-->

<style type="text/css">
* {
	margin:0;
	padding:0;
	outline:none;
}

html {
	color:black;
	background-color:white;
	font: normal normal normal 12px  Verdana;
	/*font-style font-variant font-weight font-size font-family*/
}

img {
	border:none;
}

ul#gallery {
	overflow:hidden;
	list-style-type:none;
	width:1000px;
	margin:10px auto;
}

ul#gallery li {
	float:left;
	margin-right:5px;
}
</style>
</head>

<body>
<ul id="gallery">
	<?php
	$pictures = read_images('images/thumbs', array('.jpg', '.jpeg'), 120, 120, 120, 120);
	for ($i = 0; $i < 8; $i++) {
		echo '<li>';
		echo '<a href="images/big-ones/'.$pictures[$i].'">';
		echo '<img src="images/thumbs/'.$pictures[$i].'" alt="" />';
		echo '</a>';
		echo '</li>'."\r\n";
	}
	?>
</ul>
</body>
</html>

Cu ajutorul functiei PHP read_images() citesc dinamic thumbnail-urile de pe server.

Post to Twitter Publica acest articol pe Twitter

Articole asemanatoare:

]]> http://www.accesinterzis.ro/index.php/programare/cum-implementez-plugin-ul-jquery-lightbox-intr-o-pagina-web-2/feed/ 0 Cum fac un slider de imagini in jQuery si PHP? http://www.accesinterzis.ro/index.php/programare/cum-fac-un-slider-de-imagini-in-jquery-si-php/ http://www.accesinterzis.ro/index.php/programare/cum-fac-un-slider-de-imagini-in-jquery-si-php/#comments Wed, 17 Mar 2010 19:08:19 +0000 admin http://www.accesinterzis.ro/?p=373 Articole asemanatoare:]]> UPDATED ARTICLE

Probabil toata lumea stie cum se realizeaza in jQuery un slider. E destul de simplu. Incarcam fisierul jQuery in pagina si plugin-ul jQuery pentru realizarea sliderului. Putem prezenta in slider nu numai imagini ci si orice fel de continut de la texte la video.

index.php

<?php include('includes/functions.inc.php'); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cum fac un slider de imagini in jQuery si PHP?</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Cum fac un slider de imagini in jQuery si PHP?" />
<meta name="keywords" content="Cum fac un slider de imagini in jQuery si PHP?" />
<meta name="abstract" content="Cum fac un slider de imagini in jQuery si PHP?" />
<meta name="author" content="AccesInterzis" />
<meta name="copyright" content="AccesInterzis" />
<meta name="robots" content="noindex,nofollow" />
<meta name="revisit-after" content="7 days" />

<script type="text/javascript" src="js/jquery1.4.2.js"></script>

<!--**********Begin - jQuery slider**********-->
<script type="text/javascript" src="js/easy-slider1.5.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#slider").easySlider({
		auto: true,
		continuous: true
	});
});
</script>
<!--**********End - jQuery slider**********-->

<style type="text/css">
* {
	margin:0;
	padding:0;
	outline:none;
}

html {
	color:black;
	background-color:white;
	font: normal normal normal 12px  Verdana;
	/*font-style font-variant font-weight font-size font-family*/
}

/***********Begin - jquery slider***********/

div#container {
	position:relative;
	width:605px;
	margin:0 auto;
}

div#container div#slider ul {
	list-style:none;
}

div#container div#slider li {
	/*
	define width and height of list item (slide)
	entire slider area will adjust according to the parameters provided here
	*/
	width:605px;
	height:270px;
	overflow:hidden;
}

div#container #prevBtn, div#container #nextBtn {
	display:block;
	width:13px;
	height:20px;
	position:absolute;
	top:275px;
}

div#container #prevBtn {
	left:0px;
}

div#container #nextBtn {
	left:587px;
}

div#container #prevBtn a, div#container #nextBtn a {
	display:block;
	width:13px;
	height:20px;
}

div#container #prevBtn a {
	background:url(images/prev-btn.png) no-repeat 0 0;
}

div#container #nextBtn a {
	background:url(images/next-btn.png) no-repeat 0 0;
}

div#container .graphic, div#container #prevBtn, div#container #nextBtn {
    display:block;
    overflow:hidden;
    text-indent:-8000px;
}

/***********End - jquery slider***********/

</style>
</head>

<body>
<div id="container">
	<div id="slider">
		<ul>
			<?php
			$slides = read_images('images/slides', array('.jpg', '.jpeg'), 600, 600, 270, 270);
			foreach ($slides as $slide) {
				echo '<li>';
				echo '<img src="images/slides/'.$slide.'" alt="" />';
				echo '</li>'."\r\n";
			}

			?>
			<li style="text-align:center; font-size:24px; color:#c00; padding-top:50px;">In slider putem sa punem orice fel de continut dorim: imagini, text, video. Acest continut poate fi citit dintr-o baza de date.</li>
		</ul>
	</div>
</div>
</body>
</html>

Cu ajutorul functiei PHP read_images() citesc dinamic thumbnail-urile de pe server.

Sliderul poate fi folosit la fel de bine si ca sectiune de stiri in care se incarca dintr-o baza de date ultimele stiri.

Post to Twitter Publica acest articol pe Twitter

Articole asemanatoare:

]]> http://www.accesinterzis.ro/index.php/programare/cum-fac-un-slider-de-imagini-in-jquery-si-php/feed/ 0