Jump to content
php.lv forumi

Supersized JS editošana


osC

Recommended Posts

Sveiki,

Vēlējos pajautāt, kā var apstādināt supersized plugina pirmo slaidu, lai nebūtu tas slideshow visu laiku? Vajag tā, lai kad ieiet mājaslapā tā pirmā bilde neietu pa slideshow un būtu vispār viena bilde tikai kā background. Un kad uzspiež citu bildi aiziet supersized slideshow skripts. (mājaslapa šeit)

 

Iekopēšu pašu skripta koda apakšu.

 

/* Default Options
----------------------------*/
$.supersized.defaultOptions = {

	// Functionality
 slideshow           	:   1,   // Slideshow on/off
 autoplay	: 1,   // Slideshow starts playing automatically
 start_slide         	:   1,   // Start slide (0 is random)
 stop_loop	: 1,   // Stops slideshow on last slide
 random 	:  0,   // Randomize slide order (Ignores start slide)
 slide_interval      	:   5000,  // Length between transitions
 transition          	:   1,	// 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
 transition_speed  : 750,  // Speed of transition
 new_window	: 1,   // Image links open in new window/tab
 pause_hover         	:   0,   // Pause slideshow on hover
 keyboard_nav        	:   1,   // Keyboard navigation on/off
 performance	: 1,   // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed //  (Only works for Firefox/IE, not Webkit)
 image_protect   : 1,   // Disables image dragging and right click with Javascript

 // Size & Position
 fit_always	: 0,   // Image will never exceed browser width or height (Ignores min. dimensions)
 fit_landscape   :   0,   // Landscape images will not exceed browser width
 fit_portrait      	:   1,   // Portrait images will not exceed browser height       
 min_width      	:   0,   // Min width allowed (in pixels)
 min_height      	:   0,   // Min height allowed (in pixels)
 horizontal_center   	:   1,   // Horizontally center background
 vertical_center     	:   1,   // Vertically center background


 // Components      
 slide_links	: 1,   // Individual links for each slide (Options: false, 'num', 'name', 'blank')
 thumb_links	: 1,   // Individual thumb links for each slide
 thumbnail_navigation	:   0   // Thumbnail navigation

};

 

 

Šeit arī viss supersized skripts

 

Kā arī pirmajā sākumlapā var redzēt ka pirmā bilde ir kautkāda galīgi random, nav pirmā.

Link to comment
Share on other sites

Ar autoplay: 0, tiks apstādināts tikai slaidu automātiska maiņa. Lai pieliktu klāt, ka pēc citas bildes uzspiešanas atkal ieslēdzas autoplay, tev vajadzēs uztaisīt kaut kādu jQuery click eventu, uz bildes ar noteiktu class/id, un pēc šī click event notikšanas pārmaini autoplay value.

 

Neesmu mēģinājis, bet vajadzētu strādāt.

Link to comment
Share on other sites

Pieliec visām bildēm klasi autoPlayStart (visām izņemot pirmo bildi). Tālāk opcijās -

 

autoplay: autoplayValue,

 

Tālāk pirms supersized koda uzstādīšanas iemet šo kodu -

 

jQuery(document).ready(function() {
 var autoplayValue = 0;
 if(jQuery(".autoPlayStart").click()) {
autoplayValue = 1;
 }
});

 

Vēlreiz saku - neesmu testējis, bet nu it kā vajadzētu iet.

Edited by y2ok
Link to comment
Share on other sites

Laikam sapratu.

Bet tagad izdomāju tā, ka nevajag to.

 

Tagad man vajag tā:

Kad ieiet index.html lapā, tas supersized skripts vispār nebūtu. Respektīvi, lai tas slideshow nebūtu un būtu tikai viena background bilde pa visu ekrānu. Bet kad spiedīs uz citām lapām (piem. daba.html) tad atkal slideshow aizietu.

 

Saprotu ka tagad būtu ar pašu index.html jādarbojas, vaine?

Tātad arī kods:

<!DOCTYPE HTML>
<html lang="lv">
<head>
<meta charset="UTF-8">
<title>JZ Foto ©</title>
<link rel="stylesheet" href="css/reset.css" media="screen" />
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/supersized.css" media="screen" />
<link rel="stylesheet" href="theme/supersized.shutter.css" media="screen" />
<link rel="stylesheet" href="css/fonts/nid2/style.css" media="screen" />
<link rel="stylesheet" href="css/style.css" media="all" />
</head>
<body>
<script>
 var slides_config = {
  name: '01',
  count: 10
 };
</script>
<header class="header_main">
 <div class="logo"><a href="index.html"><img src="images/logo.png" alt="Logo" /></a></div>
 <div class="header_gal on">
  <div class="galleries">
<ul class="gallery_list">
	<li class="gallery_list_item"><a class="gallery_link active" href="cilveks.html">Cilvēki</a></li>
	<li class="gallery_list_item"><a class="gallery_link" href="daba.html">Daba</a></li>
	<li class="gallery_list_item"><a class="gallery_link" href="sports.html">Sports</a></li>
</ul>
<ul class="gallery_list">
	<li class="gallery_list_item"><a class="gallery_link" href="svinibas.html">Svinības</a></li>
	<li class="gallery_list_item"><a class="gallery_link" href="objekti.html">Objekti</a></li>
</ul>
  </div>
  <div class="galleries_switch">
<div class="p1"></div>
<div class="p2"></div>
<div class="p3"></div>
  </div>
 </div>
</header>
<header class="header_images off">
 <a href="#" class="gallery_image_btn"></a>
 <div class="gallery_images">
  <div class="gallery_controls">
<a class="control" href="javascript:{}"><img id="pauseplay" src="images/play.png" class="control" alt="Pause/Play" /></a>
<a class="control down" href="#"></a>
<a class="control up" href="#"></a>
  </div>
  <div class="gallery_thumbs" id="thumb-tray">
  </div>
 </div>
</header>
<footer class="footer_main">
 <nav>
  <ul class="menu">
<li class="menu_item"><a class="menu_item_link active" href="index.html">SĀKUMS</a></li>
<li class="menu_item"><a class="menu_item_link" href="par-mani.html">PAR MANI</a></li>
<li class="menu_item"><a class="menu_item_link" href="kontakti.html">Kontakti</a></li>
  </ul>
 </nav>
 <ul class="socials">
  <li class="social_item"><a class="social_item_link fb" href="#"></a></li>
  <li class="social_item"><a class="social_item_link tw" href="#"></a></li>
  <li class="social_item"><a class="social_item_link fl" href="#"></a></li>
 </ul>
 <div class="content_toggle"></div>
 <div class="copyright">
  © 2012 JZ Foto. Visas tiesības paturētas.
  </div>
</footer>
<!--Time Bar-->
<div id="progress-back" class="load-item">
 <div id="progress-bar"></div>
</div>
<script src="js/jquery-1.7.min.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/supersized.3.2.5.js"></script>
<script src="theme/supersized.shutter.js"></script>
<script src="js/run.js"></script>
<!--[if lt IE 9]>
<script src="js/ie_suxx.js"></script>
<![endif]-->
  	<!-- Start of StatCounter Code for Default Guide -->
<a title="godaddy counter"
href="http://statcounter.com/godaddy_website_tonight/"
target="_blank"><img
src="http://c.statcounter.com/7408043/0/33cb7595/1/"
alt="godaddy counter" style="border:none;"></a>
<!-- End of StatCounter Code for Default Guide -->
</body>
</html>

Link to comment
Share on other sites

Tur, kur tu definē kādas bildes būs supersized lapā, vienkārši izņem visas pārējās un atstāj tikai vienu, to, kuru tu gribi sākumlapā. Ja nu gadījumā, tev viņšir kādā failā, kuru includo citos failos arī, tad uztaisi jaunu priekš index.html vai arī ieliec to kodu pa taisno zem <script type="text/javascript"></script> tagiem.

Link to comment
Share on other sites

Tur, kur tu definē kādas bildes būs supersized lapā, vienkārši izņem visas pārējās un atstāj tikai vienu, to, kuru tu gribi sākumlapā. Ja nu gadījumā, tev viņšir kādā failā, kuru includo citos failos arī, tad uztaisi jaunu priekš index.html vai arī ieliec to kodu pa taisno zem <script type="text/javascript"></script> tagiem.

 

ok, index.html lapā izdzēsu

<header class="header_images off">
 <a href="#" class="gallery_image_btn"></a>
 <div class="gallery_images">
  <div class="gallery_controls">
   	<a class="control" href="javascript:{}"><img id="pauseplay" src="images/play.png" class="control" alt="Pause/Play" /></a>
   	<a class="control down" href="#"></a>
   	<a class="control up" href="#"></a>
  </div>
  <div class="gallery_thumbs" id="thumb-tray">
  </div>
 </div>
</header>

 

un arī

<pre class="prettyprint">

<script src="js/jquery-1.7.min.js"></script><script src="js/jquery.cookie.js"></script><script src="js/jquery-ui-1.8.16.custom.min.js"></script><script src="js/jquery.easing.1.3.js"></script><script src="js/supersized.3.2.5.js"></script><script src="theme/supersized.shutter.js"></script><script src="js/run.js"></script>

</pre>

Tagad ir tākā gribēju, bet ir vēlviena problēma. Kāpēc man nesanāk uzlikt background?

Background man vajadzīgs tikai tajai index.html lapai, tāpēc izmantoju

<body style="background-image:url(images/background.png)">

 

Kādā izmērā jābūt background lai rādītos uz visiem browseriem pa pilnu ekrānu? Pašlaik ir 2900x1900, bet tas ir laikam šausmīgi milzīgs.

Link to comment
Share on other sites

Ok, tomēr sataisīju background css'ā šādi:

body {
 background-image: url("http://jzstudio.lv/images/background.jpg");
 background-repeat: no-repeat;
}

 

Tikai tagad ir problēma tāda, ka tā bilde ir ļoti milzīga, ir iespējams viņu sataisīt tā, lai būtu pilnā izmērā uz visu izšķirtspēju monitoriem un browseriem?

Link to comment
Share on other sites

Nu supersized scriptam to it kā jau vajadzētu darīt.

 

Rekur ir piemērs, kurš jaincludo starp <script> tagiem un tikai pēc jQuery un supersized ielādēšanas -

 

Query(function($){       
 $.supersized({    
	slides  :   [ {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-1.jpg', title : 'Image Credit: Maria Kazvan'} ]   
 });    
});

Link to comment
Share on other sites

Body jāliek tač vaine?

Ieliku

<body>


 <script>
Query(function($){  	 
 $.supersized({    
   	slides  :   [ {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-1.jpg', title : 'Image Credit: Maria Kazvan'} ]   
 });    
});
</script>
</body>

Bet nav background bildes, viss melns.

Link to comment
Share on other sites

Nekādīgi nesanāk..

Vienkāršāk nebūtu sataisīt background image ar css :)

Tikai problēma tāda, ka bilde ir pārāk milzīga un neietilpst ekrānā.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...