Comments (6)
deadeyz
commented on June 8, 2024
1
@dev-ahmad Oh wow! I wish I had that when I started the website! Thanks
from reel.
dev-ahmad
commented on June 8, 2024
@deadeyz can you please post your reel code, btw, it's working fine on chrome but on safari you will see some lag when you scroll it , maybe this might help you more
https://www.ajax-zoom.com/index.php?cid=examples
from reel.
deadeyz
commented on June 8, 2024
@dev-ahmad thanks for helping.
On my Android Chrome browser it's not smooth at all, strange. Here's my code.
----------------------------------- HTML
TAIGA
ORCA
<img src="https://taigamotors.ca/wp-content/uploads/2019/09/white_v2_01.png" id="my_image" width="1920" height="1080"
class="reel"
data-images="https://taigamotors.ca/wp-content/uploads/2019/09/white_v2_##.png"
data-loops="true"
data-frame="1"
data-frames="23"
data-throwable="false"
data-revolution="1600"
data-responsive="true"
data-preloader="2"
data-brake="10"
data-laziness="12"
<img src="https://taigamotors.ca/wp-content/uploads/2019/09/black_v2_01.png" id="my_image2" class="reel" width="1920" height="1080"
data-images="https://taigamotors.ca/wp-content/uploads/2019/09/black_v2_##.png"
data-loops="true"
data-frame="1"
data-frames="23"
data-throwable="false"
data-revolution="1600"
data-responsive="true"
data-preloader="2"
data-brake="10"
<img src="https://taigamotors.ca/wp-content/uploads/2019/09/red_v2_01.png" id="my_image3" class="reel" width="1920" height="1080"
data-images="https://taigamotors.ca/wp-content/uploads/2019/09/red_v2_##.png"
data-loops="true"
data-frame="1"
data-frames="23"
data-throwable="false"
data-revolution="1600"
data-responsive="true"
data-preloader="2"
data-brake="10"
----------------------------------Javascript
<script> // ------------------------------------title 360 ` var controller = new ScrollMagic.Controller(); var scene = new ScrollMagic.Scene({ triggerElement: '#imagebox' }) .setClassToggle('.title' , 'titleshow') .addTo(controller); var scene = new ScrollMagic.Scene({ triggerElement: '#imagebox' }) .setClassToggle('.ORCA' , 'ORCAshow') .addTo(controller); var scene = new ScrollMagic.Scene({ triggerElement: '#imagebox' }) .setClassToggle('.designbutton' , 'designbuttonshow') .addTo(controller); // ------------------------------------SECTION 4 var controller = new ScrollMagic.Controller(); var scene = new ScrollMagic.Scene({ triggerElement: '.orderoverlay' }) .setClassToggle('.orderoverlay' , 'overlaydark2') .addTo(controller); // -----------------------------------SECTION 3 var controller = new ScrollMagic.Controller(); var scene = new ScrollMagic.Scene({ triggerElement: '.scrolltrig4' }) .setClassToggle('.scroll15', 'show') .addTo(controller); var scene = new ScrollMagic.Scene({ triggerElement: '.scrolltrig4' }) .setClassToggle('#scroll11', 'show') .addTo(controller); var scene = new ScrollMagic.Scene({ triggerElement: '.scrolltrig4' }) .setClassToggle('#scroll12', 'show4') .addTo(controller); var scene = new ScrollMagic.Scene({ triggerElement: '.scrolltrig4' }) .setClassToggle('#scroll13', 'show5') .addTo(controller); var scene = new ScrollMagic.Scene({ triggerElement: '.scrolltrig4' }) .setClassToggle('#scroll14', 'show6') .addTo(controller); // ---------------------------------- var controller = new ScrollMagic.Controller(); var scene = new ScrollMagic.Scene({ triggerElement: '.scrolltrig1' }) .setClassToggle('.scroll1', 'show') .addTo(controller); var controller = new ScrollMagic.Controller(); var scene = new ScrollMagic.Scene({ triggerElement: '.scrolltrig3' }) .setClassToggle('.scroll2', 'show') .addTo(controller); var controller = new ScrollMagic.Controller(); var scene = new ScrollMagic.Scene({ triggerElement: '.scrolltrig3' }) .setClassToggle('.scroll3', 'show2') .addTo(controller); var controller = new ScrollMagic.Controller(); var scene = new ScrollMagic.Scene({ triggerElement: '.scrolltrig3' }) .setClassToggle('.scroll4', 'show4') .addTo(controller); var controller = new ScrollMagic.Controller(); var scene = new ScrollMagic.Scene({ triggerElement: '.scrolltrig3' }) .setClassToggle('.scroll5', 'show5') .addTo(controller); var controller = new ScrollMagic.Controller(); var scene = new ScrollMagic.Scene({ triggerElement: '.scrolltrig3' }) .setClassToggle('.scroll6', 'show6') .addTo(controller); // -----------------------------------SECTION 1 <script type="text/javascript"> let currentColor = "white"; jQuery.noConflict(); jQuery(document).ready(function(){ jQuery("#color1").click(function(){ if(currentColor == "green") { jQuery("#my_image").reel("frame", (jQuery("#my_image2").reel('frame')) ); jQuery("#spin1").css("z-index", "5"); jQuery("#spin2").css("z-index", "4"); jQuery("#spin2").css("opacity", 0 ); jQuery("#spin1").css("opacity", 100 ); // COLOR CHANGER jQuery("#imagebox").css("background-color", "#e3e3e3"); jQuery("#ORCA").css("color", "white"); jQuery("#title").css("color", "#444444"); currentColor = "white"; console.log(currentColor); } }); jQuery("#color1").click(function(){ if(currentColor == "yellow") { jQuery("#my_image").reel("frame", (jQuery("#my_image3").reel('frame')) ); jQuery("#spin1").css("z-index", "5"); jQuery("#spin3").css("z-index", "4"); jQuery("#spin3").css("opacity", 0 ); jQuery("#spin1").css("opacity", 100 ); // COLOR CHANGER jQuery("#imagebox").css("background-color", "#e3e3e3"); jQuery("#ORCA").css("color", "white"); jQuery("#title").css("color", "#444444"); currentColor = "white"; console.log(currentColor); } }); // ------------------------------------------------- jQuery("#color2").click(function(){ if(currentColor == "yellow") { jQuery("#my_image2").reel("frame", (jQuery("#my_image3").reel('frame')) ); jQuery("#spin2").css("z-index", "6"); jQuery("#spin3").css("z-index", "4"); jQuery("#spin3").css("opacity", 0 ); jQuery("#spin2").css("opacity", 100 ); // COLOR CHANGER jQuery("#imagebox").css("background-color", "#e3e3e3"); jQuery("#ORCA").css("color", "#444444"); jQuery("#title").css("color", "#444444"); currentColor = "green"; console.log(currentColor); } }); jQuery("#color2").click(function(){ if(currentColor == "white") { jQuery("#my_image2").reel("frame", (jQuery("#my_image").reel('frame')) ); jQuery("#spin2").css("z-index", "6"); jQuery("#spin1").css("z-index", "4"); jQuery("#spin1").css("opacity", 0 ); jQuery("#spin2").css("opacity", 100 ); // COLOR CHANGER jQuery("#imagebox").css("background-color", "#e3e3e3"); jQuery("#ORCA").css("color", "#444444"); jQuery("#title").css("color", "#444444"); currentColor = "green"; console.log(currentColor); } }); // ---------------------------------------------------- jQuery("#color3").click(function(){ if(currentColor == "white") { jQuery("#my_image3").reel("frame", (jQuery("#my_image").reel('frame')) ); jQuery("#spin3").css("z-index", "6"); jQuery("#spin1").css("z-index", "4"); jQuery("#spin1").css("opacity", 0 ); jQuery("#spin3").css("opacity", 100 ); // COLOR CHANGER jQuery("#imagebox").css("background-color", "#e3e3e3"); jQuery("#ORCA").css("color", "#AE3030"); jQuery("#title").css("color", "#444444"); currentColor = "yellow"; console.log(currentColor); } }); jQuery("#color3").click(function(){ if(currentColor == "green") { jQuery("#my_image3").reel("frame", (jQuery("#my_image2").reel('frame')) ); jQuery("#spin3").css("z-index", "6"); jQuery("#spin2").css("z-index", "4"); jQuery("#spin2").css("opacity", 0 ); jQuery("#spin3").css("opacity", 100 ); // COLOR CHANGER jQuery("#imagebox").css("background-color", "#e3e3e3"); jQuery("#ORCA").css("color", "#AE3030"); jQuery("#title").css("color", "#444444"); currentColor = "yellow"; console.log(currentColor); } }); }); </script>from reel.
deadeyz
commented on June 8, 2024
@dev-ahmad maybe this is better: https://codepen.io/tristrus/pen/rNNXapX
from reel.
dev-ahmad
commented on June 8, 2024
@deadeyz First of all sorry for being late, and yes it seems like there's something wrong in your code, but I have 2 examples for you:
the first examples is for this reel library :
https://codepen.io/bdang/pen/bdqgjE
the second one for ajax zoom library:
https://codepen.io/mladenilic/pen/zKOpmg
try them, they are really good for your case and already implemented, good luck :")
from reel.
deadeyz
commented on June 8, 2024
@deadeyz First of all sorry for being late, and yes it seems like there's something wrong in your code, but I have 2 examples for you:
the first examples is for this reel library :
https://codepen.io/bdang/pen/bdqgjE
the second one for ajax zoom library:
https://codepen.io/mladenilic/pen/zKOpmgtry them, they are really good for your case and already implemented, good luck :")
Anychance you have any ideas of how to fix my existing code?
from reel.
Related Issues (20)
- Dragging within a range of sequence
- Reel.js is not working in Chrome when add next and previous button.
- data-loops = 'false' does not work on rows
- possibility to ude it merging some images to compose the shown one
- touch support HOT 1
- Reach event rotates one frame backwards before rotating correctly
- python
- sensitivity on touch movement
- responsive and Ajax - In russian is love)))
- Jquery reel larger than container
- how to stop image cache
- Dimension(s) of the target image unknown Ab HOT 3
- ReferenceError: jQuery is not defined
- Image Request Loop Issue HOT 3
- Using reel js object animated by a slider (jquery ui) inside a book of moodle. It doesn't work
- Not working properly on mobile Safari? HOT 8
- Chrome: Jerky or not smooth scrolling if it is placed at about 3000px or below in height
- Implement in Vuejs
- Uncaught TypeError: Cannot use 'in' operator to search for 'length' in 50, latest JQuery jquery.min-3.6.0.js not working
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from reel.