javascript - How to insert array of images into swipebox gallery? -

-

this html code:

    <div class="profile-gallery">         <div class="profile-gallery_top js-bigimg">             <a href="img/bigimg1.jpg" class="swipebox">                 <img class="profile-bigimage" src="img/bigimg.jpg" alt=""/>             </a>         </div>         <ul class="profile-thumbs">             <li><img src="img/imgthmubs1.jpg" data-bigimage="img/bigimg1.jpg" data-original="img/origimg1.jpg" alt=""/></li>             <li><img src="img/imgthmubs2.jpg" data-bigimage="img/bigimg2.jpg" data-original="img/origimg2.jpg" alt=""/></li>             <li><img src="img/imgthmubs3.jpg" data-bigimage="img/bigimg3.jpg" data-original="img/origimg3.jpg" alt=""/></li>         </ul> </div>

i have big image , under big image there 3 thumbnails. if user click second thumbnail, big image has changes second data-bigimage. , swipebox link has change second data-original image. same other images.

this solution switching images:

    jquery(document).ready(function( $ ) {     $('.profile-thumbs li').click(function(){         var imageurl = $(this).children('img').data('bigimage');         var imageorig = $(this).children('img').data('original');         $('.profile-bigimage').attr("src", imageurl);         $('.swipebox').attr("href", imageorig);     }); });

here code pushes images swipebox array:

$(function () { new app();  $('.swipebox').click(function(e) {     $.swipebox(imgs());     e.preventdefault(); });  function imgs() {     var th = $('.profile-thumbs li');     var arr = [];      for(var = 0; < th.length; i++) {         var obj = {};         var current = $(th[i]).find('img').attr('data-original');         obj['href'] = current;         arr.push(obj);     }     return arr; }

});

the problem swipebox gallery starting swipe first image. how can change above code, shell swipe selected image?

you should use initialindexonarray option available in swipebox:

http://brutaldesign.github.io/swipebox/#options

full list of options:

<script type="text/javascript"> ;( function( $ ) {      $( '.swipebox' ).swipebox( {         usecss : true, // false force use of jquery animations         usesvg : true, // false force use of png buttons         initialindexonarray : 0, // image index init when array passed         hideclosebuttononmobile : false, // true hide close button on mobile devices         hidebarsdelay : 3000, // delay before hiding bars on desktop         videomaxwidth : 1140, // videos max width         beforeopen: function() {}, // called before opening         afteropen: null, // called after opening         afterclose: function() {} // called after closing         loopatend: false // true return first image after last image reached     } );  } )( jquery ); </script>

Comments

Post a Comment

Popular posts from this blog

Java 3D LWJGL collision -

-
i making 3d java game lwjgl library, , wondering how add collision detection, player not go through models. i using obj models. here objloader class, loads models: package renderengine; import java.io.bufferedreader; import java.io.file; import java.io.filenotfoundexception; import java.io.filereader; import java.util.arraylist; import java.util.list; import models.rawmodel; import org.lwjgl.util.vector.vector2f; import org.lwjgl.util.vector.vector3f; public class objloader { public static rawmodel loadobjmodel(string filename, loader loader){ filereader fr = null; try { fr = new filereader(new file("res/"+filename+".obj")); } catch (filenotfoundexception e) { system.err.println("couldn't load file!"); e.printstacktrace(); } bufferedreader reader = new bufferedreader(fr); string line; list<vector3f> vertices = new arraylist<vector3f...
Read more

spring - SubProtocolWebSocketHandler - No handlers -

-
i have ugly error during deploying spring app on jboss. 18:11:16,025 error [org.apache.catalina.core.containerbase.[jboss.web].[default-host].[/consumer]] (msc service thread 1-7) exception sending context initialized event listener instance of class org.springframework.web.context.contextloaderlistener: org.springframework.context.applicationcontextexception: failed start bean 'subprotocolwebsockethandler'; nested exception java.lang.illegalargumentexception: no handlers @ org.springframework.context.support.defaultlifecycleprocessor.dostart(defaultlifecycleprocessor.java:176) [spring-context-4.1.3.release.jar:4.1.3.release] @ org.springframework.context.support.defaultlifecycleprocessor.access$200(defaultlifecycleprocessor.java:51) [spring-context-4.1.3.release.jar:4.1.3.release] @ org.springframework.context.support.defaultlifecycleprocessor$lifecyclegroup.start(defaultlifecycleprocessor.java:346) [spring-context-4.1.3.release.jar:4.1.3.release] @ org.s...
Read more

methods - python can't use function in submodule -

-
my folder structure this: pythonstuff/ program.py modulea/ __init__.py foo.py bar.py here's code bar.py : def hello(): print("hello, world!") here's code program.py : #!/usr/bin/env python3 modulea import bar bar.hello() i run $ python3 program.py somehow error: file "program.py", line 3, in <module> bar.hello() attributeerror: 'module' object has no attribute 'hello' edit: __init__.py file empty. edit2: after trying realized had bar.py in root directory contained hello() method. bar.py in modulea/ directory empty. add it import os __all__ = [] module in os.listdir(os.path.dirname(__file__)): if module != '__init__.py' , module[-3:] == '.py': __all__.append(module[:-3]) the init .py files required make python treat directories containing packages; done prevent directories common name, such string, unintentionally hiding v...
Read more