Supersized JS editošana

osC · July 13, 2012

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ā.

JSH · July 13, 2012

autoplay : 1

nepietiks ar

 autoplay: 0

?

Edited July 13, 2012 by JSH

y2ok · July 13, 2012

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.

osC · July 13, 2012

Hmm, nezinu vai to spēšu pats izdarīt, varbūt vari palīdzēt? :)

y2ok · July 13, 2012

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 July 13, 2012 by y2ok

xPtv45z · July 13, 2012

Tā nestrādās.

Konfigurācijā, tev jāliek autoplay = 0 un pēc tam spiežot uz bildes ir jāizmanto playtoggle - http://www.buildinternet.com/project/supersized/docs.html#api-playtoggle + protams pieliekot, lai uzspiežot atkārtoti uz bildes slideshow netiktu apstādināts.

y2ok · July 13, 2012

Paldies xPtv45z , par izlabošanu :)!

osC · July 13, 2012

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>

y2ok · July 13, 2012

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.

osC · July 13, 2012

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ī

<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.

osC · July 13, 2012

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?

y2ok · July 13, 2012

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'} ]   
 });    
});

osC · July 13, 2012

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.

y2ok · July 13, 2012

Query samaini uz jQuery vai $ .

Edited July 13, 2012 by y2ok

osC · July 13, 2012

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ā.

Sign In

Supersized JS editošana

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation